Helpful resources ▼
  Download   Pricing   Buy

SVG Path Data – Linien, Bögen und Bézier-Kurven

Das <path>-Element zeichnet den Umriss einer beliebigen Form, indem es Linien, Bögen und Bézier-Kurven kombiniert. Es ist das flexibelste SVG-Element für einfache und komplexe offene oder geschlossene paths. Ein path wird durch ein einzelnes d-Attribut definiert, das eine Reihe von Befehlen enthält.

In diesem Artikel lernen Sie:

  • Die häufigsten SVG-path-Befehle im d-Attribut zu lesen.
  • Gerade Linien, horizontale Linien, vertikale Linien und geschlossene Formen zu zeichnen.
  • Den A-Befehl zum Zeichnen von SVG-Bögen zu verwenden.
  • Quadratische und kubische Bézier-Kurven mit Kontrollpunkten aufzubauen.
  • Smooth commands wie T und S zu wählen, wenn Kurvensegmente sauber verbunden werden sollen.

SVG-Path-Befehlsgruppen

Command GroupBefehleBeschreibung
MovetoM, mSetzt den Startpunkt eines neuen sub-path.
LinetoL, l, H, h, V, vZeichnet gerade Linien horizontal, vertikal oder zu einer beliebigen Koordinate.
ClosepathZ, zSchließt den aktuellen sub-path durch eine Linie zurück zum Startpunkt.
Cubic BézierC, c, S, sZeichnet kubische Bézier-Kurven mit zwei Kontrollpunkten.
Quadratic BézierQ, q, T, tZeichnet quadratische Bézier-Kurven mit einem Kontrollpunkt.
Elliptical ArcA, aZeichnet elliptische Bögen mit Radien, Rotation und flag-Parametern.

Großbuchstaben verwenden absolute Koordinaten, Kleinbuchstaben verwenden relative Koordinaten. Alle Koordinaten sind einheitenlos und werden im aktuellen SVG user coordinate system interpretiert. Eine hilfreiche Art, path data zu lesen, ist der Gedanke an einen aktuellen Punkt, der sich durch den path bewegt: M setzt den Zeichenbeginn, jeder Zeichenbefehl lässt den aktuellen Punkt an einem neuen Endpunkt zurück, und der nächste Befehl beginnt dort.

So schreiben Sie SVG Path Data

  1. Erstellen Sie ein <path>-Element und schreiben Sie seine Geometrie in das d-Attribut.
  2. Beginnen Sie mit M x y, um den aktuellen Punkt an den Anfang des path zu setzen.
  3. Fügen Sie Linien-, Bogen- oder Kurvenbefehle wie L, H, V, A, Q oder C hinzu.
  4. Wählen Sie Großbuchstaben für absolute Koordinaten oder Kleinbuchstaben für Koordinaten relativ zum aktuellen Punkt.
  5. Schließen Sie die Kontur mit Z, wenn der path zu einer gefüllten Form werden soll.
  6. Fügen Sie fill, stroke und stroke-width hinzu, damit der path sichtbar wird.

Linien und Paths

Moveto (M, m)

Jeder SVG-path beginnt mit dem moveto-Befehl, geschrieben als M x y. Die Koordinaten x und y geben den aktuellen Punkt an, an dem der path beginnen soll.

Lineto (L, l, H, h, V, v)

Drei lineto-Befehle zeichnen gerade Linien vom aktuellen Punkt zum neuen Punkt:

BefehlParameterBeschreibung
L / lx yZeichnet eine Linie zum angegebenen Punkt.
H / hxZeichnet eine horizontale Linie; y bleibt unverändert.
V / vyZeichnet eine vertikale Linie; x bleibt unverändert.

Nach jedem path-Befehl bewegt sich der aktuelle Punkt zum Endpunkt dieses Befehls. Der nächste Zeichenbefehl startet an dieser neuen Position.

Closepath (Z, z)

Der Z-closepath-Befehl schließt den aktuellen sub-path, indem er eine gerade Linie zurück zum Startpunkt zeichnet. Es werden keine Parameter benötigt.

Beispiel: Quadrate mit Lineto-Befehlen zeichnen

Zeichnen wir ein Quadrat mit lineto-Befehlen ( lineto.svg):

