Ein SVG-Pfad ist eine Kette aus Befehlen und Koordinaten im d-Attribut. Wie das Koordinatensystem funktioniert, was Move, Line und Close bedeuten und wie aus einer Zeichenkette eine Form wird, Schritt für Schritt und mit Beispielen erklärt.

Wenn Du zum ersten Mal in den Quelltext einer SVG-Grafik schaust und dort eine Zeile wie d="M10 10 L90 10 L50 90 Z" findest, wirkt das erst einmal wie eine kryptische Zeichenkette. In Wahrheit steckt dahinter ein sehr einfaches und zugleich mächtiges System. Als Entwickler des Editors auf dieser Seite habe ich diese Buchstaben-Zahlen-Ketten unzählige Male auseinandergenommen, und ich verspreche Dir: Sobald Du das Grundprinzip verstanden hast, liest Du ein d-Attribut fast so flüssig wie einen Satz. In diesem Ratgeber gehe ich mit Dir Schritt für Schritt durch, wie ein SVG-Pfad aufgebaut ist, wie das Koordinatensystem tickt und wie aus ein paar Befehlen eine sichtbare Form entsteht.

Was ist ein SVG-Pfad überhaupt?

SVG steht für Scalable Vector Graphics, also skalierbare Vektorgrafiken. Anders als ein Foto, das aus einem festen Raster von Pixeln besteht, beschreibt eine Vektorgrafik Formen als mathematische Anweisungen. Genau diese Anweisungen kannst Du beliebig vergrößern, ohne dass etwas verpixelt.

Das <path>-Element ist dabei der vielseitigste Baustein von SVG. Während es für Rechtecke, Kreise oder Linien eigene Elemente gibt (<rect>, <circle>, <line>), kann ein einziges <path>-Element praktisch jede denkbare Form abbilden: gerade Kanten, geschwungene Kurven, geschlossene Umrisse, offene Linienzüge. Die gesamte Formbeschreibung steckt in einem einzigen Attribut, dem d-Attribut (das d steht für “data”, also Daten).

Ein minimales Beispiel sieht so aus:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 L90 10 L50 90 Z" fill="none" stroke="black" />
</svg>

Der Wert von d ist eine Folge aus Befehlen und Koordinaten. Jeder Befehl ist ein einzelner Buchstabe, gefolgt von den Zahlen, die er braucht. Zusammen ergeben sie einen Weg, den ein gedachter Stift auf der Zeichenfläche zurücklegt.

Das Koordinatensystem: oben links ist der Ursprung

Bevor wir uns die Befehle ansehen, musst Du verstehen, wo die Zahlen eigentlich hinzeigen. Das SVG-Koordinatensystem hat eine Eigenart, die viele am Anfang stolpern lässt: Der Ursprung (0, 0) liegt oben links, nicht unten links wie im Mathematikunterricht.

Konkret bedeutet das:

Die x-Achse verläuft nach rechts. Ein größerer x-Wert schiebt einen Punkt weiter nach rechts.
Die y-Achse verläuft nach unten. Ein größerer y-Wert schiebt einen Punkt weiter nach unten.

Der Punkt (10, 10) liegt also nahe der oberen linken Ecke, und (50, 90) liegt mittig und weit unten. Wenn Du aus der klassischen Mathematik kommst, ist vor allem die nach unten zeigende y-Achse gewöhnungsbedürftig. Merke es Dir am besten so: SVG folgt derselben Logik wie das Layout einer Webseite, die ja auch von oben nach unten aufgebaut wird.

Die viewBox spannt die Zeichenfläche auf

Die Koordinaten in einem Pfad sind keine Pixel im herkömmlichen Sinn, sondern Einheiten in einem selbst definierten Koordinatenraum. Dieser Raum wird über das Attribut viewBox festgelegt. Es besteht aus vier Zahlen: viewBox="min-x min-y breite hoehe".

Bei viewBox="0 0 100 100" sagst Du: Die sichtbare Fläche beginnt bei (0, 0) und ist 100 Einheiten breit sowie 100 Einheiten hoch. Ein Punkt bei (50, 50) liegt damit exakt in der Mitte. Egal, wie groß das SVG später auf dem Bildschirm dargestellt wird, ob 40 Pixel oder 800 Pixel, die inneren Koordinaten bleiben gleich. Das ist der Kern der Skalierbarkeit: Du arbeitest in einem abstrakten Raster, und der Browser rechnet es auf die tatsächliche Anzeigegröße um.

