SVG path: Linien, Kurven, Bögen

SVG Linien von Punkt zu Punkt, Bezierkurve

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.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

stroke-dasharray und stroke-dashoffset: Linien gestrichelt

path mit Unterbrechungen geht auch.

<path d="m0 20h50m50 0h50m50 0h50m50 0h50m50 0h50m50 0h50" stroke="red" stroke-width="20" fill="none"/>

Das erzeugt einen Pfad aus sechs Teilstücken mit Unterbrechungen. Gestrichtelte Linien sind allerdings einfacher durch die SVG-Attribute stroke-dasharray und stroke-dashoffset zu realisieren.

<path d="m0 10h600" stroke="red" stroke-dasharray="50,5" stroke-width="20" stroke-dashoffset="25" />

Der erste Wert von stroke-dasharray="50,5" bestimmt die Länge des durchgehenden Teilstücks (50), der zweite (5) die Breite der Lücken.

stroke-dashoffset liegt zwischen 0 und dem ersten Wert von stroke-dasharray und legt den Anfang der ersten Teillinie fest.

Gepunktete Linien

Mit stroke-linecap und stroke-dasharray haben wir die Zutaten für eine gepunktete Linie beisammen.

<line x1="10" x2="590" y1="15" y2="15" 
      stroke="hsl(12,70%,50%)" 
      stroke-width="10" 
      stroke-linecap="round" 
      stroke-dasharray="1,20" />

stroke-linecap, stroke-linejoin – Ecken und Enden von SVG-Pfaden

Die Darstellung der beiden Enden eines offenen Pfads und die Verbindung von Teilpfaden wird durch die Attribute stroke-linecap und stoke-linejoin festgelegt.

<path   d="m28 115 188-90 188 90" fill="none" stroke="red" stroke-width="30"/>

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 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 +