1<svg height="400" width="400" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2    <path d="M 30 30 L 110 30 L 110 110 L 30 110 L 30 30" fill="transparent" stroke-width="2" stroke="black" />
3    <path d="M 50 50 H 130 V 130 H 50 Z" fill="transparent" stroke-width="2" stroke="blue" />
4    <path d="M 70 70 h 80 v 80 h -80 Z" fill="transparent" stroke-width="2" stroke="red" />
5</svg>

SVG-Quadrat mit L-Befehl in Schwarz, H- und V-Befehlen in Blau und relativen h- und v-Befehlen in Rot

In der Illustration kommentiert die linke Seite die path-Befehle, und die rechte Seite zeigt die gerenderte SVG-Ausgabe. So lassen sich drei Arten vergleichen, dasselbe Quadrat zu zeichnen: ausdrückliche L-Befehle, kompakte H- und V-Befehle sowie relative lowercase commands.

SVG-Bögen zeichnen

Bögen zeichnen Abschnitte von Kreisen oder Ellipsen. Der A-Befehl benötigt sechs Parameter, die bestimmen, welcher der vier möglichen Bögen zwischen zwei Punkten gerendert wird.

Hinweis: Derselbe Startpunkt und Endpunkt kann durch vier unterschiedliche Bögen verbunden werden. large-arc-flag wählt den kleinen oder großen Bogen, und sweep-flag wählt die Zeichenrichtung.

Syntax: A rx ry x-axis-rotation large-arc-flag sweep-flag x y

ParameterBedeutung
rx, ryRadien der Ellipse.
x-axis-rotationRotation der x-Achse der Ellipse in Grad.
large-arc-flag0 = kleiner Bogen, 1 = großer Bogen.
sweep-flag0 = gegen den Uhrzeigersinn, 1 = im Uhrzeigersinn.
x yAbsolute Koordinaten des Bogenendpunkts.

Das lowercase a funktioniert genauso, behandelt den Endpunkt aber relativ zum aktuellen Punkt.

1<svg height="500" width="700" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
2    <path d="M10,20 A 30,30 0 0,0 40,70" style="stroke:#FFA500; stroke-width:1; fill:none" />
3    <path d="M10,20 A 30,30 0 1 0 40,70" style="stroke: #FF0000; stroke-width:1; fill:none" />
4    <path d="M10,20 A 30,30 0 0 0 40,70 A 30,30 0 1 1 10,20" style="stroke: #FFA500; stroke-width:1; fill:#FFD700" transform="translate(70,0)" />
5</svg>

SVG-Arc-Befehle mit kleinem Bogen, großem Bogen und geschlossener Bogenform

Die Illustration vergleicht einen kleinen Bogen, einen großen Bogen und eine geschlossene, auf Bögen basierende Form. Die Geometrie beginnt mit derselben Idee, aber die Änderung der arc flags bestimmt, welche Kurve SVG zwischen Start- und Endpunkt auswählt.

Betrachten Sie diesen path aus dem Codebeispiel: d="M10,20 A 30,30 0 0,0 40,70".

Bézier-Kurven zeichnen

Bézier-Kurven werden verwendet, um glatte Konturen in Icons, Logos, Illustrationen und Diagrammen zu zeichnen. SVG-paths unterstützen zwei Typen von Bézier-Kurven: quadratische Kurven mit einem Kontrollpunkt und kubische Kurven mit zwei Kontrollpunkten. Der Startpunkt kommt von der aktuellen path-Position, der Endpunkt beendet das Segment, und die Kontrollpunkte ziehen die Kurve in Form.

Quadratische Bézier-Kurven

Eine quadratische Bézier-Kurve beginnt am aktuellen Punkt. Der Q-Befehl verwendet dann einen Kontrollpunkt (x1 y1) und einen Endpunkt (x y). Der lowercase-Befehl q hat dieselbe Bedeutung, aber seine Koordinaten sind relativ zum aktuellen Punkt.

Quadratische Bézier-Befehle (Q, q, T, t)

Quadratische Bézier-Kurven verwenden einen einzelnen Kontrollpunkt.

Betrachten wir ein Beispiel:

1<svg width="600" height="600" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2    <path d="M 10 100 Q 25 10 180 100" stroke="black" stroke-width="1" fill="transparent" />
3</svg>