Der Aufbau des d-Attributs

Der Wert von d ist eine Sequenz. Sie beginnt fast immer mit einem Befehl, der festlegt, wo der Stift zuerst angesetzt wird, und arbeitet sich dann von dort weiter. Zwischen Befehlsbuchstaben und Zahlen sowie zwischen den Zahlen selbst darfst Du Leerzeichen oder Kommas setzen. M10,10 und M 10 10 sind gleichwertig.

Ein wichtiges Konzept dabei ist der aktuelle Punkt. Das ist die Position, an der sich der gedachte Stift gerade befindet. Jeder Befehl bezieht sich auf diesen aktuellen Punkt: Eine Linie geht vom aktuellen Punkt zu einem neuen Ziel, und danach wird das Ziel selbst zum neuen aktuellen Punkt. So hangelt sich der Pfad Segment für Segment durch die Zeichenfläche.

Ein weiteres Detail, das Dir viel Verwirrung erspart: Jeder Befehl gibt es in zwei Varianten. Ein Großbuchstabe steht für absolute Koordinaten (bezogen auf den viewBox-Ursprung), ein Kleinbuchstabe für relative Koordinaten (bezogen auf den aktuellen Punkt). In diesem Grundlagen-Artikel bleibe ich bei den absoluten Großbuchstaben, weil sie am leichtesten nachzuvollziehen sind. Eine vollständige Auflistung aller Varianten findest Du in der Übersicht der Path-Befehle.

Die drei Grundbefehle: M, L und Z

Mit nur drei Befehlen kannst Du bereits jede Form aus geraden Kanten zeichnen. Hier sind sie im Überblick:

Befehl	Name	Bedeutung
`M x y`	Move to	Setzt den Stift an die Position `(x, y)`, ohne eine Linie zu zeichnen
`L x y`	Line to	Zieht eine gerade Linie vom aktuellen Punkt nach `(x, y)`
`Z`	Close path	Schließt den Pfad mit einer Linie zurück zum Startpunkt

M, der Startbefehl

Der Befehl M (Move to) hebt den Stift an und setzt ihn an einer neuen Stelle wieder ab, ohne dabei zu zeichnen. Jeder Pfad muss mit einem M beginnen, denn ohne einen definierten Startpunkt weiß der Browser nicht, wo er anfangen soll. M10 10 bedeutet schlicht: Stift ansetzen bei (10, 10).

L, die gerade Linie

L (Line to) zieht eine gerade Linie vom aktuellen Punkt zu der angegebenen Koordinate. L90 10 sagt also: Ziehe eine Linie vom aktuellen Punkt bis zu (90, 10). Danach ist (90, 10) der neue aktuelle Punkt, und der nächste Befehl baut darauf auf.

Z, der Abschluss

Z (Close path) verbindet den aktuellen Punkt mit einer geraden Linie zurück zum Startpunkt des aktuellen Subpfads. Z braucht keine Koordinaten, weil das Ziel (der Startpunkt) ja bereits bekannt ist. Ein Z sorgt für einen sauber geschlossenen Umriss, was besonders wichtig ist, wenn Du die Form mit einer Füllfarbe versiehst.

Ein durchgerechnetes Beispiel: ein Dreieck

Nehmen wir den Pfad aus dem ersten Beispiel und rechnen ihn Schritt für Schritt durch. Der Wert lautet M10 10 L90 10 L50 90 Z in einer viewBox="0 0 100 100".

M10 10: Der Stift wird bei (10, 10) angesetzt, also nahe der oberen linken Ecke. Es wird noch nichts gezeichnet. Aktueller Punkt: (10, 10).
L90 10: Eine gerade Linie zieht nach (90, 10). Da beide Punkte denselben y-Wert haben, entsteht eine waagerechte Linie am oberen Rand. Aktueller Punkt: (90, 10).
L50 90: Eine Linie zieht schräg nach unten zur Mitte des unteren Bereichs, (50, 90). Aktueller Punkt: (50, 90).
Z: Der Pfad schließt sich mit einer Linie von (50, 90) zurück zum Startpunkt (10, 10).

