Warum sind SVG-Exporte so groß?
SVG (Scalable Vector Graphics) ist ein XML-basiertes Vektorformat. Das klingt erstmal effizient — aber Export-Tools wie Adobe Illustrator, Inkscape oder Figma fügen einer SVG-Datei eine Menge Metadaten, Kommentare und redundante Attribute hinzu, die für die Darstellung im Browser völlig unnötig sind.
Ein einfaches Logo aus Figma kann so 50–200 % größer sein als nötig. Bei komplexen Illustrationen mit vielen Pfaden summiert sich das schnell zu mehreren Kilobyte unnötigem Overhead — der bei jedem Seitenaufruf mitgeladen wird.
Was steckt im SVG-Overhead?
Typische „Ballast"-Elemente in rohen SVG-Exporten:
- XML-Kommentare — Programm-Metadaten wie
<!-- Generator: Adobe Illustrator --> - Überflüssige Whitespaces und Zeilenumbrüche — für den Browser bedeutungslos
- Redundante Attribute — z. B.
fill="black", wenn der Default ohnehin schwarz ist - Leere Gruppen —
<g></g>ohne Inhalt - Inline-Styles statt Präsentationsattribute — nicht falsch, aber länger
- Überpräzise Dezimalzahlen —
M 10.0000001 20.0000002stattM 10 20 - Doctype-Deklarationen — im Web nicht benötigt
- Namespace-Deklarationen — oft mehrfach und redundant vorhanden
Methoden zur SVG-Optimierung
1. Whitespace-Minimierung (Basic)
Die einfachste Methode: alle überflüssigen Leerzeichen, Zeilenumbrüche und Tabs entfernen. Aus einem 4-KB-formatierten SVG werden so schnell 2–2,5 KB. Genau das macht unser SVG-Optimierer im Browser — eine schnelle Minimierung ohne jede Qualitätseinbuße, und ohne dass die Datei den Rechner verlässt.
2. SVGO (Node.js CLI)
SVGO (SVG Optimizer) ist das De-facto-Standard-Tool für tiefe SVG-Optimierung. Es analysiert die SVG-Struktur und wendet über 20 verschiedene Optimierungsplugins an: Kommentare entfernen, Pfade vereinfachen, Dezimalstellen runden, Transformationen zusammenführen und vieles mehr.
Installation und Nutzung:
npm install -g svgosvgo input.svg -o output.svg- Typische Ersparnis: 30–60 % der ursprünglichen Dateigröße
3. Figma-Export-Einstellungen
Figma bietet beim SVG-Export die Option „Simplify stroke" und lässt sich so konfigurieren, dass Outline-IDs und überflüssige Attribute weggelassen werden. Vor dem Export lohnt es sich, Layer ohne Inhalt zu entfernen und Ebenen zusammenzuführen, wo möglich.
4. Pfade vereinfachen
In komplexen Illustrationen werden oft mehr Pfadpunkte verwendet als nötig. Das Werkzeug „Simplify Path" in Illustrator oder Inkscape reduziert die Anzahl der Ankerpunkte bei minimalem visuellem Unterschied — das spart bei komplexen SVGs am meisten.
💡 Faustregel: Für schnelle Minimierung ohne Tool-Installation: der SVG-Optimierer im Browser. Für tiefgehende Optimierung großer SVG-Dateien: SVGO via CLI.
Was geht bei der Optimierung verloren?
Bei der reinen Whitespace-Minimierung geht nichts verloren — die Darstellung ist pixelgleich. Bei SVGO mit aggressiven Einstellungen können folgende Dinge entfernt werden, die manchmal benötigt werden:
- IDs von Elementen (wenn diese per CSS oder JavaScript angesprochen werden)
- Ebenen-Namen (bei komplexen Animationen über JavaScript)
- Metadaten (Autoreninfo, Lizenzhinweise)
Für einfache Icons und Logos ist das kein Problem. Bei SVGs, die per Animation oder Scripting manipuliert werden, lohnt sich ein Test nach der Optimierung.
SVG vs. rasterisierte Alternativen
| Szenario | SVG | PNG/WebP |
|---|---|---|
| Logo auf Website | ✅ Ideal (skalierbar) | Geht, aber pixelig bei 2x |
| Icon-Set | ✅ Ideal | Möglich, aber größer |
| Komplexe Illustration | ⚠️ Prüfen (kann groß werden) | ✅ Oft besser |
| Foto | ❌ Ungeeignet | ✅ JPG/WebP |
| Retina/HiDPI | ✅ Automatisch scharf | Braucht 2x-Version |
Wann sich SVG für Icons lohnt und wann PNG die bessere Wahl ist, vertieft der Beitrag SVG, PNG oder JPG für Icons.
Häufige Fragen
Wie viel kleiner wird eine SVG-Datei durch Optimierung?
Allein durch das Entfernen von Kommentaren und Whitespace typischerweise 30–50 %. Mit tieferer Optimierung (Pfade runden, redundante Attribute entfernen) sind bei rohen Exporten aus Design-Tools auch 50–70 % möglich — bei pixelgleichem Ergebnis.
Geht bei der SVG-Optimierung Qualität verloren?
Bei reiner Whitespace- und Kommentar-Minimierung nichts — die Darstellung ist identisch. Erst aggressive Einstellungen können IDs, Ebenennamen oder Metadaten entfernen, die für CSS-/JavaScript-Animationen gebraucht werden. Solche SVGs nach der Optimierung einmal testen.
Wann ist SVG die falsche Wahl?
Bei Fotos und sehr detailreichen Illustrationen. SVG beschreibt Formen mathematisch; je mehr Pfadpunkte, desto größer die Datei. Ab einer gewissen Komplexität ist ein PNG oder WebP kleiner. Für Logos, Icons und UI-Grafiken bleibt SVG dagegen konkurrenzlos.
Ist SVGO nötig, oder reicht ein Browser-Tool?
Für Logos und Icons reicht eine schnelle Browser-Minimierung ohne Installation völlig. SVGO über die Kommandozeile lohnt sich für große Mengen, komplexe Illustrationen oder eine automatisierte Build-Pipeline.
Fazit
SVG-Optimierung ist eine der einfachsten Performance-Maßnahmen für Webprojekte. Schon das bloße Entfernen von Kommentaren und Whitespace spart häufig 30–50 % der Dateigröße. Für Logos, Icons und UI-Grafiken im Web ist SVG ohnehin die beste Wahl — und ein optimiertes SVG noch besser.
Quellen
MDN — SVG · SVGO — Quellcode auf GitHub · W3C — SVG-2-Spezifikation.