Alle SVG-Path-Befehle im Überblick: M, L, H, V, C, S, Q, T, A, Z

Beim Bau dieses Editors habe ich das d-Attribut hunderte Male von Hand geparst, und immer wieder komme ich auf dieselbe Liste zurück. Ein SVG-Pfad besteht aus genau zehn Befehlen, die als Buchstaben im d-Attribut aneinandergereiht werden. Jeder Buchstabe zieht eine feste Anzahl von Zahlen hinter sich her, und genau diese Anzahl ist der Schlüssel dafür, dass ein Pfad überhaupt korrekt gelesen wird. Diese Seite ist als Nachschlagewerk gedacht: Du findest hier jeden Befehl mit seiner Aufgabe, der genauen Zahl seiner Parameter und einem kleinen Beispiel. Wenn Du die Pfad-Syntax noch nie gesehen hast, lies zuerst die SVG-Path-Grundlagen, dort erkläre ich das Koordinatensystem und den Aufbau des d-Attributs von Grund auf. Ausprobieren kannst Du jeden Befehl direkt im Editor.

Groß- und Kleinschreibung: absolut oder relativ

Bevor wir die Befehle durchgehen, das eine Prinzip, das für alle gilt: Jeder Befehl existiert in einer Großbuchstaben- und einer Kleinbuchstaben-Variante. Der Großbuchstabe (zum Beispiel L) arbeitet mit absoluten Koordinaten, gemessen vom Ursprung des Koordinatensystems oben links. Der Kleinbuchstabe (l) arbeitet relativ, also als Verschiebung ausgehend vom aktuellen Punkt. L 10 10 springt zum Punkt (10, 10). l 10 10 verschiebt sich um zehn nach rechts und zehn nach unten, egal wo Du gerade stehst. Das gilt für alle Befehle außer Z, bei dem es keinen Unterschied macht. Die Details und wann welche Form sinnvoll ist, habe ich im Ratgeber absolute vs. relative Pfadbefehle ausführlich behandelt. In den Beispielen unten nutze ich meist die absolute Form.

M, m: Move (2 Parameter)

M x y setzt den Stift an eine neue Position, ohne eine Linie zu zeichnen. Es ist der Startbefehl jedes Pfades, denn ohne einen Anfangspunkt weiß der Renderer nicht, wo er loslegen soll. Die zwei Parameter sind die Ziel-Koordinaten x und y.

<path d="M 10 20" />

Ein Detail, das viele übersehen: Folgen einem M weitere Koordinatenpaare, werden diese nicht als weitere Moves gelesen, sondern implizit als L (Line) behandelt. Dazu unten mehr.

L, l: Line (2 Parameter)

L x y zieht eine gerade Linie vom aktuellen Punkt zum angegebenen Punkt. Die zwei Parameter sind wieder Ziel-x und Ziel-y.

<path d="M 10 10 L 90 10" />

Das ist der meistgenutzte Befehl überhaupt. Aus lauter L-Segmenten baust Du jedes Polygon.

H, h: Horizontal Line (1 Parameter)

H x zieht eine waagerechte Linie zum angegebenen x-Wert. Der y-Wert bleibt unverändert, deshalb braucht dieser Befehl nur einen Parameter. Es ist eine Kurzform für ein L, bei dem y gleich bliebe.

<path d="M 10 50 H 90" />

V, v: Vertical Line (1 Parameter)

V y ist das Gegenstück: eine senkrechte Linie zum angegebenen y-Wert, wobei x konstant bleibt. Auch hier nur ein Parameter.

<path d="M 50 10 V 90" />

H und V machen Rechtecke und rechtwinklige Formen deutlich lesbarer, weil klar ist, dass sich nur eine Achse bewegt.

C, c: Cubic Bézier (6 Parameter)

