SVG (Scalable Vector Graphics) ist ein vom World Wide Web Consortium (W3C) empfohlenes, XML-basiertes Dateiformat für zweidimensionale Vektorgrafiken. Im Gegensatz zu Rastergrafiken (wie JPEG oder PNG) basieren SVGs auf mathematischen Beschreibungen von Formen, Linien und Pfaden.
Bedeutung
SVGs sind im modernen Webdesign unverzichtbar, da sie vollkommen auflösungsunabhängig sind. Sie werden auf Retina-Displays, 4K-Monitoren und Smartphones absolut scharf gerendert. Da sie textbasiert (XML) sind, lassen sie sich extrem gut komprimieren (gzip/brotli), weisen minimale Dateigrößen auf und können direkt im DOM per CSS gestaltet und mit JavaScript (z. B. GSAP) animiert werden.
Funktionsweise
Ein SVG-Dokument besteht aus XML-Tags wie <rect> (Rechteck), <circle> (Kreis), <path> (komplexer Pfad) und <text> (Text). Ein SVG kann entweder extern über ein <img>-Tag geladen oder als Inline-SVG direkt in das HTML-Dokument eingebettet werden. Inline-SVGs sparen einen zusätzlichen HTTP-Request und machen alle inneren Elemente (wie Pfade) für CSS-Selektoren und JavaScript-Scripts zugänglich, was komplexe Interaktionen ermöglicht.
Praxisbeispiel
Das Logo einer Digitalagentur wird als Inline-SVG eingebunden. Auf hochauflösenden Smartphones ist es gestochen scharf. Beim Laden der Seite animiert eine GSAP-Timeline die einzelnen Buchstabenpfade des Logos nacheinander (DrawSVG-Effekt). Die Dateigröße beträgt lediglich 3 KB.