SVG-Dateien verkleinern — So geht's richtig

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 Kilobytes unnötigem Overhead.

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.0000002 statt M 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 JNRT Pixel im Browser — eine schnelle Whitespace-Minimierung ohne jede Qualitätseinbuße.

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 svgo
• svgo 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 Tool "Simplify Path" in Illustrator oder Inkscape reduziert die Anzahl der Ankerpunkte bei minimalem visuellem Unterschied — das spart bei komplexen SVGs am meisten.

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

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 Logo, Icons und UI-Grafiken im Web ist SVG ohnehin die beste Wahl — und ein optimiertes SVG noch besser.