C x1 y1 x2 y2 x y zeichnet eine kubische Bézier-Kurve, die häufigste Kurvenart in SVG. Sie hat zwei Kontrollpunkte, die die Krümmung steuern: Die ersten beiden Werte (x1 y1) sind der erste Kontrollpunkt am Startende der Kurve, die nächsten beiden (x2 y2) der zweite Kontrollpunkt am Zielende, und die letzten beiden (x y) sind der eigentliche Endpunkt. Macht in Summe sechs Parameter.

<path d="M 10 80 C 40 10, 65 10, 95 80" />

Wie die Kontrollpunkte die Form ziehen, erkläre ich mit Grafiken im Ratgeber Bézier-Kurven verstehen.

S, s: Smooth Cubic Bézier (4 Parameter)

S x2 y2 x y ist die verkürzte kubische Bézier-Kurve für weiche Übergänge. Sie folgt in der Regel auf ein C oder ein weiteres S. Der erste Kontrollpunkt wird nicht angegeben, sondern automatisch als Spiegelung des zweiten Kontrollpunkts der vorangegangenen Kurve berechnet. Dadurch entsteht ein glatter, knickfreier Übergang. Übrig bleiben vier Parameter: der zweite Kontrollpunkt (x2 y2) und der Endpunkt (x y). Folgt S auf einen Befehl, der keine kubische Kurve war, liegt der reflektierte Kontrollpunkt auf dem aktuellen Punkt.

<path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" />

Q, q: Quadratic Bézier (4 Parameter)

Q x1 y1 x y zeichnet eine quadratische Bézier-Kurve. Im Gegensatz zur kubischen hat sie nur einen einzigen Kontrollpunkt. Die ersten beiden Werte (x1 y1) sind dieser eine Kontrollpunkt, die letzten beiden (x y) der Endpunkt. Also vier Parameter.

<path d="M 10 80 Q 50 10, 95 80" />

Quadratische Kurven sind einfacher zu steuern als kubische, aber weniger flexibel, weil ein einzelner Kontrollpunkt weniger Formen zulässt.

T, t: Smooth Quadratic Bézier (2 Parameter)

T x y ist die verkürzte quadratische Kurve, das Pendant zu S auf der quadratischen Seite. Der Kontrollpunkt wird als Spiegelung des Kontrollpunkts der vorangegangenen Kurve berechnet und muss nicht angegeben werden. Es bleiben nur die zwei Werte des Endpunkts (x y). T sollte auf ein Q oder ein weiteres T folgen, sonst liegt der Kontrollpunkt auf dem aktuellen Punkt und Du bekommst eine gerade Linie.

<path d="M 10 80 Q 50 10, 95 80 T 180 80" />

A, a: Arc (7 Parameter)

A rx ry rotation large-arc-flag sweep-flag x y zeichnet einen elliptischen Bogen und ist mit sieben Parametern der komplexeste Befehl. Der Reihe nach: rx und ry sind die beiden Radien der Ellipse, entlang der x- und y-Achse. rotation (der Angle-Wert, in Grad) dreht die Ellipse gegenüber der x-Achse. large-arc-flag ist 0 oder 1 und entscheidet, ob der kleine oder der große der beiden möglichen Bögen gezeichnet wird. sweep-flag ist ebenfalls 0 oder 1 und bestimmt die Drehrichtung, im oder gegen den Uhrzeigersinn. Die letzten beiden Werte (x y) sind der Endpunkt des Bogens.

<path d="M 10 50 A 40 40 0 0 1 90 50" />

Die beiden Flags sorgen bei Anfängern regelmäßig für Verwirrung, weil dieselben Radien und Endpunkte je nach Flag-Kombination vier verschiedene Bögen erzeugen. Wichtig zu wissen: Die Flags sind einstellige Werte, sie dürfen im d-String direkt an die Nachbarzahlen grenzen, was das Parsen tückisch macht.

Z, z: Close Path (0 Parameter)

Z schließt den Pfad, indem es eine gerade Linie vom aktuellen Punkt zurück zum letzten M-Startpunkt zieht. Der Befehl hat keine Parameter, und Groß- und Kleinschreibung sind hier gleichbedeutend. Nach einem Z beginnt ein neues M einen neuen Teilpfad.

