Pfade in SVG-Dateien

Mit Pfaden kann man komplexere geometrische Formen zeichnen. Man kann sich so einen Pfad als Folge von einfachen Bewegungsanweisungen für einen virtuellen Zeichenstift vorstellen, den man mitteilt: gehe zum Punkt mit den Koordinaten x0,y0 und ziehe von dort eine Linie nach x1,y2.

Ein ganz einfaches Beispiel

In einem ersten ganz einfachen Beispiel wird eine Linie von links oben nach rechts unten gezeichnet. Die SVG-Pfadanweisung sieht so aus:

<path fill="none" stroke="#FF00FF" stroke-width="2" d="m0,0l400,300" id="svg_3"/>

Abgesehen von den Attributen zur Dicke und Farbe der Linie usw. lautet die eigetliche Pfadanweisung

d="m0,0l400,300"

Jede Pfadanweisung beginnt mit einem d, die eigentliche Pfadanweisung wird in anführungszeichen gesetzt. Dann folgt m0,0 - Zeichenstift geht zum Punkt mit den Koordinaten x=0 und y=0, das ist ganz oben links. Darauf folgt l400,300 - zeichne Linie zum Punkt x=400 und y=300. Genauer gesagt lautet die Anweisung eigentlich: zeichne zum Punkt, der auf der x-Achse 400 Pixel und auf der y-Achse 300 Pixel entfernt liegt, denn Zeichenbefehle mit kleinen Buchstaben sind immer relative Angaben.

Die einzelnen Zeichenstift-Befehle

• d - damit wird, wie bereits beschrieben, die Folge von Zeichenstiftbewegungen eingeleitet, es geschieht aber noch nichts
• M bzw. m - moveto - bewegt den Zeichenstift an die angegebene Position, es wird aber noch nichts gezeichnet.
• L bzw. l - lineto - zeichnet eine Linie
• H bzw. h - horizontal lineto - zeichnet eine waagerechte Linie
• V bzw. v - vertikal lineto - zeichnet eine senkrechte Linie
• Z bzw. z -
• C bzw. c -
• S bzw. s -
• Q bzw. q -
• T bzw. t -
• A bzw. a -