Das Ergebnis ist ein Dreieck mit einer waagerechten Oberkante und einer Spitze, die nach unten zeigt. Drei Befehle für die Kanten, ein Z zum Schließen, fertig ist die geschlossene Form. Genau so entsteht aus einer nüchternen Zeichenkette eine sichtbare Grafik.

Subpfade: mehrere M in einem Pfad

Ein einzelnes <path>-Element kann aus mehreren voneinander getrennten Teilstücken bestehen, den sogenannten Subpfaden. Immer wenn innerhalb eines d-Attributs ein weiterer M-Befehl auftaucht, beginnt ein neuer Subpfad. Der Stift springt zur neuen Position, ohne eine Verbindungslinie zu ziehen.

Das ist praktisch, wenn eine Form aus mehreren Teilen besteht, etwa der Buchstabe “i” mit seinem Punkt, oder ein Ring mit einem ausgesparten Loch in der Mitte. Ein Beispiel mit zwei getrennten Quadraten:

<path d="M10 10 L40 10 L40 40 L10 40 Z M60 60 L90 60 L90 90 L60 90 Z" />

Hier zeichnet der erste Block ein Quadrat oben links, das zweite M startet einen neuen Subpfad, und der zweite Block zeichnet ein Quadrat unten rechts, beides innerhalb eines einzigen <path>-Elements. Ein Z schließt dabei immer nur den aktuellen Subpfad, nicht den gesamten Pfad.

Warum Pfade so mächtig sind

Der große Reiz des <path>-Elements liegt darin, dass die gesamte Geometrie in einem einzigen Attribut lebt. Du brauchst keine verschachtelten Elemente, keine Dutzenden von Koordinatenpunkten in separaten Tags. Eine komplette Form, egal wie komplex, ist am Ende eine kompakte Zeichenkette. Das macht Pfade sparsam im Dateiumfang, gut versionierbar und leicht per Skript zu erzeugen oder zu verändern.

Bislang haben wir nur gerade Linien betrachtet. Die eigentliche Kraft entfaltet SVG, sobald geschwungene Kurven ins Spiel kommen. Dafür gibt es weitere Befehle wie C und Q für Bézier-Kurven sowie A für Kreisbögen. Diese behandle ich in eigenen Ratgebern, unter anderem in der Einführung zu den Bézier-Kurven, weil sie ein eigenes Konzept mit Kontrollpunkten mitbringen, das eine ausführlichere Erklärung verdient.

Pfade im Editor laden und die Punkte ziehen

Die Theorie ist die eine Hälfte, das Ausprobieren die andere. Am schnellsten bekommst Du ein Gefühl für Pfade, wenn Du sie direkt siehst und veränderst. Genau dafür ist der Editor auf dieser Seite gedacht: Er läuft vollständig lokal in Deinem Browser, es wird nichts hochgeladen oder an einen Server geschickt.

So gehst Du vor:

Öffne den Editor und füge einen d-Wert in das Eingabefeld ein, zum Beispiel unser Dreieck M10 10 L90 10 L50 90 Z.
Der Editor zeichnet die Form auf die Zeichenfläche und zeigt die einzelnen Ankerpunkte als kleine Griffe an.
Ziehe einen dieser Punkte mit der Maus an eine neue Position. Der d-Wert im Textfeld aktualisiert sich dabei in Echtzeit, sodass Du direkt siehst, welche Zahl sich wie ändert.

Dieses Wechselspiel zwischen dem gezogenen Punkt und der sich verändernden Zeichenkette ist der beste Weg, das Koordinatensystem wirklich zu verinnerlichen. Du siehst sofort, dass ein größerer y-Wert den Punkt nach unten wandern lässt, und Du verstehst, wie jeder L-Befehl genau ein Segment steuert.

Mit M, L und Z hast Du das Fundament gelegt, auf dem alles Weitere aufbaut. Sobald diese drei Befehle sitzen und Du das Koordinatensystem im Kopf hast, sind die Kurvenbefehle nur noch ein logischer nächster Schritt. Nimm Dir also ruhig einen Moment, spiele mit ein paar geraden Formen im Editor herum, und lies danach in den weiterführenden Ratgebern zu den einzelnen Befehlen und Kurven weiter.

SVG-Pfade verstehen: das d-Attribut von Grund auf