Absolute vs. relative Pfadbefehle: wann Groß, wann klein?

Wenn Du zum ersten Mal in ein d-Attribut schaust, fällt Dir schnell auf, dass dieselben Buchstaben mal groß und mal klein auftauchen. M und m, L und l, C und c. Das ist kein Tippfehler und keine Stil-Frage. Groß- und Kleinschreibung entscheiden darüber, wie das Koordinatensystem eines Befehls funktioniert. Große Buchstaben sind absolut, kleine relativ. Dieser eine Unterschied prägt, wie leicht sich ein Pfad verschieben, lesen und wiederverwenden lässt.

In diesem Ratgeber gehe ich den Unterschied Schritt für Schritt durch, rechne ein Beispiel einmal in beiden Formen durch und gebe Dir am Ende Faustregeln an die Hand, mit denen Du in der Praxis schnell entscheidest. Eine Übersicht über alle Befehlsbuchstaben findest Du im Ratgeber SVG-Path-Befehle: die komplette Übersicht.

Absolut heißt: feste Koordinaten im viewBox-System

Ein absoluter Befehl bezieht sich immer auf den Nullpunkt des Koordinatensystems, das Deine viewBox aufspannt. Der Punkt L 40 60 bedeutet wortwörtlich: zeichne eine Linie zum Punkt 40 Einheiten von links, 60 Einheiten von oben. Egal, wo der Zeichenstift gerade steht, das Ziel ist fest. Du kannst jede absolute Koordinate isoliert lesen und weißt sofort, wo dieser Punkt landet.

Das ist der große Vorteil absoluter Befehle: Sie sind eindeutig nachvollziehbar. Wenn Du einen einzelnen Punkt gezielt setzen willst, sagst Du genau, wohin er soll, ohne im Kopf ausrechnen zu müssen, wo der vorherige Punkt lag.

Relativ heißt: Verschiebung gegenüber dem aktuellen Punkt

Ein relativer Befehl beschreibt keine Position, sondern eine Bewegung. l 40 60 bedeutet: gehe vom aktuellen Punkt aus 40 Einheiten nach rechts und 60 nach unten. Die Werte sind ein Delta, kein Ziel. Der Endpunkt hängt also immer davon ab, wo Du gerade stehst.

Der aktuelle Punkt ist dabei genau der Endpunkt des vorherigen Befehls. Jeder relative Befehl schiebt den Stift weiter, und der nächste Befehl setzt wieder von dort an. Diese Kette ist der Kern des Ganzen, und sie erklärt sowohl die Stärken als auch die eine typische Überraschung, auf die ich später noch komme.

Dieselbe Form, zweimal geschrieben

Am klarsten wird der Unterschied an einem konkreten Beispiel. Wir zeichnen ein einfaches Dreieck: Start oben, dann nach rechts unten, dann nach links unten, dann zurück.

Zuerst in absoluter Schreibweise:

<path d="M 50 10 L 90 80 L 10 80 Z" />

Die drei Eckpunkte stehen direkt da: (50, 10), (90, 80) und (10, 80). Das Z schließt den Pfad zurück zum Startpunkt.

Jetzt dieselbe Form relativ:

<path d="m 50 10 l 40 70 l -80 0 Z" />

Rechnen wir das durch. Das m 50 10 setzt den Startpunkt auf (50, 10), dazu gleich mehr im nächsten Abschnitt. Ab hier zählen Deltas:

Befehl	Bewegung	Neuer Punkt
m 50 10	Start setzen	(50, 10)
l 40 70	+40 rechts, +70 runter	(90, 80)
l -80 0	-80 links, 0 runter	(10, 80)
Z	schließen	zurück zu (50, 10)

Beide Pfade zeichnen exakt dasselbe Dreieck. Der absolute Pfad nennt die Zielpunkte, der relative die Wege dorthin. Du siehst schon hier: Der relative Pfad enthält kleinere Zahlen und ein negatives Delta, das die Rückbewegung nach links ausdrückt.

