SVG (Scalable Vector Graphics) ist ein XML-basiertes offenes Vektorformat des W3C, das mathematisch beschriebene Grafiken beliebig verlustfrei skaliert, im Browser nativ dargestellt, animiert und per CSS und JavaScript manipuliert werden kann.
Rubrik: Ausgabeformate & Technische Standards · Unterrubrik: Bild-Dateiformate · Niveau: Einsteiger Dateiendung: .svg, .svgz (komprimiert) · Entwickler: W3C (World Wide Web Consortium) · Eingeführt: 1999
Was ist SVG?
SVG unterscheidet sich fundamental von allen anderen in dieser Rubrik beschriebenen Formaten: Während JPEG, PNG und WebP Pixel speichern, beschreibt SVG Grafiken als mathematische Objekte – Kurven, Linien, Formen und Texte. Das macht SVG unendlich skalierbar: Ein SVG-Logo sieht auf einem Smartphone genauso scharf aus wie auf einem 4K-Monitor oder einem 10-Meter-Banner.
SVG ist kein Binärformat, sondern lesbarer XML-Text – eine einfache Grafik lässt sich sogar von Hand schreiben. Dies ermöglicht direkte Einbettung in HTML und Manipulation per CSS und JavaScript.
Erklärung
Vektormathematik: SVG beschreibt Grafiken als geometrische Primitive: Rechtecke (<rect>), Kreise (<circle>), Pfade (<path>) und Text (<text>). Pfade werden als Bézierkurven definiert, was beliebig komplexe Formen ermöglicht.
XML-Struktur: Eine SVG-Datei ist valides XML. Grundstruktur: ``xml <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" fill="blue"/> </svg> ``
Skalierbarkeit: Das viewBox-Attribut definiert den internen Koordinatenraum. Durch CSS oder HTML-Attribute kann das SVG auf jede Größe skaliert werden, ohne Qualitätsverlust.
CSS-Styling: SVG-Elemente können wie HTML-Elemente per CSS gestylt werden: Farben, Schriften, Schatten, Transformationen. Dies macht SVG ideal für responsives Design.
Animation: SVG unterstützt native Animationen über SMIL-Animationen (veraltet, eingeschränkte Browser-Unterstützung) und modernes CSS-Animationen/Transitions sowie JavaScript (GSAP, Anime.js).
JavaScript-Interaktion: SVG-Elemente sind Teil des DOM (Document Object Model) und können per JavaScript manipuliert werden – für interaktive Grafiken, Datvisualisierungen (D3.js) und Karten.
Eingebettete Rasterbilder: SVG kann Rasterbilder einbetten (als <image>-Element), was Compositing von Vektor- und Pixelelementen ermöglicht.
Text: SVG-Text bleibt als echtem Text erhalten (kopierbar, durchsuchbar, zugänglich), sofern keine Schriftpfade genutzt werden.
Dateigröße: Einfache Grafiken sind als SVG sehr klein. Komplexe Illustrationen mit Hunderten von Pfaden können jedoch groß werden. SVGZ (gzip-komprimiertes SVG) reduziert die Größe um 60–80 %.
Einschränkungen: SVG eignet sich nicht für fotografische Bilder – dafür sind Rasterformate wie JPEG oder WebP zuständig. Sehr komplexe SVG-Dateien (z. B. aus Illustrator-Exporten) können browser-seitig langsam rendern.
Barrierefreiheit: SVG unterstützt <title> und <desc>-Elemente für Screen-Reader und ist damit für barrierefreie Webinhalte geeignet.
Beispiele
- Logos und Markenidentität: Unternehmenslogos werden als SVG ausgeliefert, um auf allen Geräten und in allen Größen scharf zu erscheinen – vom Favicon bis zum Messebanner.
- Icon-Systeme: Webprojekte nutzen SVG-Sprite-Systeme oder Inline-SVG für Symbole und Icons, statt pixel-basierter Icon-Fonts oder PNG-Sprites.
- Datenvisualisierung: Bibliotheken wie D3.js erzeugen Diagramme, Karten und Graphen dynamisch als SVG im Browser.
- Animierte Illustrationen: UI/UX-Animationen (Lade-Animationen, interaktive Illustrationen) werden als animierte SVG realisiert.
- Interaktive Karten: Geographische Karten werden als SVG ausgegeben, wobei Ländergrenzen als Pfade per Klick ansteuerbar sind.
In der Praxis
Wann SVG verwenden:
- Logos, Icons, Illustrationen, Diagramme
- Elemente, die in verschiedenen Größen dargestellt werden
- Interaktive oder animierte Grafiken im Web
- Wenn CSS-Styling oder JavaScript-Manipulation gewünscht ist
Export-Einstellungen aus Illustrator/Inkscape:
- „SVG 1.1" wählen (nicht SVG Tiny)
- Fonts in Pfade konvertieren oder als Web-Fonts referenzieren
- Überflüssige Metadaten entfernen (Illustrator-Kommentare, Ebenen-IDs)
- SVGZ für Produktionsdateien, SVG für Bearbeitung
- Optimierung mit SVGO oder Squoosh
Einbettung in HTML:
- Inline
<svg>für CSS/JS-Manipulation <img src="logo.svg">für einfache Nutzung- CSS
background-image: url(logo.svg)für dekorative Grafiken
Software: Adobe Illustrator, Inkscape (kostenlos, open source), Figma, Sketch, Affinity Designer.
Vergleich & Abgrenzung
Gegenüber PNG: PNG speichert Pixel, SVG Vektoren. SVG skaliert verlustfrei, PNG nicht. PNG ist besser für komplexe fotografische Grafiken oder wenn pixel-genaue Darstellung benötigt wird; SVG für Logos, Illustrationen und Icons.
Gegenüber EPS: Beide sind Vektorformate. EPS ist ein älteres PostScript-basiertes Format für Print und Druckvorstufe; SVG ist das Web-Standard-Vektorformat. Moderne Print-Workflows können SVG verarbeiten, traditionelle Druckereien bevorzugen jedoch noch EPS oder PDF.
Häufige Fragen (FAQ)
Wann sollte ich SVG statt PNG verwenden? SVG ist die bessere Wahl für alle Grafiken, die aus geometrischen Formen, Linien und Text bestehen – also Logos, Icons, Diagramme und Illustrationen. PNG sollte bevorzugt werden, wenn die Grafik fotografische Elemente enthält, aus einer komplexen Rasterillustration besteht oder in einer Umgebung eingesetzt wird, die kein SVG unterstützt (ältere E-Mail-Clients, bestimmte CMS).
Welche Qualitätseinstellungen sind bei SVG optimal? SVG hat keine Qualitätsstufen – das Format ist immer verlustfrei und exakt. Die „Optimierung" bei SVG betrifft Dateigröße: Tools wie SVGO entfernen redundante Attribute, vereinfachen Pfade und kürzen numerische Werte. Für Produktion empfiehlt sich SVGO mit moderaten Einstellungen; zu aggressive Optimierung kann Pfade vereinfachen und Rundungsfehler erzeugen.
Weiterführend
- W3C SVG 2 Specification – w3.org/TR/SVG2 (2018)
- MDN Web Docs: „SVG" – developer.mozilla.org/en-US/docs/Web/SVG (2024)
- Jenkov, J.: „SVG Tutorial" – jenkov.com/tutorials/svg
- SVGO-Tool: github.com/svg/svgo
