Linien und Pfade mit dem path-Element
Fast jede Grafik, die aus einem Zeichenprogramm kommt, besteht zum größten Teil aus Pfaden. Wer das d-Attribut lesen kann, versteht, was in einer SVG-Datei tatsächlich passiert.
Ein Stift, der Befehle bekommt
Das Element <path> hat ein einziges zentrales Attribut: d für „data“. Darin steht eine Folge von Befehlen, jeweils ein Buchstabe gefolgt von Zahlen. Am einfachsten stellst du dir einen Zeichenstift vor, der über das Papier geführt wird. M hebt ihn an und setzt ihn an eine neue Stelle, L zieht eine gerade Linie dorthin, Z führt ihn zurück zum Anfang des Teilpfads.
Großbuchstaben bedeuten absolute Koordinaten, Kleinbuchstaben relative, also gemessen vom aktuellen Punkt aus. L 50 80 zieht eine Linie zum Punkt (50|80), l 50 80 zieht sie 50 Einheiten nach rechts und 80 nach unten.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="240" height="180">
<path d="M 40 140 V 70 L 100 20 L 160 70 V 140 Z M 85 140 V 100 H 115 V 140"
fill="#cfdcf7" stroke="#1f5fd1" stroke-width="4" stroke-linejoin="round"/>
</svg>Die Befehle im Überblick
| Befehl | Parameter | Bedeutung |
|---|---|---|
M | x y | Stift absetzen (move to), beginnt einen neuen Teilpfad |
L | x y | gerade Linie zum Punkt |
H / V | x bzw. y | waagerechte bzw. senkrechte Linie |
C | x1 y1 x2 y2 x y | kubische Bézierkurve mit zwei Kontrollpunkten |
S | x2 y2 x y | glatte Fortsetzung einer kubischen Kurve |
Q | x1 y1 x y | quadratische Bézierkurve mit einem Kontrollpunkt |
T | x y | glatte Fortsetzung einer quadratischen Kurve |
A | rx ry Drehung große-Bogen-Flag Richtungs-Flag x y | elliptischer Bogen |
Z | keine | Teilpfad schließen |
Bézierkurven
Kurven beschreibt SVG mit Bézierkurven, benannt nach dem französischen Ingenieur Pierre Bézier, der sie in den 1960er-Jahren bei Renault für die Konstruktion von Karosserien nutzte. Eine kubische Kurve (C) hat einen Start- und einen Endpunkt und dazwischen zwei Kontrollpunkte. Die Kurve geht nicht durch die Kontrollpunkte hindurch. Sie wird von ihnen angezogen, und die Verbindung vom Endpunkt zum Kontrollpunkt gibt die Richtung an, in der die Kurve den Punkt verlässt.
Genau das siehst du in jedem Vektorprogramm als „Anfasser“: die kleinen Griffe an einem Ankerpunkt, mit denen man eine Kurve biegt. Im Beispiel sind sie eingezeichnet.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 170" width="320" height="170">
<path d="M 30 140 C 60 20, 250 20, 290 140" fill="none" stroke="#1f5fd1" stroke-width="4"/>
<path d="M 30 140 L 60 20 M 290 140 L 250 20" stroke="#9aa3b2" stroke-width="1.5"/>
<circle cx="60" cy="20" r="5" fill="#fff" stroke="#566070" stroke-width="2"/>
<circle cx="250" cy="20" r="5" fill="#fff" stroke="#566070" stroke-width="2"/>
<rect x="25" y="135" width="10" height="10" fill="#c2410c"/>
<rect x="285" y="135" width="10" height="10" fill="#c2410c"/>
</svg>Die quadratische Variante Q kommt mit einem Kontrollpunkt aus und ist dadurch leichter zu berechnen, aber weniger flexibel. S und T sparen Schreibarbeit: Sie spiegeln den letzten Kontrollpunkt der vorherigen Kurve, sodass zwei Kurvenstücke ohne Knick ineinander übergehen. So entstehen Wellenlinien mit sehr kurzem Code.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 100" width="320" height="100">
<path d="M 10 50 Q 45 5, 80 50 T 160 50 T 240 50 T 310 50" fill="none" stroke="#1f5fd1" stroke-width="4" stroke-linecap="round"/>
</svg>
Bögen
Der Befehl A zeichnet ein Stück einer Ellipse und gilt als der schwierigste. Er bekommt die beiden Radien, eine Drehung der Ellipse in Grad und den Zielpunkt. Dazwischen stehen zwei Schalter mit den Werten 0 oder 1. Zwischen zwei Punkten passen nämlich meistens zwei Ellipsen mit den gegebenen Radien, und auf jeder gibt es einen kurzen und einen langen Weg. Der erste Schalter (large-arc-flag) wählt den langen oder kurzen Bogen, der zweite (sweep-flag) die Drehrichtung.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 170" width="340" height="170">
<path d="M 30 85 A 50 50 0 0 0 100 85" fill="none" stroke="#1f5fd1" stroke-width="3"/>
<path d="M 30 85 A 50 50 0 0 1 100 85" fill="none" stroke="#7fa6ef" stroke-width="3"/>
<path d="M 200 85 A 50 50 0 1 0 270 85" fill="none" stroke="#1f5fd1" stroke-width="3"/>
<path d="M 200 85 A 50 50 0 1 1 270 85" fill="none" stroke="#7fa6ef" stroke-width="3"/>
<rect x="26" y="81" width="8" height="8" fill="#c2410c"/><rect x="96" y="81" width="8" height="8" fill="#c2410c"/>
<rect x="196" y="81" width="8" height="8" fill="#c2410c"/><rect x="266" y="81" width="8" height="8" fill="#c2410c"/>
</svg>Pfade von Hand lesen
Pfade aus Zeichenprogrammen sehen oft so aus: m12.5 3.2c-1.1 0-2 .9-2 2v6l3 3. Das ist dieselbe Sprache, nur ohne Leerzeichen. Ein Minuszeichen oder ein zweiter Dezimalpunkt beginnt automatisch eine neue Zahl, und folgen auf einen Befehl mehr Zahlen als nötig, wird er einfach wiederholt. Die Schreibweise spart Platz, ist aber schwer zu lesen. Zum Verstehen hilft es, die Befehle gedanklich zu trennen und mit Kleinbuchstaben vom jeweils letzten Punkt aus zu rechnen.
Wie Pfade aussehen, hängt außerdem von der Füllregel ab. Schneidet sich ein Pfad selbst oder enthält er mehrere Teilpfade, entscheidet fill-rule, welche Bereiche gefüllt werden. Mit evenodd entstehen Löcher, etwa beim Buchstaben O, mit nonzero hängt das Ergebnis von der Zeichenrichtung ab.
Pfade sind auch die Grundlage für Text entlang einer Linie, wie das Kapitel über Text zeigt, und für Bewegungen entlang einer Bahn im Kapitel Animation.