Beachte auch, dass der Trick mit den Deltas nicht nur für gerade Linien gilt. Genauso funktioniert er bei Kurven. Ein relatives c erwartet seine Kontrollpunkte und den Endpunkt ebenfalls als Verschiebung gegenüber dem aktuellen Punkt, ein absolutes C als feste Koordinaten. Die Groß-Klein-Logik ist über alle Befehlstypen hinweg dieselbe, egal ob Linie, Kurve, Bogen oder das schließende Z, das als einziger Befehl keine Groß-Klein-Variante braucht, weil es ohnehin immer zum Startpunkt zurückführt.

Der Sonderfall: das erste m

Es gibt eine Ausnahme, die viele am Anfang stolpern lässt. Ein moveto am Anfang eines Pfades verhält sich immer absolut, auch wenn Du es klein schreibst. Ein m 50 10 als allererster Befehl setzt den Startpunkt genauso auf (50, 10) wie ein M 50 10. Es gibt schlicht keinen vorherigen Punkt, gegen den relativ gerechnet werden könnte.

Wichtig ist die Fortsetzung: Folgen auf ein m mehrere Koordinatenpaare, gelten alle weiteren als relatives lineto. Der Befehl m 50 10 40 70 heißt also: Start bei (50, 10), dann relative Linie um (+40, +70) zu (90, 80). Genau deshalb ist das erste Paar die einzige Stelle, an der ein kleines m sich groß verhält, und ab dem zweiten Paar greift wieder die relative Logik.

Warum relative Pfade sich leichter verschieben lassen

Der praktische Reiz relativer Pfade zeigt sich, sobald Du eine ganze Form an eine andere Stelle setzen willst. Bei einem relativen Pfad steht die absolute Position nur an einer einzigen Stelle: im ersten moveto. Alles danach sind Deltas, die sich nicht ändern, wenn die Form woanders sitzt.

Willst Du das Dreieck von oben um 100 Einheiten nach rechts schieben, änderst Du nur den Startpunkt:

<!-- relativ: nur der Startpunkt ändert sich -->
<path d="m 150 10 l 40 70 l -80 0 Z" />

Beim absoluten Pfad müsstest Du jede einzelne Koordinate anfassen:

<!-- absolut: jeder Punkt muss neu gerechnet werden -->
<path d="M 150 10 L 190 80 L 110 80 Z" />

Genau aus diesem Grund arbeiten viele generierte Pfade und Icon-Systeme mit relativen Befehlen. Ein Icon-Set will Formen frei platzieren und wiederverwenden, und ein Pfad, der seine Position an einer Stelle bündelt, lässt sich sauber verschieben und in Komponenten einbetten. Dazu kommt, dass relative Deltas in nahe beieinanderliegenden Punkten oft kleinere Zahlen ergeben, was den Pfad kompakter macht. Bei vielen Punkten summiert sich das zu spürbar weniger Zeichen. Wie Du solche Pfade zusätzlich verschlankst, steht im Ratgeber SVG-Pfade optimieren.

Wann absolute Koordinaten die klarere Wahl sind

Relative Pfade sind nicht pauschal besser. Sobald Du einen Pfad von Hand bearbeitest, drehen sich die Vorteile oft um. Bei absoluten Koordinaten liest Du jeden Punkt für sich und weißt sofort, wo er liegt. Bei relativen Pfaden musst Du die ganze Kette bis zu diesem Punkt im Kopf mitrechnen, um zu wissen, wo Du gerade bist.

Absolute Befehle sind daher die klarere Wahl, wenn

• Du einen Pfad manuell bearbeitest und Punkte einzeln nachvollziehen willst
• Du einen einzelnen Punkt gezielt an eine bekannte Position setzen möchtest
• Nachvollziehbarkeit wichtiger ist als Kompaktheit, etwa in Code, den mehrere Leute lesen
• Du beim Debuggen prüfen willst, ob ein Punkt wirklich dort landet, wo Du ihn erwartest

