CSS, HTML und Javascript mit {stil}

SVG Formen: rect, circle, ellipse, line und path

Einfache SVG Formen und Attribute für Icons und UI-Elemente

Der überwiegende Teil aller SVG-Grafiken wird mit Adobe Illustrator, Inkscape oder Sketch erzeugt.

Wir mischen immer öfters SVG für Icons und UI-Elemente ins HTML. Da lohnt es sich, einfache Formen manuell zu bearbeiten, denn die SVG-Programme mit den grafischen Oberflächen produzieren einen gewaltigen Overhead.

Auch Adobe Photoshop CC exportiert Grafiken als SVG. Designern, die mit den Pfaden in Photoshop vertraut sind, kommt der SVG-Export leichtfüßig entgegen, denn Photoshop erzeugt effizientes, modernes SVG ohne überflüssige Attribute – einfach SVG, auch mit Filtern, Verläufen und Schatten. Allerdings kann die Grafik nicht in Photoshop erneut geöffnet und weiter bearbeitet werden. Wenn nur kleine Änderungen anfallen oder die Grafik animiert werden soll, ist Grundwissen zu SVG-Formen und -Attributen gefragt.

SVG aus Photoshop CC exportieren In Photoshop Datei / exportieren als aufrufen und dann SVG einstellen
SVG mit Adobe Photoshop exportieren: »Datei exportieren«, »Exportieren als« und dann unter Dateieinstellungen »SVG« wählen.

Wer HTML mit einem Texteditor codiert, hat mit SVG leichtes Spiel … nur rechnen muss man.

SVG Formen und Pfade

Grafikelemente werden in der Reihenfolge ihrer Definition auf der Zeichenfläche angeordnet bzw. überlagert. Was weiter unten im Quelltext liegt, liegt über den vorangegangenen SVG-Tags und kann die Formen verdecken, wenn es nicht transparent ist.

Alle Angaben zur Positionierung in SVG sind absolut, aber transform="translate" gibt einzelnen Elementen oder Gruppen von Elementen ein eigenes Koordinatensystem.

rect

x="80"y="20"width="100"height="90"
<rect width="100" height="90" x="80" y="20" rx="8" ry="8"
      stroke="silver" fill="hsla(170,30%,85%,0.5)" stroke-width="4" />

SVG rect erzeugt ein Rechteck mit den Angaben width / height und der Position (von links oben) x / y.

circle

cx="120" cy="70"r="50"
<circle r="50" cx="120" cy="70" 
        fill="rgba(220,220,220,0.5)" stroke="#fff" stroke-width="5" />

SVG circle erzeugt einen Kreis an der Position (von der Mitte aus) cx / cy und dem Kreisradius r.

ellipse

ry="50"rx="80"cx="100" cy="70"
<ellipse rx="80" ry="50" cx="100" cy="70" 
         fill="#fff" stroke="silver" stroke-width="8" />

SVG ellipse erzeugt eine Ellipse an der Position (von der Mitte aus) cx / cy und dem Radien rx / ry.

line

x1="50"x2="220"y1="60"y2="80"
<line x1="50" x2="220" y1="60" y2="80" 
   stroke-width="20" stroke="rgba(140,170,190,0.5)" 
   stroke-linecap="round" />

SVG line zeichnet Linien zwischen zwei Punkten. Jeder Punkt wird durch die Koordinatenpaare x1 / y1 und x2 / y2 festgelegt. line muss mindestens das Attribut stroke für die Farbe der Linie aufweisen, damit die Linie sichtbar gerendert wird.

polyline

10,1050,50100,10120,80270,100140,130
<polyline points="10,10 50,50 100,10 120,80 270,100 140,130" 
          stroke-linecap="round" fill="none" 
          stroke="silver" stroke-width="10" />

SVG polyline zeichnet Linien zwischen zwei und mehr Punkten. Jeder Punkt wird im Attribut points durch ein Koordinatenpaar x,y festgelegt. polyline muss mindestens das Attribut stroke für die Farbe der Linie aufweisen, damit die Linie sichtbar gerendert wird.

polygon

100,10200,60100,120
<polygon 
 points="100,10 200,70 100,130" 
 fill="hsla(170,50%,70%,0.5)" />

SVG polygon zeichnet Linien zwischen zwei und mehr Punkten, aber erzeugt automatisch eine Linie zwischen dem ersten und den letzten Punkt. Jeder Punkt wird im Attribut points durch ein Koordinatenpaar x,y festgelegt.

path

100,10200,60100,120
<path 
  d="M 100,10 L 200,70 L 100,130 Z" fill="green"
  stroke="gray" />

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

Das d-Attribut kann variieren:

  • Mit einem großen M am Anfang sind die Punkte absolute Werte wie bei polyline und polygon.
  • Ein Z am Ende der Koordinatenliste schließt den Pfad zu einer Form.

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.


M, m move to point
Z, z close path 
L, l line to 
Q, q und T, t Quadratic Bézier curve
C, c und S, s Cubic Bézierkurve 
S,s smooth cubic curve to, 
A, a Elliptical Arc

In der Vektorgrafik mit grafischer Benutzeroberfläche – Illustrator, Photoshop – zeichnen wir meist mit der kubischen Bézierkurve.

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 Text

SVG Text ist Klartext, barrierefrei, semantisch und durchsuchbar.

text

Lorem ipsum dolor sit amet,consectetur adipiscing elit.(40,60)(40,80)
<text>
 <tspan x="40" y="60">Lorem ipsum …</tspan>
 <tspan x="40" y="80">consectetur …</tspan>
  …
</text>
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 +