Quadratische Bézier-Kurve, gezeichnet mit dem Q-Befehl

Die Kurve beginnt bei (10, 100), biegt sich zum Kontrollpunkt (25, 10) und endet bei (180, 100). Wenn Sie den Kontrollpunkt verschieben, ändert sich die Kurve, ohne dass Start- oder Endpunkt verändert werden.

Kontrollpunkt variieren

Wenn Sie den Kontrollpunkt mit Segmenten mit Start- und Endpunkt der Kurve verbinden, ist die Linie durch die Mittelpunkte dieser Segmente tangential zum Kurvenscheitel.

Das nächste Beispiel behält Start- und Endpunkt bei, verändert aber die y1-Koordinate des Kontrollpunkts ( bezier-curve2.svg). So wird sichtbar, wie das Verschieben des Kontrollpunkts nach oben oder unten die Krümmung verändert:

1<svg width="600" height="600" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2    <g stroke-width="1" fill="none">
3        <path d="M 10 100 Q 25 10 180 100" stroke="black" />
4        <path d="M 10 100 Q 25 -60 180 100" stroke="blue" />
5        <path d="M 10 100 Q 25 100 180 100" stroke="red" />
6        <path d="M 10 100 Q 25 190 180 100" stroke="green" />
7    </g>
8</svg>

Vier quadratische Bézier-Kurven mit unterschiedlichen y-Koordinaten des Kontrollpunkts

Alle vier paths verwenden denselben Start- und Endpunkt. Nur die vertikale Position des Kontrollpunkts ändert sich, sodass sich die Kurve oberhalb, in Richtung oder unterhalb der Grundlinie biegt.

Nehmen wir nun die schwarze Kurve als Grundlage und ändern die x1-Koordinate des Kontrollpunkts ( bezier-curve3.svg):

1<svg width="600" height="600" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2    <g stroke-width="1" fill="none">
3        <path d="M 10 100 Q 25 10 180 100" stroke="black" />
4        <path d="M 10 100 Q -40 10 180 100" stroke="red" />
5        <path d="M 10 100 Q 165 10 180 100" stroke="green" />
6        <path d="M 10 100 Q 245 10 180 100" stroke="blue" />
7    </g>
8</svg>

Vier quadratische Bézier-Kurven mit unterschiedlichen x1-Werten des Kontrollpunkts

Hier bewegt sich der Kontrollpunkt nach links oder rechts. Dadurch ändert sich, wo die Kurve zu biegen beginnt, während der Endpunkt gleich bleibt.

Glatte Ketten mit T

1<svg width="700" height="600" xmlns="http://www.w3.org/2000/svg">
2   <path d="M 10 100 Q 25 10 180 100 T 250 100 T 320 100 T 390 100" stroke="orange" stroke-width="3" fill="none" />
3   <path d="M 10 200 Q 25 110 180 200 T 300 250 T 420 250 T 490 150" stroke="grey" stroke-width="3" fill="none" />
4</svg>

Mehrere Q-Befehle können nacheinander geschrieben werden, aber die Übergänge können ungleichmäßig aussehen, wenn jedes Segment einen unabhängigen Kontrollpunkt nutzt. Verwenden Sie den T-Befehl, wenn SVG eine quadratische Bézier-Kurve glatt fortsetzen soll.

Der T-Befehl zeichnet vom aktuellen Punkt zu einem neuen Endpunkt (x y). Er nimmt keinen ausdrücklichen Kontrollpunkt. Stattdessen spiegelt SVG den vorherigen quadratischen Kontrollpunkt, aber nur dann, wenn der vorherige Befehl Q oder T war. Nach Abschluss von T wird sein Endpunkt zum neuen aktuellen Punkt. Das folgende Beispiel verwendet den T-Befehl, um eine glatte quadratische Kurve fortzusetzen. Die x-Koordinaten bewegen sich in gleichen Abständen, während die y-Koordinate unverändert bleibt.

1<svg width="700" height="600" xmlns="http://www.w3.org/2000/svg">
2    <path d="M 10 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100" stroke="black" stroke-width="3" fill="none" />
3</svg>

Quadratische Bézier-Kurve, erstellt mit dem T-Befehl

