SVG (Scalable Vector Graphics) ist ein Bildformat für das Web, das auf mathematischen Beschreibungen statt auf Pixeln basiert. SVGs sind unbegrenzt skalierbar, extrem leichtgewichtig und können direkt im HTML manipuliert werden – ideal für Icons, Logos und Illustrationen.
Wie SVG funktioniert
Im Gegensatz zu Pixelformaten wie PNG oder JPEG beschreibt SVG Grafiken als XML-Code: Linien, Kurven, Rechtecke, Kreise und Pfade werden durch Koordinaten und Attribute definiert. Ein Kreis ist nicht eine Ansammlung farbiger Pixel, sondern die Anweisung „zeichne einen Kreis mit Radius 50 an Position 100,100".
Dieser Ansatz hat einen entscheidenden Vorteil: Die Grafik sieht auf jedem Display gleich scharf aus – vom Smartphone bis zum 4K-Monitor. Kein Verpixeln, kein Qualitätsverlust bei Vergrößerung.
Vorteile von SVG
- Skalierbarkeit: Perfekte Darstellung in jeder Größe
- Kleine Dateigröße: Einfache Grafiken sind als SVG deutlich kleiner als als PNG
- Stylebarer Code: SVG-Elemente lassen sich mit CSS stylen
- Animierbar: Elemente können mit CSS oder JavaScript animiert werden
- Barrierefreiheit: SVGs können
<title>und<desc>für Screen Reader enthalten - Dark Mode: Mit
currentColorpassen sich SVGs automatisch an
SVG-Einsatzbereiche
Icons
SVG-Icons sind der Standard im modernen Webdesign. Sie sind scharf auf Retina-Displays, lassen sich farblich anpassen und haben eine minimale Dateigröße. Icon-Bibliotheken wie Lucide, Heroicons und Phosphor liefern SVGs.
Logos
Logos als SVG bleiben auf jedem Gerät und in jeder Größe gestochen scharf. In Kombination mit currentColor passt sich das Logo automatisch an den Dark Mode an.
Illustrationen
Komplexere Illustrationen – etwa für Hero Sections oder Erklärseiten – profitieren von SVGs Skalierbarkeit und Animierbarkeit.
Datenvisualisierungen
Diagramme und Charts basieren häufig auf SVG. Bibliotheken wie D3.js und Recharts generieren interaktive SVG-Grafiken.
SVG-Optimierung
SVG-Dateien aus Figma oder Illustrator enthalten oft unnötigen Code: Editor-Metadaten, leere Gruppen und überflüssige Attribute. Tools wie SVGO (SVG Optimizer) reduzieren die Dateigröße um 30-50% ohne visuelle Einbußen.
SVG in React und Next.js
In React-Projekten können SVGs als Komponenten importiert werden. Jedes SVG-Element ist ein React-Element, das Props akzeptiert – ideal für dynamische Icons mit wechselnden Farben und Größen.
SVG und Barrierefreiheit
Für Barrierefreiheit sollten SVGs ein role="img" und ein aria-label erhalten. Dekorative SVGs werden mit aria-hidden="true" vor Screen Readern verborgen.
Für professionelles Webdesign ist SVG das unverzichtbare Format für alles, was nicht Foto ist – scharf, leicht, flexibel und zukunftssicher.