 |
SVG bietet eine stattliche Anzahl vordefinierter Grafikobjekte: Rechtecke, Quadrate, Kreise und viele mehr. Wenn Sie jedoch ein komplexes Objekt darstellen wollen, kann das mit den vordefinierten Bauteilen ein mühsames oder sogar unmögliches Unterfangen werden. Deshalb gibt es in SVG noch eine weitere Möglichkeit, Formen zu definieren: die Pfade.
Was sind Pfade?
Pfade bestehen aus einer Anzahl verschiedener Anweisungen. Diese Anweisungen geben an, wohin der Zeichen-Cursor sich bewegen soll und was er dabei tun. Pfade sind also vergleichbar mit einer Art Zeichenanweisungen für einen Stift: z.B. "Gehe nach links oben. Zeichne nun eine 10cm lange Linie nach rechts. Gehe nun 3 cm nach unten und zeichne noch eine solche Linie". Kennt übrigens noch jemand die Programmiersprache LOGO? Das Igel-Konzept dort ist nämlich sehr ähnlich.
Die einzelnen Anweisungen bestehen aus einem Buchstaben, der ihre Funktion kennzeichnet. Es folgen Koordinaten ("Argumente" genannt), die das Ziel der Anweisung angeben, also z.B. wohin eine Linie gezeichnet werden soll oder wohin der Zeichen-Cursor gehen soll.
Die Start-Koordinaten dagegen entsprechen immer der aktuellen Cursor-Position (manchmal auch als "aktueller Punkt" bezeichnet). Ist der Anweisungs-Buchstabe in Großschrift, so werden die Ziel-Koordinaten als absolut angesehen. Will man relative Koordinaten (also ausgehend von den Start-Koordinaten) verwenden, so nimmt man Kleinbuchstaben.
Wenn wir es mit Koordinaten-Paaren (damit ist gemeint, dass eine X- und Y-Koordinate zusammengehörig angegeben werden) zu tun haben, können die beiden Koordinaten mit einem Komma oder einem Leerzeichen getrennt werden - wobei wir uns hier grundsätzlich fürs Leerzeichen entschieden haben.
Erste Schritte
Pfade werden mit dem <path>-Tag definiert. Das Attribut d enthält die oben angesprochenen Anweisungen.
Bevor wir jedoch erklären, welche Anweisungen es gibt und wie diese eingesetzt werden, zum Einstieg einige simple Beispiel-Pfade
Dieser Code hier zeichnet z.B. zwei einfache Linien in Blau:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">
<svg>
<path d="M 100 100 L 200 200 L 300 200" stroke="blue" stroke-width="3" fill="none" />
</svg>
Diesen Code in neuem Fenster anzeigen
Zur Erklärung: der Befehl M positioniert den Cursor auf den angegebenen Koordinaten, der Befehl L zeichnet von dort aus eine Linie.
Das gleiche Bild, nur diesmal mit relativen Angaben bei den Linien-Befehlen:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">
<svg>
<path d="M 100 100 l 100 100 l 100 0" stroke="blue" stroke-width="3" fill="none" />
</svg>
Diesen Code in neuem Fenster anzeigen
Ihnen schon bekannte Befehle, z.B. zum Einstellen des Rahmens, funktionieren auch mit Pfaden. Wenn Sie fill nicht auf none setzen, wird der SVG-Interpreter die Fläche füllen wollen und dazu eine Verbindung zwischen der ersten und letzten Cursor-Position herstellen. Genau das wollen wir hier aber nicht.
Horizontale/vertikale Linien
Der L-Befehl erwartet ein Koordinatenpaar, um den Zielpunkt festzusetzen. Einfacher funktionieren dagegen die H- und V-Kommandos, die horizontale bzw. vertikale Linien zeichnen. Sie benötigen deshalb auch nur eine Koordinate als Argument.
Beispiel:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">
<svg>
<path d="M 300 300 h 100 v -200" stroke="blue" stroke-width="3" fill="none" />
</svg>
Diesen Code in neuem Fenster anzeigen
Hier gut zu sehen: relative Koordinaten, die natürlich auch negativ sein können.
Pfade abkürzen
Die beiden obigen Code-Beispiele enthalten noch viel Redundanz. Tatsächlich könnten Sie z.B. den zweiten L-Befehl (nicht aber das dazugehörige Koordinatenpaar) einfach weglassen. Der Interpreter würde dann aus dem Kontext erschließen, dass Sie den Befehl wiederholen wollen. Auch die Leerzeichen zwischen Koordinaten und Buchstaben sind nicht unbedingt nötig:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">
<svg>
<path d="M100 100L200 200 300 200" stroke="blue" stroke-width="3" fill="none" />
</svg>
Diesen Code in neuem Fenster anzeigen
Wir sind der Meinung, dass einige zusätzliche Leerzeichen nicht schaden können, und sei es nur aus Gründen der Übersichtlichkeit. Sie sollten jedoch auch die Kurz-Notationen kennen und verstehen, denn im Internet werden diese gerne verwendet.
Andere Befehle
Pfad abschließen
Der Z-Befehl (Schreibweise unwichtig) beendet einen Pfad und zieht eine Linie zum ersten Koordinatenpaar. Wirkung ist also, dass aus einem Pfad eine unterbrechungsfreie Form wird. Er erwartet keine zusätzlichen Koordinaten.
Wenn Sie ihn in unser bisheriges Beispiel einbinden, wird eine dritte Linie angezeigt:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">
<svg>
<path d="M 100 100 L 200 200 L 300 200 Z" stroke="blue" stroke-width="3" fill="none" />
</svg>
Diesen Code in neuem Fenster anzeigen
Kubische Bézier-Kurven
Der Befehl für kubische Bézier-Kurven ist C. Kubische Bézier-Kurven werden definiert durch ein Viereck, dessen Koordinaten Sie angeben müssen. Die Kurve wird dann sozusagen ins Viereck gezeichnet.
Deswegen müssen Sie auch drei Koordinaten-Paare an den C-Befehl anschließen. Die ersten beiden Paare sind Kontrollpunkte, also sozusagen Ecken des Vierecks. Das dritte Paar gibt den Zielort der Kurve an. Begonnen wird sie an der aktuellen Cursor-Position.
Die Syntax des Befehls ist also C x1 y1 x2 y2 x3 y3.
Zum Verständnis des Befehls ist es sicher hilfreich, wenn Sie sich den Code auch einmal im SVG-Viewer ansehen.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">
<svg>
<!-- Der Kurven-Pfad -->
<path d="M 200 200 C 200 100 400 100 400 400" stroke="blue" stroke-width="3" fill="none"/>
<!-- zur Verdeutlichung im Viewer -->
<line x1="200" y1="200" x2="200" y2="100" stroke="gray" stroke-width="2" />
<text x="200" y="110" fill="gray">200, 100</text>
<line x1="200" y1="100" x2="400" y2="100" stroke="gray" stroke-width="2" />
<text x="400" y="110" fill="gray">400, 100</text>
<line x1="400" y1="100" x2="400" y2="400" stroke="gray" stroke-width="2" />
<text x="400" y="410" fill="gray">400, 400</text>
<line x1="400" y1="400" x2="200" y2="200" stroke="gray" stroke-width="2" />
<text x="200" y="210" fill="gray">200, 200</text>
</svg>
Diesen Code in neuem Fenster anzeigen
Sie können kubische Bézier-Kurven auch mit dem Kommando S erzeugen. Die Syntax für diesen Befehl ist S x2 y2 x3 y3. Sie haben sicher bemerkt, dass hier das erste Koordinatenpaar x1 y1 fehlt. Es wird bei Verwendung des S-Befehls berechnet, indem das x2 y2-Paar des vorangegangen Befehls an der aktuellen Cursorposition gespiegelt wird.
Daher macht dieser Befehl nur Sinn, wenn ein anderer S- oder C-Befehl vorangegangen ist. Ist dem nicht so, dann wird das x1 y1-Paar mit dem aktuellen Punkt gleichgesetzt.
Beispiel dazu:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">
<svg>
<!-- Der Kurven-Pfad -->
<path d="M 200 200 C 200 100 400 100 400 400 S 600 700 600 200" stroke="blue" stroke-width="3" fill="none"/>
<!-- zur Verdeutlichung im Viewer -->
<line x1="200" y1="200" x2="200" y2="100" stroke="gray" stroke-width="2" />
<text x="200" y="110" fill="gray">200, 100</text>
<line x1="200" y1="100" x2="400" y2="100" stroke="gray" stroke-width="2" />
<text x="400" y="110" fill="gray">400, 100</text>
<line x1="400" y1="100" x2="400" y2="400" stroke="gray" stroke-width="2" />
<text x="400" y="410" fill="gray">400, 400</text>
<line x1="400" y1="400" x2="200" y2="200" stroke="gray" stroke-width="2" />
<text x="200" y="210" fill="gray">200, 200</text>
</svg>
Diesen Code in neuem Fenster anzeigen
Der entsprechende Abschnitt der W3C-SVG-Spezifikation enthält viele andere gute Beispiele.
Quadratische Bézier-Kurven
Der Q-Befehl zeichnet eine quadratische Bézier-Kurve. Der SVG-Interpreter erwartet zwei dem Kommando folgende Koordinatenpaare: einen Kontrollpunkt und einen Endpunkt für die Kurve. Als Startpunkt wird die aktuelle Cursor-Position genommen. Die Syntax des Befehls ist also Q x1 y1 x2 y2.
Wenn Sie sich dieses Beispiel im Viewer ansehen, wird Ihnen alles klar werden:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">
<svg>
<!-- Der Kurven-Pfad -->
<path d="M 300 300 Q 350 200 400 300" stroke="blue" stroke-width="3" fill="none"/>
<!-- Erklärungslinien -->
<text x="300" y="290" fill="gray">300, 300</text>
<line x1="300" y1="300" x2="350" y2="200" stroke="gray" stroke-width="2" />
<text x="350" y="190" fill="gray">x1 y1</text>
<line x1="350" y1="200" x2="400" y2="300" stroke="gray" stroke-width="2" />
<text x="400" y="290" fill="gray">x2 y2</text>
</svg>
Diesen Code in neuem Fenster anzeigen
Den gleichen Spiegelungs-Mechanismus wie bei den kubischen Bézier-Kurven gibt es auch bei den quadratischen. Der Befehl lautet hier T und benötigt nur noch ein Koordinatenpaar.
Ellipsen-Bögen
Ellipsen-Bögen werden mit dem Befehl A erzeugt. Das dahinterstehende Prinzip ist simpel: ausgehend vom aktuellen Punkt wird zu einem anderen Punkt mit den Koordinaten x1, y1 ein ellipsenförmiger Bogen gezogen. Um die Form des Bogens zu beeinflussen, gibt es verschiedene Parameter:
r1 und r2: zwei Radi. Sie beeinflussen also die Form und Größe des Bogens.
rotation: gibt an, wie der Ellipsen-Bogen relativ zum Koordinatensystem gedreht werden soll (meist nur sichtbar, wenn r1 einen anderen Wert hat als r2).
large: es gibt insg. vier Prinzipien, nach denen ein Bogen zwischen zwei Punkten gezeichnet werden kann. Zwei davon ergeben sich aus der Möglichkeit, festzulegen, ob man die lange oder kurze Verbindung gezeichnet haben möchte (siehe dazu auch folgende Beispiele). Eine "1" steht hier für die lange Verbindung, eine "0" für die kurze.
- Die anderen beiden Prinzipien resultieren aus der Möglichkeit, einen Bogen entweder "hingekrümmt" oder "weggekrümmt" darzustellen. Das entsprechende Argument heißt
sweep. Die beiden Möglichkeiten werden wieder durch eine "1" bzw. "0" ausgedrückt.
Die Gesamt-Syntax des Befehls ist A r1 r2 rotation large sweep x1 y1.
Kompliziert? Dann sehen Sie sich doch einmal die folgenden Beispiele in Ihrem SVG-Viewer an, das wird helfen!
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">
<svg>
<!-- sweep- und large-Variationen -->
<path d="M50,150 a 50 50 0 1 0 50 -50 " fill="none" stroke="blue" stroke-width="5" />
<path d="M250,150 a 50 50 0 1 1 50 -50 " fill="none" stroke="blue" stroke-width="5" />
<path d="M450,150 a 50 50 0 0 0 50 -50 " fill="none" stroke="blue" stroke-width="5" />
<path d="M650,150 a 50 50 0 0 1 50 -50 " fill="none" stroke="blue" stroke-width="5" />
<!-- ein Tortendiagramm -->
<path d="M100,450 a 100 100 0 1 0 100 -100 v 100 h -100" fill="SkyBlue" stroke="Black" stroke-width="2" />
<text x="220" y="490" font-family="Arial" font-size="14pt">75%</text>
<!-- ein Planetensystem -->
<path d="M400,500 a 150 50 1 1 0 10 -10 " fill="none" stroke="black" stroke-width="1" />
<path d="M410,490 a 10 10 1 1 0 1 1 " fill="blue" stroke="black" stroke-width="1" />
<path d="M550,500 a 20 20 1 1 0 1 1 " fill="yellow" stroke="black" stroke-width="1" />
<!-- Erklärungslinien, -texte -->
<text x="50" y="20" font-family="Arial" font-size="14pt">
Div. Variationen, nur mit unterschiedlichen Parametern:
</text>
<text x="50" y="220">
large = 1
</text>
<text x="50" y="240">
sweep = 0
</text>
<text x="250" y="220">
large = 1
</text>
<text x="250" y="240">
sweep = 1
</text>
<text x="450" y="220">
large = 0
</text>
<text x="450" y="240">
sweep = 0
</text>
<text x="650" y="220">
large = 0
</text>
<text x="650" y="240">
sweep = 1
</text>
<text x="50" y="300" font-family="Arial" font-size="14pt">
Mit den Ellipsen kann man auch wunderbar Tortendiagramme darstellen:
</text>
<text x="400" y="400" font-family="Arial" font-size="14pt">
Oder auch andere Dinge:
</text>
</svg>
Diesen Code in neuem Fenster anzeigen
Fazit
Mit SVG-Pfaden können Sie praktisch beliebige Objekte in SVG darstellen. Wahrscheinlich ist es auch kein Fehler, zumindest die Grundformen in einem SVG-Grafikprogramm zu erstellen, das erleichtert die Arbeit ungemein. Zum Abschluss noch ein letztes Beispiel:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/PR-SVG-20010904/DTD/svg10.dtd">
<svg>
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
<filter id="blur2">
<feGaussianBlur in="SourceGraphic" stdDeviation="4"/>
</filter>
</defs>
<rect x="300" y="30" height="400" width="150" stroke="black" stroke-width="1" fill="LightSkyBlue" fill-opacity="0.5" />
<rect x="100" y="150" height="200" width="400" stroke="black" stroke-width="1" fill="#EEEEEE"/>
<rect x="50" y="100" height="100" width="100" stroke="black" stroke-width="1" fill="Salmon" fill-opacity="0.5" />
<path d="M200,200 a 50 50 0 1 0 50 50 " fill="none" stroke="blue" stroke-width="5" filter="url(#blur2)" />
<path d="M200,250 l 40 -80 l 40 80 m -80 -30 h 100 l 20 80 l 20 -50 l 20 50 l 20 -80 h 100 m -60 0 m 0 30 v -80 q 100 40 0 80" fill="none" stroke="blue" stroke-width="3" filter="url(#blur)"/>
</svg>
Diesen Code in neuem Fenster anzeigen
|
|
|
|
Sie wollen diese Seite ausdrucken? Dafür haben wir eine spezielle Druckversion ohne grafische Elemente entwickelt! |
|
|
Einführung in CSS bei HTMLWorld.
|
|
