SVG Tutorial

Pfade bieten die Möglichkeit alle erdenklichen Linienformen (offenen Pfade) oder Objektformen (geschlossene Pfade) zu erzeugen.
So können auch alle 6 Grundformen von SVG durch einen Pfad erzeugt werden.

Pfade werden mit Hilfe des path-Elements festgelegt.

Den eigentlichen Verlauf des Pfades bestimmen Sie durch das, im path-Element zwingend anzugebende Attribut d.
Das Attribut d erwartet als Wert einen alphanumerischen Wert, wobei die Buchstaben jeweils den Verlauf des Pfades festlegen und die Zahlen die notwendigen Koordinaten-, Winkel- oder sonstige Angaben für den entsprechenden "Verlaufsbuchstaben" bestimmen.
Die Buchstaben und Zahlen können durch ein Leerzeichen und/oder ein Kommazeichen beliebig von einander getrennt werden.

Folgende Buchstaben bzw. Pfadverläufe sind möglich:

• moveto: M, m - Startpunkt (das Aufsetzen des imaginären Stiftes)
• lineto: L, l und H, h und V, v - eine gerade Linie
• closepath: Z, z - eine Pfad schließen
• cubic Bézier curve: C, c und S, s - eine kubische Bézier-Kurve
• quadratic Bézier curve: Q, q und T, t - eine quadratische Bézier-Kurve
• elliptical arc curve: A, a - einen elliptischen Bogen

Großbuchstaben leiten eine absolute Angabe ein, d.h. alle nachfolgenden Werte werden als absolut im Koordinatensystem interpretiert.
Kleinbuchstaben leiten eine relative Angabe ein. Hier werden alle Werte im Bezug zum direkt vorher definierten Punkt des Pfades interpretiert.

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="160"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>das path-Element</title>
  <desc>Pfade mit absolutem und relativem Verlauf</desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana; font-size:12px; fill:black;}
      path {fill:red; stroke:black;}
    ]]>
    </style>
  </defs>

  <path d="M 50,10 L 10,50 L 90,50 Z" />
  <path d="M 250,10 l -40,40 l 80,0 z" />

  <text x="10" y="70">absolute Positionierung
  <tspan x="10" dy="20">Moveto M: 50,10</tspan>
  <tspan x="10" dy="16">Lineto L: 10,50</tspan>
  <tspan x="10" dy="16">Lineto L: 90,50</tspan>
  <tspan x="10" dy="16">Closepath Z</tspan>
  </text>
  <text x="210" y="70">relative Positionierung
  <tspan x="210" dy="20">Moveto M: 250,10</tspan>
  <tspan x="210" dy="16">Lineto l: -40,40</tspan>
  <tspan x="210" dy="16">Lineto l: 80,0</tspan>
  <tspan x="210" dy="16">Closepath z</tspan>
  </text>
</svg>
    

Das obige Beispiel zeigt zwei gefüllte Pfade, die jeweils ein Dreieck darstellen.
Bis auf den Startpunkt sind die beiden Dreiecke sind identisch.

Das erste Dreieck wird durch absolute Angaben festgelegt:
das Aufsetzen des Stifts M am absoluten Punkt (50,10),
dann eine gerade Linie L zum absoluten Punkt (10,50),
dann wieder eine gerade Linie L zum absoluten Punkt (90,50),
zuletzt das Schließen des Pfades mit Z.

Das zweite Dreieck wurde mit relativen Angaben festgelegt.
M 250,10 l -40,40 l 80,0 z.
Um die absoluten Punkte dieses Dreiecks zu ermitteln benötigen sie nur ein wenig Addition.
Die erste lineto Anweisung l -40,40 bezieht sich auf den zuletzt festgelegten Punkt, also den Startpunkt. Die relative Anweisung muß mit den Koordinaten des vorherigen Punktes auf folgende Weise addiert werden: (-40)+250 und (40)+10. Der absoluten Punkt ist also (210,50).
Die zweite lineto Anweisung l 80,0 bezieht sich wieder auf zuletzt festgelegt Punkt, also den Punkt (210,50). Die notwendigen Berechnungen sind also: (80)+210 und (0)+50. Der absolute Punkt ist demzufolge (290,50).
Das zweite Dreieck hätte daher auch mit folgenden Angaben definiert werden können:
M 250,10 L 210,50 L 290,50 Z.

Wenn Sie jetzt in der Lage sind, das erste Dreieck mit relativen Angaben zu erstellen, haben Sie das Prinzip der Groß- und Kleinbuchstaben für Pfadverläufe verstanden ;-).