SVG (Scalable Vector Graphics, Endung .svg) ist ein vom W3C standardisiertes Vektorgrafikformat für zweidimensionale Grafiken. Anders als Rasterformate wie PNG oder JPEG beschreibt SVG ein Bild nicht als Pixel, sondern als mathematische Formen: Linien, Kreise, Pfade und Text. Darum lässt es sich verlustfrei auf jede Größe skalieren – vom kleinen Icon bis zur riesigen Leinwand. Die erste W3C-Empfehlung erschien 2001, seitdem ist SVG der offene Standard für Vektorgrafiken im Web.
Wie funktioniert SVG?
Eine SVG-Datei ist eine XML-Datei mit menschenlesbarem Text. Der zentrale Baustein ist das path-Element, dessen d-Attribut Zeichenbefehle wie M (move to), L (line to) und C (Kurven) enthält. Dazu kommen Grundformen wie rect, circle, ellipse und polygon. Farbe, Linienstärke und Füllung steuern die Attribute fill und stroke. Die viewBox legt das Koordinatensystem fest und macht die Grafik responsiv: Sie passt sich jeder Anzeigegröße an, ohne an Schärfe zu verlieren.
Vorteile gegenüber Rasterformaten
- Skalierbar: Vergrößerung erzeugt keine Treppenkanten, weil die Geometrie neu berechnet wird – ideal für Retina-Displays und Zoom
- Klein: Logos, Icons und Diagramme brauchen oft nur wenige Kilobyte, während dasselbe Motiv als PNG oder GIF deutlich größer ausfällt
- Bearbeitbar: Da SVG reiner Text ist, lassen sich Farben per CSS ändern, Elemente per JavaScript animieren und Inhalte durchsuchbar und barrierefrei machen
- Direkt ins HTML einbettbar (Inline-SVG) und per CSS gestaltbar – anders als externe Bilddateien
Grenzen hat SVG bei fotorealistischen Motiven: Je feiner die Farbverläufe, desto mehr Pfade und Daten braucht die Datei. Für Fotos sind Rasterformate wie JPEG oder AVIF die richtige Wahl.
Einsatz heute
- Logos und Icons: Das Icon-Set einer Website ist heute fast immer SVG – als eigene Datei, als Sprite oder als Icon-Font-Basis
- Diagramme und Datenvisualisierung: Diagramm-Bibliotheken rendern ihre Ausgabe als SVG; auch Favicons unterstützen das Format (
image/svg+xml) - Karten und Illustrationen: interaktive Landkarten, technische Zeichnungen und Infografiken
- Werkzeuge wie Inkscape (Open Source), Adobe Illustrator oder Figma exportieren SVG; die komprimierte Variante .svgz nutzt gzip und ist im Web selten
Verwandte Grundlagen: PNG, TIFF, BMP, WebP, Datenkompression.