3 Welten | |
---|---|
Wozu Vektorgrafik? | |
Wie macht man Vektorgrafiken? | |
Das Zeichnen von Pfaden | |
Animationen | |
3 Welten |
---|
Wer formatierte Texte mit eingebundenen Bildern erstellen möchte, hat die Wahl zwischen drei grundsätzlich unterschiedlichen Ansätzen, die alle ihre Vor- und Nachteile haben. Wer mit möglichst geringen Vorkenntnissen und ohne Handbuchstudium relativ einfache Texte zum Ausdrucken produzieren möchte, wählt eine Textverarbeitung wie MS Word. Das Programm zeigt den Text schon beim Schreiben ungefähr so, wie er ausgedruckt aussehen wird. Der tatsächlich abgespeicherte Text ist allerdings für Menschen praktisch gar nicht und sogar für neuere Programmversionen nur fehlerhaft lesbar. Für den Austausch mit Kollegen und für langfristige elektronische Speicherung eignen sich die von Textverarbeitungen produzierten Dateien daher kaum. Wer nach allen Regeln der Textsetzerkunst professionell gestaltete Texte mit vielen mathematischen oder chemischen Formeln schreiben möchte, kommt um TeX nicht herum. Das geht aber nicht ohne gründliche Einarbeitung sowie ständiges Üben und ist daher nichts für Leute, die TeX nur gelegentlich benutzen. Die resultierenden pdf-Dateien sehen zwar perfekt aus, aber die Vernetzung mit anderen Texten zu Hypertexten funktioniert nicht wirklich gut. Wer für das Internet schreibt und die Vorteile des World Wide Web voll ausspielen möchte, benötigt kein spezielles Programm, sondern eine besondere Programmiersprache.
Weil die Benutzer des World Wide Web mit ganz unterschiedlichen Geräten und Betriebssystemen arbeiten, sind Texte mit starr vorgegebenen (z.B. pdf) oder mit nur für bestimmte Versionen bestimmter Programme (z.B. MS-Word) korrekt lesbaren Formatierungen eher untauglich. Für das World Wide Web benötigt man Texte mit einer für Menschen und alle Geräte verständlichen Formatierung. Und das ist nur mit einem weltweit gültigen und für jeden kostenlos nutzbaren Standard möglich. Nach jahrelangen Machtkämpfen konkurrierender Unternehmen hat sich glücklicherweise das vom Erfinder (Tim Berners Lee) des World Wide Web angeführte World Wide Web Consortium (W3C) durchgesetzt. Es hat Standards erarbeitet, die immer wieder durch neue Möglichkeiten erweitert werden, ohne das dadurch ältere Texte unbrauchbar werden.
Es begann Ende 1990, als Tim Berners Lee der Welt die erste Software (WorldWideWeb alias Nexus) zum Lesen der ersten Internetseiten schenkte, die er in der von ihm entwickelten Seitenbeschreibungssprache HTML (Hypertext Markup Language = Hypertext-Auszeichnungssprache) geschrieben und auf einem von ihm programmierten Server abgelegt hatte. HTML beschreibt nicht wie eine Seite aussehen soll, sondern wie ihre verschiedenen Elemente zu interpretieren sind. Wie dann Überschriften, Tabellen, Quellcode oder Links konkret aussehen sollen, das bestimmen die Browser (Surf-Software). Wer möchte, kann die Browser dabei allerdings sehr weitgehend mit Hilfe von Cascading Style Sheets (CSS) unterstützen.
Anstatt sich seine Erfindungen patentieren zu lassen, bestand und besteht er bis heute darauf, dass das World Wide Web ausschließlich auf patentfreien Standards beruht. Später verallgemeinerte er HTML zu einer in alle möglichen Richtungen für die verschiedensten Zwecke erweiterbaren Auszeichnungssprache (Extensible Markup Language, XML), einer HTML umfassenden Metasprache zur Darstellung hierarchisch strukturierter Daten in Form von menschenlesbaren Textdateien für den plattform- und implementationsunabhängigen Austausch von Daten zwischen Computersystemen.
Von XML abgeleitet und deshalb auch mit HTML kompatibel sind die bekannten Standards RSS, MathML, GraphML, XHTML, XAML, GPX und SVG (Scalable Vector Graphics). Mit MathML lassen sich mathematische Formeln, mit GraphML Graphen und mit SVG Grafiken in HTML-Seiten integrieren.
Wozu Vektorgrafik? |
---|
Eingebettet in den HTML-Code sind Links (Sprungverweise) zu anderen Internetseiten oder zur Einbindung grafischer Elemente. Das können Photos, Pixelgrafiken oder animierte Pixelgrafiken (gif) sein, aber die wirken mit zunehmender Vergrößerung immer grobkörniger. Bindet man stattdessen statische oder animierte Vektorgrafiken ein, dann bleibt deren Qualität unabhängig von der Vergrößerung immer gleich.
Wie macht man Vektorgrafiken? |
---|
Man kann Vektorgrafiken im offenen und standardisierten svg-Format abspeichern und genau wie Pixelgrafiken durch Links in Texte einbinden. Weil eine Grafik im svg-Format nichts anderes als eine Reihe von Zeichnungsanweisungen ist, kann man sie aber auch direkt in den HTML-Code einbinden. Dazu öffnet (im übertragenen Sinne) man einfach im HTML-Text mit einem einleitenden: "<svg width="Xpx" height="Ypx">" ein X Pixel breites und Y Pixel hohes Grafik-Fenster und konstruiert innerhalb dieses mit "</svg>" abgeschlossenen Rahmens mit dem SVG-Befehlssatz eine Zeichnung. Dazu stehen zunächst einfache Anweisungen für Konstruktion von Linien, Rechtecken, Kreisen, Ellipsen und Polylinien/Polygone zur Verfügung.
<!-- Ich oeffne ein svg-Fenster mit 600 Pixeln Breite und 100 Pixeln Hoehe. --> <svg width="600px" height="100px" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- http://www.w3.org/2000/svg heisst der Bezeichner fuer den eindeutigen SVG-Namensraum (SVG Namespace) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Das ist die Dokument-Typ-Deklaration von SVG (Public Identifier) --> <title>Beispiel fuer eine svg-Grafik mit den Grafik-Grundelementen Linie, Rechteck, Kreis, Ellipse und Polylinie (Polygon)</title> <desc>Mit dem <line>-Befehl zeichnen wir eine schwarze Linie mit der Staerke 3 Pixel von Punkt x1,y1 zu Punkt x2,y2.</desc> <line x1="5" y1="5" x2="50" y2="95" style="stroke:black; stroke-width:3;" /> <desc>Rechteck mit abgerundeten Ecken von 100,10 links oben bis 100+100,10+50 rechts unten</desc> <rect x ="100" y ="10" width ="100" height ="50" rx ="5" ry ="5" fill="gray" stroke="black" stroke-width="3" /> <desc>Kreis um den Mittelpunkt 300,50 mit dem Radius 40 Pixel und einem schwarzen Rand um eine graue Flaeche</desc> <circle cx ="300" cy ="50" r ="40" fill="yellow" stroke="blue" stroke-width="5" /> <desc>Ellipse mit den Radien 20 und 40 Pixel um den Mittelpunkt 400,50.</desc> <ellipse cx="400" cy="50" rx="20" ry="40" fill="cyan" stroke="lime" stroke-width="4" /> <desc>eine Polylinie</desc> <polyline points="430,10 450,40 480,50 440,60 470,70 450,80 460,20" style="stroke:black; stroke-width:2; fill:none" /> <desc>ein Polygon</desc> <polygon points="480,10 500,40 530,50 490,60 520,70 500,80 510,20" style="stroke:black; stroke-width:2; fill:none" /> <!-- Beschriftung der Endpunkte --> <g font-size="10" font="sans-serif" fill="black" stroke="none" text-anchor="middle"> <text x="17" y="8" dx="0">5,5</text> <text x="28" y="98" dy="0">50,95</text> <text x="80" y="13" dx="0">100,10</text> <text x="220" y="63" dx="0">200,60</text> <text x="300" y="50" dx="0">300,50</text> <text x="400" y="50" dx="0">400,50</text> </g> </svg> |
Füllt man die Fläche in einem Polygon mit Farbe, dann stehen zwei ziemlich komplizierte Füllregeln zur Auswahl. Wie man an den folgenden Beispielen sieht, gelten diese Füllregeln auch Pfade. Die für Pfade anwendbaren Parameter erkläre ich im nächsten Kapitel.
<svg width="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Diese Beispiele erklaeren die fill-rule evenodd/nonzero und die Anwendung von defs und use.</desc> <rect x="1" y="1" width="1198" height="398" fill="lightcyan" stroke="blue" /> <defs> <path id="Triangle" d="M 16,0 L -8,9 v-18 z" fill="black" stroke="none" /> </defs> <g fill-rule="evenodd" fill="red" fill-opacity="0.6" stroke="black" stroke-width="3" > <path d="M 250,75 L 323,301 131,161 369,161 177,301 z" /> <use xlink:href="#Triangle" transform="translate(306.21 249) rotate(72)" overflow="visible" /> <use xlink:href="#Triangle" transform="translate(175.16,193.2) rotate(216)" overflow="visible" /> <use xlink:href="#Triangle" transform="translate(314.26,161) rotate(0)" overflow="visible" /> <use xlink:href="#Triangle" transform="translate(221.16,268.8) rotate(144)" overflow="visible" /> <use xlink:href="#Triangle" transform="translate(233.21,126.98) rotate(288)" overflow="visible" /> <path d="M 600,81 A 107,107 0 0,1 600,295 A 107,107 0 0,1 600,81 z M 600,139 A 49,49 0 0,1 600,237 A 49,49 0 0,1 600,139 z" /> <use xlink:href="#Triangle" transform="translate(600,188) rotate(0) translate(107,0) rotate(90)" overflow="visible" /> <use xlink:href="#Triangle" transform="translate(600,188) rotate(120) translate(107,0) rotate(90)" overflow="visible" /> <use xlink:href="#Triangle" transform="translate(600,188) rotate(240) translate(107,0) rotate(90)" overflow="visible" /> <use xlink:href="#Triangle" transform="translate(600,188) rotate(60) translate(49,0) rotate(90)" overflow="visible" /> <use xlink:href="#Triangle" transform="translate(600,188) rotate(180) translate(49,0) rotate(90)" overflow="visible" /> <use xlink:href="#Triangle" transform="translate(600,188) rotate(300) translate(49,0) rotate(90)" overflow="visible" /> <path d="M 950,81 A 107,107 0 0,1 950,295 A 107,107 0 0,1 950,81 z M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z" /> <use xlink:href="#Triangle" transform="translate(950,188) rotate(0) translate(107,0) rotate(90)" overflow="visible" /> <use xlink:href="#Triangle" transform="translate(950,188) rotate(120) translate(107,0) rotate(90)" overflow="visible" /> <use xlink:href="#Triangle" transform="translate(950,188) rotate(240) translate(107,0) rotate(90)" overflow="visible" /> <use xlink:href="#Triangle" transform="translate(950,188) rotate(60) translate(49,0) rotate(-90)" overflow="visible" /> <use xlink:href="#Triangle" transform="translate(950,188) rotate(180) translate(49,0) rotate(-90)" overflow="visible" /> <use xlink:href="#Triangle" transform="translate(950,188) rotate(300) translate(49,0) rotate(-90)" overflow="visible" /> </g> <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="left"> <text x="10" y="30" dx="0">fill-rule=evenodd, fill-opacity=0.6</text> <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="left"> <text x="10" y="340" dx="0">Flaechen werden gefaerbt, wenn auf jedem Weg von der Flaeche aus der</text> <text x="10" y="380" dx="0">Gesamtfigur heraus eine ungerade Anzahl von Linien ueberquert wird.</text> </g> </svg> |
Das Zeichnen von Pfaden |
---|
Die folgende Liste soll die vielen Parameter erklären, die man mir dem path-Befehl anwenden kann:
Der folgende Quelltext demonstriert wichtige Möglichkeiten des path-Befehls:
<!-- Ich oeffne ein svg-Fenster mit 470 Pixeln Breite und 350 Pixeln Hoehe. --> <svg width="470px" height="350px" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- http://www.w3.org/2000/svg heisst der Bezeichner fuer den eindeutigen SVG-Namensraum (SVG Namespace) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Das ist die Dokument-Typ-Deklaration von SVG (Public Identifier) --> <title>Beispiel fuer eine svg-Grafik mit nur einem animierten Parameter</title> <desc>Es werden 4 Elipsenausschnitte (arc) gezeichnet.</desc> <path d="M200,220 A50,30 0 0,0 240,260" style="stroke: black; stroke-width:2; fill:none;"/> <path d="M200,220 A50,30 0 1,1 240,260" style="stroke: green; stroke-width:2; fill:none;"/> <path d="M200,220 A30,50 0 1,0 240,260" style="stroke: blue; stroke-width:2; fill:none;"/> <path d="M200,220 A30,50 0 0,1 240,260" style="stroke: red; stroke-width:2; fill:none;"/> <desc>2 Linien gezeichnet mit relativen Koordinaten</desc> <path id="lineAB" d="M 100 320 l 150 -300" stroke="red" stroke-width="3" fill="none" /> <path id="lineBC" d="M 250 20 l 150 300" stroke="red" stroke-width="3" fill="none" /> <desc>eine quadratische Bezier-Kurve</desc> <path d="M 100 320 q 150 -300 300 0" stroke="blue" stroke-width="3" fill="none" /> <desc>eine kubische Bezier-Kurve</desc> <path d="M 100 320 c 300 -300 0 -300 300 0" stroke="purple" stroke-width="3" fill="none" /> <desc>eine unterbrochene und animierte gruene Linie</desc> <path d="M 175 170 l 150 0" stroke="green" stroke-width="3" stroke-dasharray="20,10,5,5,5,10" fill="none" > <animate attributeName="stroke-width" from="3" to="1" begin="1s" dur="6s" repeatCount="indefinite" /> <animate attributeName="d" from="M 175 170 l 150 0" to="M 175 270 l 150 0" begin="1s" dur="6s" repeatCount="indefinite" /> </path> <!-- Nun werden die Endpunkte der roten Linien mit Kreisen markiert. --> <g fill="yellow" stroke="black" stroke-width="1"> <circle id="pointA" cx="100" cy="320" r="3" /> <circle id="pointB" cx="250" cy="20" r="3" /> <circle id="pointC" cx="400" cy="320" r="3" /> </g> <!-- Beschriftung der Endpunkte --> <g font-size="10" font="sans-serif" fill="black" stroke="none" text-anchor="middle"> <text x="100" y="320" dx="-30">A 100,320</text> <text x="250" y="20" dy="-10">B 250 20</text> <text x="400" y="320" dx="30">C 400 320</text> </g> Wenn dieser Satz angezeigt wird, dann kann der Browser keine inline-SVG anzeigen. </svg> |
Und so sieht das Ergebnis aus:
Animationen |
---|
Um außer zweidimensionalen Vektorgrafiken auch zweidimensionale Animationen beschreiben zu können, enthält der svg-Befehlssatz auch einige Erweiterungen, die auf der vom World Wide Web Consortium wiederum auf der Basis des XML-Standards entwickelten Auszeichnungssprache für zeitsynchronisierte multimediale Inhalte namens SMIL (Synchronized Multimedia Integration Language) beruhen. Ein erstes Beispiel war schon weiter oben die dünner werdende grüne Linie. Die folgenden Beispiele zeigen die Animation weiterer Parameter. Richtige Anleitungen gibt es auf folgenden Internetseiten:
<svg width="300px" height="100px" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <title>Beispiel fuer eine svg-Grafik mit verschiedenen animierten Parametern</title> <desc>Zunaechst wird ein sich von schwarz nach gelb verfaerbendes Rechteck gezeichnet.</desc> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="2" /> <animate attributeName="fill" from="black" to="yellow" dur="5s" repeatCount="indefinite" /> </rect> <desc>Binnen 5 Sekunden veraendern sich saemtliche Parameter des Kreises.</desc> <circle cx="0" cy="50" r="5" fill="blue" stroke:rgb(0,0,0) stroke-width="1"> <animate attributeName="r" from="5" to="40" dur="5s" repeatCount="indefinite" /> <animate attributeName="cx" from="10" to="250" dur="5s" repeatCount="indefinite" /> <animate attributeName="cy" from="10" to="50" dur="5s" repeatCount="indefinite" /> <animate attributeName="stroke" from="black" to="red" dur="5s" repeatCount="indefinite" /> <animate attributeName="stroke-width" from="1" to="10" dur="5s" repeatCount="indefinite" /> <animate attributeName="fill" from="blue" to="black" dur="5s" repeatCount="indefinite" /> </circle> </svg> |
Man kann Farben nicht nur mit der Zeit ändern, sondern auch in Abhängigkeit vom Ort. Das nennt man Farbverläufe oder Gradienten. In SVG 1.1 sind zwei gradient elements definiert - linearGradient und radialGradient. Hat man sich für eine dieser beiden Grundformen entschieden, legt man mit den sogenannten Attributen (Parametern) den genauen Verlauf des Gradienten fest. Im Falle von linearGradient lässt sich mit an beiden Koordinaten x1, y1 und x2, y2 mit Prozentangaben einstellen, von wo bis wo der Gradient verlaufen soll. Verzichtet man auf diese Angaben, erstreckt sich der Gradient einfach gleichmäßig von links oben nach rechts unten. Bei radialen Gradienten ändern sich die Farben kreisförmig vom Mittelpunkt nach außen. In diesem Fall liefern "cx" den horizontalen und "cy" den vertikalen Startpunkt, fx den horizontalen und fy den vertikalen Endpunkt sowie r den Radius. Die Attribute cx, cy, fx, fy und r sind standardmäßig mit dem Wert 0.5 bzw. 50% vorbelegt. Füllt ein Gradient nicht die gesamte Fläche, dann kann man mit spreadMethod = "pad oder reflect oder repeat" wählen, ob der Rand außerhalb des Gradienten mit den Endfarbe (pad), einem gespiegelten Gradienten (reflect) oder Wiederholungen des Gradienten (repeat) gefüllt werden soll. Verzichtet man auf die Angabe, wird standardmäßig die Methode "pad" angewendet.
|
Mit dem sogenannten Stop-Befehl und seinen Parametern werden die Farben definiert. Innerhalb des stop-Befehls regelt "offset" die Position der Farbe (erlaubte Werte sind 0-1 oder 0%-100%), "stop-color" setzt die Farbe und "stop-opacity" regelt die Transparenz der Farbe (erlaubte Werte wie bei offset).
|
|
experimentell |
---|
meine buchunabhängigen Lerntexte
Kommentare und Kritik von Fachleuten und Lernenden sind jederzeit willkommen.
Roland Heynkes, CC BY-SA-3.0 DE