Verwendung des <svg>-Elements

SVG (Scalable Vector Graphics) ist ein Vektorformat, das mit dem <svg>-Element in HTML verwendet wird. Der große Vorteil: SVG skaliert ohne Qualitätsverlust.

Grundstruktur von <svg>

SVG ist eine eigenständige Auszeichnungssprache mit Elementen wie <rect>, <circle> und <line>. Das <svg>-Element muss eine Breite und Höhe definiert haben.

Formen erstellen

Mit SVG lassen sich verschiedene Grundformen erstellen – z. B. Kreise (<circle>), Rechtecke (<rect>) und Linien (<line>). Jede Form kann individuell gestaltet werden.

Text in SVG

SVG unterstützt auch die Darstellung von Text. Mit dem <text>-Element lassen sich Beschriftungen einfügen, die mit Schriftarten und Farben gestaltbar sind.

SVG in HTML einbetten

SVG kann direkt im HTML-Dokument eingebettet oder als externe Datei referenziert werden. Inline-SVG lässt sich leicht mit CSS und JavaScript verändern.

Vorteile von SVG

SVG ist verlustfrei skalierbar, leicht zu animieren, hat geringe Dateigrößen, ist SEO-freundlich und barrierefrei – ideal für Logos, Icons, Diagramme und interaktive Grafiken.

Wofür wird SVG verwendet?

SVG ist die perfekte Wahl für präzise, responsive Grafiken. Es eignet sich für Datenvisualisierungen, Karten, Icons oder Animationen.