Durch Ändern der Endpunktkoordinaten des T-Befehls entstehen unterschiedliche glatte Kurvenketten ( bezier-curve5.svg).

1<svg height="700" width="750" xmlns="http://www.w3.org/2000/svg">
2    <path d="M 10 100 Q 25 10 180 100 T 250 100 T 320 100 T 390 100" stroke="#FFA500" stroke-width="3" fill="none" />
3    <path d="M 10 200 Q 25 110 180 200 T 300 250 T 420 250 T 490 150" stroke="grey" stroke-width="3" fill="none" />
4</svg>

Zwei quadratische Bézier-Kurven, erstellt mit dem T-Befehl

Kubische Bézier-Kurve (C, c, S, s)

Kubische Bézier-Kurven benötigen zwei Kontrollpunkte. Der C-Befehl nimmt drei Koordinatenpaare: den ersten Kontrollpunkt (x1 y1), den zweiten Kontrollpunkt (x2 y2) und den Endpunkt (x y).

Die Kontrollpunkte bestimmen die Richtung der Kurve nahe ihrem Anfang und Ende. Sie können mehrere C-Befehle in einem <path>-Element schreiben. SVG zeichnet sie nacheinander, und der Endpunkt einer kubischen Kurve wird zum Startpunkt der nächsten.

Das folgende Beispiel zeichnet eine Form mit zwei getrennten kubischen Bézier-paths ( cubic-bezier-curves.svg):

1<svg height="700" width="750" xmlns="http://www.w3.org/2000/svg">
2    <!--shape two paths-->
3    <path d="M 100 250 C 150 60 355 140 328 260 " stroke="black" stroke-width="3" fill="none" />
4    <path d="M 100 250 C 40 500 240 510 328 260" stroke="red" stroke-width="3" fill="none" />
5</svg>

Die Illustration zeigt die zwei getrennten kubischen Bézier-paths in Schwarz und Rot, sodass die Verbindung zwischen den Kurvensegmenten leicht zu prüfen ist.

Kubische Bézier-Kurven, mit C-Befehlen in Schwarz und Rot gezeichnet

Das nächste Beispiel zeichnet dieselbe Kontur als einen durchgehenden path:

1<svg height="700" width="750" xmlns="http://www.w3.org/2000/svg">
2   <!--shape 1 path-->
3   <path d="M 100 250 C 150 60 355 140 328 260 C 240 510 40 500 100 250" stroke="black" stroke-width="3" fill="none" />
4</svg>

Im Beispiel oben sind zwei C-Befehle in einem path verbunden. Das ist kompakt, aber der Verbindungspunkt kann weniger glatt aussehen, wenn die Kontrollpunkte nicht dieselbe Richtung beibehalten.

Glatte kubische Ketten mit S

Für lange glatte Kurven verwenden Sie den Kurzbefehl S x2 y2 x y. Wie T bei quadratischen Kurven setzt S eine kubische Bézier-Kette fort, ohne dass der erste Kontrollpunkt ausdrücklich geschrieben werden muss. Für den S-Befehl spiegelt SVG den vorherigen kubischen Kontrollpunkt, damit die Steigung kontinuierlich bleibt. Sie geben nur den zweiten Kontrollpunkt (x2 y2) und den Endpunkt (x y) an.

Kreatives Beispiel: „Eule“ im primitiven Stil

Bézier-Kurven können auch zu ausdrucksstarken Zeichnungen kombiniert werden. Das folgende Beispiel nutzt einfache path-Segmente und Kreise, um eine Eulenillustration im primitiven Stil zu erstellen ( owl.svg):

 1<svg height="700" width="750" xmlns="http://www.w3.org/2000/svg">
 2    <g stroke="black" stroke-width="3" fill="none">
 3        <!--body 1 path-->
 4        <path d="M 100 250 C 150 60 355 140 328 260 C 240 510 40 500 100 250" />
 5        <!--wing-->
 6        <path d="M 110 260 C 220 200, 250 280, 120 410" />
 7        <!--1 eyebrow-->
 8        <path d="M 110 240 C 130 220, 220 130, 231 230" />
 9        <!--2 eyebrow-->