Kurz: Relativ punktet beim Verschieben und Generieren, absolut punktet beim Lesen und gezielten Setzen.

Ein Klick zwischen beiden Formen, ohne die Zeichnung zu ändern

Die gute Nachricht: Du musst Dich nicht festlegen. Absolut und relativ sind zwei Schreibweisen für dieselbe Geometrie. Aus jedem absoluten Punkt lässt sich das passende Delta berechnen und umgekehrt. Der SVG-Path-Editor nimmt Dir diese Rechnerei ab und rechnet den kompletten Pfad auf Knopfdruck von absolut nach relativ oder zurück um.

Dabei ändert sich nur der Text im d-Attribut, nicht die Form. Jeder Punkt landet exakt dort, wo er vorher war, weil die Umrechnung rein die Notation betrifft. So kannst Du eine Form absolut aufbauen, weil sich das leichter Punkt für Punkt setzen lässt, und sie am Ende in die relative Form umschalten, wenn Du sie in ein Icon-System übernehmen willst. Oder Du bekommst einen relativen Pfad geliefert und wandelst ihn in absolut um, um ihn in Ruhe zu bearbeiten.

Ehrlicher Hinweis: relative Segmente hängen zusammen

Es gibt eine Eigenheit, die Du kennen solltest, bevor sie Dich überrascht. Weil in einem relativen Pfad jeder Punkt auf dem vorherigen aufbaut, wirkt sich eine Änderung an einem Punkt auf alle folgenden aus.

Stell Dir vor, Du ziehst in einem relativen Pfad den Endpunkt eines Segments an eine neue Stelle. Dieser Endpunkt ist gleichzeitig der Ausgangspunkt des nächsten Segments. Verschiebst Du ihn, verschiebt sich die ganze Kette dahinter mit, weil alle nachfolgenden Deltas ja von diesem neuen Ausgangspunkt aus gerechnet werden. Das sieht auf den ersten Blick nach einem Fehler aus, ist aber genau das korrekte Verhalten relativer Koordinaten. Die Deltas bleiben unverändert, nur ihr Startpunkt ist ein anderer.

Wenn Du das nicht willst, also einen einzelnen Punkt bewegen möchtest, ohne den Rest der Form mitzuziehen, wandelst Du den Pfad vorher in absolut um. Dann ist jeder Punkt eine feste Koordinate, und das Ziehen eines Punktes lässt alle anderen unberührt. Das ist der häufigste Grund, mitten in der Bearbeitung von relativ auf absolut umzuschalten.

Faustregeln für den Alltag

Zum Mitnehmen, die kurzen Regeln:

• Großbuchstaben (M L C ...) sind absolut, Kleinbuchstaben (m l c ...) relativ. Merkhilfe: groß gleich global, klein gleich lokal.
• Das erste moveto ist immer absolut, egal ob groß oder klein geschrieben.
• Willst Du eine ganze Form verschieben, nimm einen relativen Pfad und ändere nur das erste moveto.
• Willst Du einzelne Punkte gezielt setzen oder von Hand bearbeiten, arbeite absolut.
• Generierte Pfade und Icon-Systeme sind relativ oft kompakter und leichter wiederverwendbar.
• Zum Lesen und Debuggen ist absolut fast immer angenehmer.
• Wenn beim Ziehen eines Punktes die restliche Form mitwandert, ist der Pfad relativ. In absolut umwandeln, dann bleibt der Rest stehen.
• Die Umwandlung ändert nie die Zeichnung, nur die Schreibweise. Nutze sie ohne Sorge.

Wenn Du diese Regeln im Hinterkopf hast, verlieren die großen und kleinen Buchstaben im d-Attribut ihren Schrecken. Sie sind kein Zufall, sondern ein Werkzeug, mit dem Du steuerst, ob ein Pfad leicht zu verschieben oder leicht zu lesen ist. Und weil sich beide Formen jederzeit ineinander umrechnen lassen, musst Du Dich nie endgültig entscheiden.