SVG steht für "Scalable Vector Graphics" welche eine verlustfreie Skalierung ermöglicht. SVG's können mit entsprechenden Grafikprogrammen (Adobe Illustrator, Affinity Designer, Corel Draw, Inkscape usw.) erstellt werden. Einfache Formen können jedoch auch "zu Fuß" mit Hilfe der entsprechenden Markup's erstellt werden.

SVG's eignen sich besoders für Formen, teilweise Logos, Schaltpläne und vieles mehr. Ein sehr großer Vorteil liegt in der Größe, Skalierbarkeit und der Möglichkeit einzelne Elemente oder Gruppen leicht zu animieren oder als Schaltfläche zu benutzen.

SVG Elemente müssen ein öffnendes und ein schließendes Tag besitzen, dies kann auf zwei Arten geschehen 

<svg style='width: 100%; border:1px solid black;'>
	<path d='M0 0 H150 V100 H0 z' style='stroke:green; stroke-width:25px; fill:red;' />
	<path d='M200 30 h150 v100 h-150 z' style='stroke:green; stroke-width:25px; fill:red;' />
</svg>

Bei dem ersten Path der bei 0,0 (M0 0) begint, geht an der oberen und der linken Kante die Hälfte der Linienstärke verloren. Mit der CSS Eigenschaft overflow: visible; kann man dies umgehen, ist aber eher untypisch da sie dann aus dem Dokumentenfluss treten.


Einige wichtige Markup's

Markup
Beschreibung
svg
Damit wird das SVG begonnen und alle darin enthaltenen Befehle dem SVG zugeordnet. Innerhalb des SVG dürfen keine "normalen" HTML Befehle stehen. Mit den Attributen width, height wir die Größe des SVG angegeben. Das Attribute viewBox enhällt die Angaben zur Position und Breite/Höhe der Zeichenfläche.
rect
Definiert ein Rechteck, es kann zusätzlich zur Höhe und Breite ein Eckenradius mit angegeben werden.
circle
Malen Sie Kreise mit einem bestimmten Durchmesser
line
Mit dem Befehl wird eine Linie gemalt
path
Mit dem Path können sehr komplexe Dinge gemalt werden, zumeist bedient man sich hier schon der Benutzung von entsprechenden Programmen.
polygon,polyline
Mehrere linien aneinander offen (Polyline) oder geschlossen (Polygon).

Da SVG direkt in die HTML Seite eingebunden wird, werden Zeilen auf die gleiche Art wie bei HTML auskommentiert (<!-- Kommentar -->);