SVG Formen: rect, circle, ellipse, line

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

SVG steht für Scalable Vector Graphics, ist Klartext wie HTML und lässt sich nahtlos in HTML einbetten oder als Bild laden. Die Grundformen von SVG wie rect, circle, line und der universelle SVG path werden durch Attribute beschrieben und lassen sich genauso wie HTML animieren.

Für einfache Grafiken wie Icons reicht ein einfacher Programmeditor, um SVG zu erstellen und mit CSS zu animieren.

Nicht nur spezielle Illustrationsprogramme wie Adobe Illustrator und Inkscape erstellen Grafiken im SVG-Format, sondern 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 verdeckt seine Vorgänger, wenn es nicht transparent ist.

Alle Angaben zur Positionierung in SVG sind absolut, aber transform="translate / rotate / scale" gibt einzelnen Elementen oder Gruppen von Elementen ein eigenes Koordinatensystem und verschiebt, rotiert und skaliert Elemente.

rect – Rechteck

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

rect

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

stroke, stroke-width und fill sind Attribute für einen Rahmen und die Farbe der Füllung – diese Attribute gibt es für jedes Element. rx und ry sorgen bei SVG rect für die abgerundeten Ecken.

circle – Kreis

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

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" />

ellipse – Ellipse

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

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" />

line – gerade Linie zwischen zwei Punkten

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.

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" />

polyline – verbundene Linien

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.

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" />

polygon – Form aus geraden Linien

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.

polygon

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

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 +