SVG – Skalierbare Vektorgrafik für Web und Design

SVG (Scalable Vector Graphics) ist ein XML-basiertes Vektorgrafik-Format des W3C, das Formen, Pfade, Text und Animationen in mathematischer Form beschreibt und dadurch verlustfrei auf jede Größe skaliert werden kann – der Standard für Logos, Icons und interaktive Grafiken im Web.

Rubrik: Ausgabeformate & Technische Standards · Unterrubrik: Bild-Dateiformate · Niveau: Fortgeschritten Synonyme / Auch bekannt als: .svg, .svgz (gzip-komprimiert), Scalable Vector Graphics

Was ist SVG?

SVG wurde 1999 vom World Wide Web Consortium (W3C) als offener Standard für Vektorgrafiken im Web spezifiziert und 2001 als W3C-Empfehlung veröffentlicht. Die aktuelle Version ist SVG 1.1 (2011); SVG 2.0 ist in Entwicklung. SVG-Dateien sind im Gegensatz zu JPEG, PNG oder WebP keine Pixelbilder, sondern XML-Textdateien, die geometrische Formen, Pfade und Eigenschaften mathematisch beschreiben.

Das bedeutet: Eine SVG-Datei, die ein Kreis-Logo zeigt, speichert nicht die einzelnen Pixel, sondern die Anweisung „zeichne einen roten Kreis mit Radius 50 an Position 100/100". Beim Öffnen oder Anzeigen berechnet der Browser oder das Programm das Bild in Echtzeit – in jeder beliebigen Größe, ohne Qualitätsverlust.

SVGs können in HTML eingebettet, mit CSS gestaltet und mit JavaScript animiert und manipuliert werden. Diese Interaktivität macht SVG einzigartig unter den Bildformaten und hat es zum Standard für Icons, Logos, Data-Visualizations, interaktive Karten und animierte Infografiken gemacht.

Technische Eigenschaften

SVG-Dateistruktur (Beispiel eines einfachen Kreises): ``xml <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" fill="#E74C3C"/> <text x="50" y="55" text-anchor="middle" fill="white">Logo</text> </svg> ``

Dateigröße-Vergleich (Logo, einfach, 500×500 px):

• SVG: ca. 2–20 KB (je nach Komplexität)
• PNG-32 (gleiche Größe): ca. 30–80 KB
• PNG-32 (4× Retina): ca. 120–320 KB
• SVG (4× Retina): immer noch ca. 2–20 KB (kein Unterschied!)

SVG vs. Rasterbilder bei Retina-Displays: SVG benötigt nur eine Datei für alle Auflösungen. PNG oder JPEG müssen für Retina-Displays in @1×, @2×, @3× exportiert werden – dreifacher Aufwand und dreifache Dateigröße.

Einsatzgebiete

1. Logos und Markenidentität: Logos in SVG können auf Visitenkarten, Websites, Billboard-Plakaten und App-Icons in identischer Qualität eingesetzt werden. Die Auflösungsunabhängigkeit macht SVG zum unverzichtbaren Format für Brand Assets.
2. Icons und UI-Elemente: Alle modernen UI-Frameworks (React, Vue, Angular) nutzen SVG-Icons. Bibliotheken wie Font Awesome, Material Icons und Heroicons liefern tausende Icons als SVG. SVG-Icons sind kleiner als Icon-Fonts und besser barrierefreiheitskonform.
3. Daten-Visualisierung und interaktive Grafiken: D3.js, Chart.js und Highcharts erstellen Diagramme, Karten und Graphen als dynamische SVGs, die in Echtzeit mit JavaScript aktualisiert werden können.
4. Animationen und Motion Graphics: CSS-Animationen und GSAP (GreenSock) animieren SVG-Elemente für Ladeanimationen, interaktive Infografiken und Mikro-Animationen in Web-Interfaces.
5. Print-Export aus Vektor-Workflows: Auch für Druckprodukte wird SVG exportiert, wenn Dateien im Web bearbeitet werden (z. B. Figma-Layouts), und dann in Illustrator oder InDesign weiterverarbeitet.

In der Praxis

Adobe Illustrator:

• Datei > Exportieren > Als SVG exportieren: SVG-Einstellungen anpassen
• „Eingebettete Schriften" oder „Als Pfade konvertieren" für textbasierte Logos wählen (Pfade bevorzugt für maximale Kompatibilität)
• CSS-Eigenschaften: „Präsentation-Attribute" für einfache SVGs; „Stilelemente" für CSS-basierte SVGs
• Dezimalpräzision: 2–3 für Standard-Web, 1–2 für kleine Icons

Figma:

• Exportieren > Format SVG: „SVG bereinigen" deaktivieren für volle Kontrolle; aktivieren für kleinere Dateien
• Frame > Flach abbilden vor dem Export für komplexe Effekte, die SVG nicht unterstützt
• Icons: Als Komponenten anlegen, dann SVG exportieren

SVGO (Optimierung, Kommandozeile):

• svgo input.svg -o output.svg: Unnötige Metadaten, Kommentare und redundante Attribute entfernen
• Typische Verkleinerung: 30–70% ohne visuellen Unterschied
• Online-Alternative: https://jakearchibald.github.io/svgomg/

SVG in HTML einbetten: ```html <!-- Als img-Tag (kein JavaScript/CSS-Zugriff): --> <img src="logo.svg" alt="Logo">

<!-- Inline SVG (CSS/JS-Zugriff möglich): --> <svg viewBox="0 0 100 100">...</svg>

<!-- Als CSS-Hintergrund: --> background-image: url('icon.svg'); ```

Vergleich & Abgrenzung

Wann SVG wählen: Logos, Icons, Illustrationen, Infografiken, Karten, Diagramme, alle Grafiken, die in verschiedenen Größen verwendet werden. Wann kein SVG: Fotos, komplexe Fotomontagen, Rasterbilder (→ JPEG, WebP, AVIF).

Häufige Fragen (FAQ)

Kann SVG Fotos enthalten? SVG kann Rasterbilder einbetten (als Base64-kodierte Daten oder externe Referenzen), aber das macht es zu einem schlechten Format für Fotos. Die Stärke von SVG liegt in Vektorgrafiken. Für Fotos sind JPEG, WebP oder AVIF die richtigen Formate.

Sind SVG-Dateien sicher? SVG-Dateien können JavaScript enthalten und sind daher ein potenzielles Sicherheitsrisiko, wenn sie von nicht-vertrauenswürdigen Quellen stammen und direkt im Browser ausgeführt werden (inline SVG). Als <img>-Element eingebettet ist das Risiko minimal, da JavaScript in diesem Kontext nicht ausgeführt wird. In CMS-Systemen sollten SVG-Uploads von Nutzern sanitisiert werden.

Warum öffnet sich mein SVG als Textdatei? SVG ist eine XML-Textdatei, und manche Betriebssysteme oder Browser öffnen sie standardmäßig im Texteditor. Die Lösung: Die Datei direkt in einem Browser öffnen (Datei auf das Browser-Fenster ziehen) oder mit einem SVG-fähigen Programm wie Illustrator, Inkscape oder Figma.

Verwandte Einträge

• EPS-Format
• PNG-Format
• PDF-Format
• ICO und Favicon

Weiterführend

• W3C (2011): Scalable Vector Graphics (SVG) 1.1 Second Edition –
• Eisenberg, J. David (2002): SVG Essentials. O'Reilly Media.
• Online: MDN Web Docs – SVG –
• Online: SVGOMG – Online-SVG-Optimierer –
• Online: SVG Tutorial –