SVG path: Linien, Kurven, Bögen

Linien von Punkt zu Punkt, Bezierkurve, offene Pfade und geschlossene Pfade

Das path-Element erzeugt Linien, ist aber flexibler und komplexer als einfache Linien mit line, polyline oder polygon.

path zeichnet nicht nur gerade Linien, sondern auch Kurven – wie die Zeichenfeder in Photoshop oder Illustrator.

path – Flexible Form aus Linien

SVG path zeichnet ebenfalls Linien zwischen zwei und mehr Punkten und kann den Pfad automatisch zwischen dem ersten und letzten Punkt schließen. Die Punkte werden im Attribut d durch ihre Positionen x/y angegeben.

path

100,10200,60100,120
<path
     +-- Move to Point
     |
     |        +-- Line to
     |        |
     |        |                  +-- close path
     |        |                  |
  d="M 100,10 L 200,60 L 100,130 Z" fill="green"
  stroke="gray" />

Das d-Attribut bestimmt den Verlauf des Pfads und variiert je nach Art des Pfads:

  • Mit einem großen L sind x y absolute Werte wie bei polyline und polygon, also von Punkt x1y1 nach Punkt x2 y2, mit einem kleinen l relativ zum aktuellen Punkt.
  • Ein Z am Ende der Koordinatenliste schließt den Pfad zu einer Form.

Optionen des d-Attributs

M, m move to pointgehe zum nächsten Punkt x / y, egal ob großes oder kleines L
Z, z close path Pfad schließen
L, l line to gerade Linie mit großem L gehe x / y Einheiten, mit kleinem L gehe zu absolutem Punkt x y
C, c und S, s Cubic Bézierkurve
Q, q und T, t Quadratic Bézier curve
S,s smooth cubic curve to
A, a Elliptical ArcKreisbogen oder elliptischer Bogen

Großbuchstaben bestimmen eine absolute Angabe wie im Beispiel oben: 100,10 L 200,60 gehe von Punkt 100,10 zum Punkt 200,60,
Kleinbuchstaben führen zu relativen Positionsangaben im Bezug zum vorangehenden Punkt: 100,10 l 100,50 gehe von Punkt 100,10 um 100 Einheiten in x-Richtung und um 50 Einheiten in y-Richtung.

path mit Unterbrechungen geht auch.

<path d="m0 20h50m50 0h50m50 0h50m50 0h50m50 0h50m50 0h50" stroke="#000" stroke-width="1px" fill="none"/>

Gestrichtelte Linien sind allerdings einfacher durch die SVG-Attribute stroke-dasharray und stroke-dashoffset zu realisieren.

stroke-dasharray:18,3;
stroke-dashoffset:0

Bézierkurven

Die Punkte eines Pfades können auch durch Kurven miteinander verbunden werden. Zu jedem Punkt des Pfades kann ein Kontrollpunkt angegeben werden, der die Krümmung der Kurve bis zum nächsten Punkt bestimmt.

In der Vektorgrafik mit grafischer Benutzeroberfläche – Illustrator, Photoshop – zeichnen wir meist mit der kubischen Bézierkurve. In »Handarbeit« sind aufwändige Formen fast immer zu komplex – bei komplizierten Formen ist ein grafischer Editor unersetzlich.

Gute Einführung in die Berechnung von Bézierkurven für diejenigen, die Bézierkurven programmieren wollen: Bézier curves – a primer von Mike "Pomax" Kamermans

Bézierkurven

70,25020,110250,60120,16035,200220,260220,40MC
Quadratische Bézierkurve
<path d="M70 250  Q20 110 ,250 60"           stroke="black" />

Kubische Bézierkurve
<path d="M120 160 C35 200 , 220 260 ,220 40" stroke="black" />

Kurvenpunkte mit Großbuchstaben werden als absolute Werte interpretiert, bei Kleinbuchstaben wird der Punkt relativ zum vorangegangenen Punkt gerendert.

      Startpunkt         Endpunkt
          |                 |
    +---------+      +-------------+
    |         |      |             |

 Mx  y   Cx   y,     x   y,     x   y 
  |  |   |    |      |   |      |   |
  +--+   +----+      +---+      +---+
    |       |            |        |
    |       |            |        +-- Endpunkt der Kurve
    |       |            +--Control
    |       +-- Control     des Endpunkts
    |           des Startpunkts
    |
    +-- Startpunkt der Kurve

Kurvensegmente aneinanderfügen

<path d="
	M 50 150 C70  250 , 130 250 ,150 150 
	M150 150 C170 50 ,  230 50 , 250 150 
	M250 150 C270 250 , 330 250 ,350 150
	M350 150 C370 50 ,  430 50 , 450 150
	M450 150 C470 250 , 530 250 ,550 150" 
	fill="hsla(0,0%,75%,0.5)" stroke="black" stroke-width="2" />

Jetzt wird Segment an Segment gehangen: Der Endpunkt eines Segments ist der Startpunkt M des nächsten Segments.

Der Pfad in diesem Beispiel ist gefüllt. Bezierkurven brauchen genauso wie Polylines fill="none", damit die Kurve nicht gefüllt wird.

SVG Formen SVG aus Photoshop CC exportieren In Photoshop Datei / exportieren als aufrufen und dann SVG einstellen Exportieren als Unbenannt-1 SVG 1142 x 555 Dateieinstellungen Bildgröße Arbeitsfläche Format: Schriftarten werden u.U. nicht wie erwartet gerendert SVG PNG JPG GIF SVG Breite: Höhe: Skalieren: Px Px 555 100% Zurücksetzen Weitere Informationen zum Thema Exportoptionen 33.33% Abbrechen Exportieren +