<path d="M 10 10 H 90 V 90 H 10 Z" />

Der Unterschied zwischen einem geschlossenen Pfad mit Z und einem, der nur optisch am Startpunkt endet, zeigt sich beim Füllen und bei den Ecken: Nur ein echtes Z verbindet Start und Ende sauber.

Die Referenztabelle

Damit Du beim Schreiben oder Debuggen schnell nachschauen kannst, wie viele Werte hinter einen Befehl gehören, hier die komplette Übersicht:

Befehl	Name	Parameter	Kurzbeschreibung
M / m	Move	2	Stift ohne Zeichnen an x y setzen (Startpunkt)
L / l	Line	2	Gerade Linie zu x y
H / h	Horizontal Line	1	Waagerechte Linie zu x (y bleibt)
V / v	Vertical Line	1	Senkrechte Linie zu y (x bleibt)
C / c	Cubic Bézier	6	Kubische Kurve, zwei Kontrollpunkte + Endpunkt
S / s	Smooth Cubic	4	Kubische Kurve, erster Kontrollpunkt gespiegelt
Q / q	Quadratic Bézier	4	Quadratische Kurve, ein Kontrollpunkt + Endpunkt
T / t	Smooth Quadratic	2	Quadratische Kurve, Kontrollpunkt gespiegelt
A / a	Arc	7	Elliptischer Bogen (rx ry rotation large-arc-flag sweep-flag x y)
Z / z	Close Path	0	Pfad zum Startpunkt schließen

Implizite Wiederholungen: die Falle beim Parsen

Zwei Regeln der Pfad-Syntax sparen Tipparbeit, verwirren aber, wenn man sie nicht kennt. Erstens: Folgt einem Befehl mehr als die vorgesehene Anzahl an Parametern, wird der Befehl implizit wiederholt. L 10 10 20 20 30 30 ist also identisch zu L 10 10 L 20 20 L 30 30, drei aufeinanderfolgende Linien. Das funktioniert bei jedem Befehl, dessen Parameterzahl aufgeht: bei C in Sechser-Blöcken, bei Q in Vierer-Blöcken und so weiter.

<path d="M 10 10 L 20 20 30 30 40 10" />

Zweitens, und das ist die berüchtigtere Regel: Folgen einem M (oder m) weitere Koordinatenpaare, werden diese nicht als weitere Moves interpretiert, sondern als implizite L-Befehle. M 10 10 20 20 bedeutet also: springe zu (10, 10), dann ziehe eine Linie nach (20, 20). Bei einem relativen m werden die Folgepaare zu relativen l.

<path d="M 10 10 20 20 30 10" />

Diese implizite Move-zu-Line-Regel ist der Grund, warum ich beim Bau des Editors jedes Koordinatenpaar sauber dem richtigen aktiven Befehl zuordnen muss. Wenn Du Pfade von Hand schreibst, würde ich empfehlen, die Befehlsbuchstaben explizit zu wiederholen. Das kostet ein paar Zeichen mehr, macht den d-String aber lesbar und beim späteren Bearbeiten weniger fehleranfällig.

Wie es weitergeht

Mit dieser Befehlsliste hast Du das komplette Vokabular des d-Attributs beisammen. Für die Kurvenbefehle lohnt sich der tiefere Blick: Wie die Kontrollpunkte von C, S, Q und T die Form ziehen, zeige ich mit Grafiken unter Bézier-Kurven verstehen. Wenn Du unsicher bist, ob Du Deine Pfade mit Groß- oder Kleinbuchstaben schreiben solltest, klärt der Ratgeber absolute vs. relative Pfadbefehle die Vor- und Nachteile. Und am schnellsten lernst Du die Befehle, indem Du sie im Editor selbst setzt und dabei zusiehst, wie sich der d-String verändert.