CSS, HTML & Javascript mit {stil}

SVG Elemente: rect, circle, line, polyline

SVG steht für Scalable Vector Graphics, ist Klartext wie HTML, und lässt sich nahtlos in HTML einbetten oder als Bild in einem HTML-img-Tag 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.

Einfache SVG Formen oder Grundelemente

Einfache Grundformen in SVG

Grafische Formen entstehen aus der Kombination von gerade Linien und Kurven. In SVG sind das

  • Rechteck <rect />
  • Kreis <circle />
  • Ellipse <ellipse />
  • gerade Linie <line />
  • Polylinie <polyline />
  • Polygon <polygon />
  • Pfad <path />
SVG Formen / SVG shapes

Zu diesen grafischen Formen gesellt sich Text (text). Alle SVG-Formen lassen sich mit Farben oder Mustern füllen (fill) und können umrandet werden (stroke).

Maßangaben: Länge, Breite, x und y

Für die Angaben von width, height, x, y, r, cx, cy … können em, ex, px, pt, pc, cm, mm, in und Prozent % eingesetzt werden.

Für einfache Grafiken wie Icons reicht ein einfacher Programmeditor (und Kopfrechnen), um SVG zu erstellen und mit CSS zu animieren. Grafische Editoren gibt es als Open Source (z.B. Inkscape) bis hin zu den Profis (z.Z. Adobe Illustrator).

SVG hört einen Kommentar

So einfach als wäre es HTML … 

<!-- 
    comment 
-->

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
SVG rect mit Abmessungen und Position 
<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 – Kreis
SVG circle mit Abmessungen und Position 
<circle r="50" cx="120" cy="70" 
        fill="rgba(220,220,220,0.5)" stroke="#fff" stroke-width="5" />

Neben Kreise und Ellipsen unterstützt SVG Bogenkurven.

ellipse – Ellipse

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

ellipse – Ellipse
SVG ellipse mit Abmessungen und Position 
<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 – einfache Linie
SVG Linie mit Abmessungen und Position 
<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 – Linie zwischen Punkten
SVG Polyline Punkt zu Punkt-Verbindung 
<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 – drei Punkte, drei Kanten
SVG Polygon geschlossene Punkt- zu Punkt-Verbindung 
<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 und tspan
svg text und tspan 
<text>
 <tspan x="40" y="60">Lorem ipsum …</tspan>
 <tspan x="40" y="80">consectetur …</tspan>
  …
</text>

SVG aus Photoshop

Nicht nur spezielle Illustrationsprogramme wie Adobe Illustrator und Inkscape erstellen Grafiken im SVG-Format, sondern auch Adobe Photoshop CC exportierte Grafiken als SVG. Allerdings hat Adobe mit Photoshop 2022 SVG unter "Deprecated – Veraltet" gesetzt und gut versteckt.

Um den SVG-Export in Photoshop wieder zu Tage zu befördern, unter Einstellungen / Exportieren die Option Altes »Exportieren als« verwenden aktivieren und Photoshop nur starten. Dann liegt der Export unter Datei / exportieren.

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.

Adobe Photoshop – SVG-Export
Deprecated: Adobe Photoshop SVG Export

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

Suchen auf mediaevent.de