10        <path d="M 231 231 C 230 220, 280 130, 329 258" />
11        <!--line-->
12        <path d="M 30 380 l 63 0" />
13        <path d="M 266 380 c 33 8 63 -8 90 5" />
14        <!--eyes-->
15        <circle cx="204" cy="209" r="3" />
16        <circle cx="205" cy="210" r="9" />
17        <circle cx="265" cy="209" r="3" />
18        <circle cx="265" cy="210" r="8" />
19    </g>
20</svg>

Vergleich einer Eulenillustration im primitiven SVG-Stil mit einer Referenzzeichnung einer Eule

Häufige Fehler und Korrekturen

ProblemUrsacheKorrektur
Der path wird nicht gerendertDie path data beginnen nicht mit einem M-BefehlBeginnen Sie das d-Attribut immer mit M x y, um den Startpunkt zu definieren
Die Form ist nicht geschlossenDer Z-Befehl fehltFügen Sie Z am Ende des path hinzu, um den sub-path zu schließen
Der Bogen wird in unerwarteter Richtung gezeichnetFalsche Werte für large-arc-flag oder sweep-flagÄndern Sie jeweils ein flag (0 oder 1) und prüfen Sie das Ergebnis visuell
Der T-Befehl erzeugt keine glatte KurveDer vorherige Befehl war nicht Q oder TVerwenden Sie T nur nach Q oder einem anderen T-Befehl
Scharfe Ecken erscheinen zwischen kubischen Bézier-SegmentenAufeinanderfolgende C-Befehle werden verwendetVerwenden Sie den S-Befehl, um glatte kubische Bézier-Ketten zu erstellen
Der path verschiebt sich unerwartetAbsolute und relative Befehle werden unbeabsichtigt gemischtPrüfen Sie die Groß-/Kleinschreibung: Großbuchstaben für absolut, Kleinbuchstaben für relativ
Die Form ist nicht gefülltDer path ist offen oder fill="none" ist gesetztSchließen Sie den path mit Z und prüfen Sie das fill-Attribut

Schnelle Rezepte

AufgabeSVG Path Example
Rechteck zeichnen<path d="M10 10 H110 V110 H10 Z" fill="none" stroke="black" />
Offenen path schließenZ an das Ende des d-Attributs anhängen
Einfachen Bogen zeichnen<path d="M10 50 A30 30 0 0 1 90 50" fill="none" stroke="orange" />
Vollkreis mit Bögen zeichnen<path d="M50 10 A40 40 0 1 1 49.9 10 Z" />
Quadratische Bézier-Kurve zeichnen<path d="M10 80 Q95 10 180 80" fill="none" stroke="black" />
Glatte quadratische Kette erstellen<path d="M10 80 Q60 10 110 80 T210 80" />
Kubische Bézier-Kurve zeichnen<path d="M10 80 C40 10 140 10 170 80" />
Glatte kubische Kette erstellen<path d="M10 80 C40 10 140 10 170 80 S300 150 330 80" />

FAQ – SVG Path Data

Was sind SVG Path Data?

SVG path data ist die Befehlszeichenfolge im d-Attribut eines <path>-Elements. Sie sagt SVG, wohin es sich bewegen soll, wo Linien gezeichnet werden, wie Bögen entstehen und wie Bézier-Kurven erstellt werden.

Was ist der Unterschied zwischen Groß- und Kleinbuchstaben bei path-Befehlen?

Großbuchstaben verwenden absolute Koordinaten im aktuellen user coordinate system. Kleinbuchstaben verwenden Koordinaten relativ zum aktuellen Punkt. Das ist nützlich für wiederholte Segmente und kompakte path data.

Wie schließe ich einen SVG-path?

Verwenden Sie den Befehl Z oder z am Ende des sub-path. Er zeichnet eine gerade Linie vom aktuellen Punkt zurück zum Start des sub-path und hilft gefüllten Formen, als geschlossene Konturen zu rendern.

Wann sollte ich einen path statt einfacher SVG-Formen verwenden?

Verwenden Sie <path>, wenn Rechteck, Kreis, Ellipse, Linie, polyline oder polygon nicht flexibel genug sind. Paths eignen sich besser für eigene Konturen, Icons, Logos, Bögen und glatte Kurven.

Spezifikation und verwandte Ressourcen

SVG-Formen SVG-Text