SVG-Datei zu groß? 8 Techniken zur Komprimierung und Optimierung

Eine SVG wiegt oft mehrere hundert KB, manchmal mehrere MB – meist verursacht durch zu viele Ankerpunkte, redundante Pfade, Editor-Metadaten und zu hohe Genauigkeit bei Nachkommastellen. Die folgenden acht Techniken sind nach dem Prinzip „von der Quelle bis zur Übergabe“ geordnet und lassen sich alle umsetzen.

1. Auf Pfadebene: Ankerpunkte reduzieren, Pfade zusammenführen

Technik 1: Ankerpunkte reduzieren (Pfade vereinfachen)

Je mehr Ankerpunkte, desto größer die Datei und desto langsamer die Darstellung. Erhöhen Sie bei der Konvertierung die Glättung, um Ankerpunkte schon an der Quelle zu reduzieren; bestehende SVGs lassen sich über Illustrators „Objekt → Pfad → Vereinfachen“ oder Inkscapes „Pfad → Vereinfachen“ (Strg+L) von überflüssigen Ankerpunkten befreien. Im PolySVG-Konvertierungstool lässt sich mit Glättung und Farbanzahl der Kompromiss zwischen Wirkung und Größe live ausbalancieren.

Technik 2: Pfade und Ebenen zusammenführen

Fassen Sie mehrere Pfade mit gleicher Füllfarbe zu einem zusammen, um wiederholte Attribute zu reduzieren; verebnen Sie sinnlose Gruppenverschachtelungen und löschen Sie ausgeblendete Ebenen sowie leere Elemente. In Designprogrammen erledigt das „Zusammenführen“ des Pfadfensters oder das Zusammenführen von Ebenen vor dem Export dasselbe.

2. Im Dateiinhalt: Metadaten löschen, Genauigkeit senken

Technik 3: Editor-Metadaten entfernen

Von Illustrator oder Inkscape exportierte SVGs enthalten oft Namensräume, einen <metadata>-Block, Kommentare und Exporteinstellungen, die die Darstellung nicht beeinflussen – entfernen Sie sie von Hand oder lassen Sie SVGO sie aufräumen. Behalten Sie dagegen <title> und <desc>, denn sie helfen Screenreadern.

Technik 4: Nachkommastellen verringern

Pfadkoordinaten tragen oft 6 bis 8 Nachkommastellen, während die Bildschirmdarstellung nur 1 bis 2 benötigt. Senken Sie in der SVGO-Konfiguration die Zahlenpräzision (floatPrecision) auf 1 bis 2: Die Datei wird deutlich kleiner, ohne dass man einen Unterschied sieht. Bei sehr kleinen Symbolen darauf achten, die Koordinaten nicht zu stark zu stauchen, damit die Form nicht verzerrt.

3. Automatisierung: Komprimierung per Klick mit SVGO

Technik 5: Automatisch mit SVGO optimieren

SVGO ist das Referenzwerkzeug zur SVG-Optimierung und bringt Dutzende Plugins mit: Kommentare und Metadaten entfernen, Pfade zusammenführen, Pfadbefehle optimieren, Zahlen bereinigen. Grundlegende Verwendung:

npx svgo input.svg -o output.svg

Typische Dateien werden 30–70 % kleiner. Zwei Hinweise: Entfernen Sie das Attribut viewBox nicht, sonst stimmt die Skalierung nicht; behalten Sie bei Symbolen, deren Farbe per CSS geändert wird, die Vererbung von fill, statt die Farbe fest zu schreiben.

Vergleichen Sie vor und nach der Optimierung Dateigröße und tatsächliche Übertragungsgröße in den Entwicklerwerkzeugen des Browsers, um den Gewinn zu prüfen; ändern Sie jeweils nur eine Parameterkategorie, damit sich im Fehlerfall rasch eingrenzen lässt, welcher Schritt die Abweichung verursacht hat.

4. Struktur und Wiederverwendung: Symbolisierung, Farbebenen steuern

Technik 6: Wiederholte Grafiken mit defs und use wiederverwenden

Erscheint dasselbe Symbol mehrfach auf einer Seite, definieren Sie es einmal mit <defs> und referenzieren Sie es mehrfach mit <use>, oder bauen Sie eine SVG-Sprite-Datei – Größe und Zahl der Anfragen sinken gemeinsam.

Technik 7: Farbebenen steuern, eingebettete Rasterbilder vermeiden

Senken Sie bei der Vektorisierung die Farbanzahl, um Ebenen zu reduzieren; wo eine einfarbige Fläche genügt, ist ein komplexer Verlauf unnötig. Vermeiden Sie vor allem eingebettete base64-Rasterbilder in der SVG – sonst wird aus der Vektordatei ein Rastercontainer und die Größe eskaliert. Verbliebene Störpfade lassen sich im Online-Editor anklicken und löschen.

5. Übergabe: Übertragung komprimieren und cachen

Technik 8: gzip/Brotli und Cache aktivieren

Da SVG Text ist, senken gzip/Brotli auf dem Server die Übertragungsgröße meist nochmals um 60–80 %; statische SVGs sollten lange Cache-Header erhalten. Sehr kleine Symbole lassen sich direkt in HTML einbetten und sparen die Anfrage. Das Prinzip erläutert Die Vorteile von SVG; wer die Größe schon bei der Konvertierung steuern möchte, liest Die Methoden, um ein Bild in SVG zu wandeln.

Die Reihenfolge ist wichtig: Ankerpunkte und Farbebenen an der Quelle begrenzen, Metadaten und Genauigkeit in der Datei bereinigen, dann SVGO einsetzen und zuletzt die Übertragung komprimieren. Alle vier Ebenen zusammen schrumpfen eine SVG häufig um eine Größenordnung.