SVG-Dateien komprimieren

SVG ist Code, keine Pixel

Eine SVG-Datei (Scalable Vector Graphics) ist ein Textdokument in XML, das Formen beschreibt: Pfade, Kreise, Verläufe, Text. Weil sie Anweisungen statt Pixel enthält, bleibt sie in jeder Größe scharf, vom 16-Pixel-Favicon bis zur Plakatwand. Icons, Logos, Illustrationen, Diagramme und Karten im Web sind oft SVG, und das Format ist seit 2001 ein W3C-Standard.

Dass es Text ist, hat eine Nebenwirkung: Die Dateigröße hängt davon ab, wie wortreich das Programm die Datei geschrieben hat, nicht davon, wie groß das Bild angezeigt wird. Zwei SVGs, die identisch aussehen, können sich in der Größe um ein Mehrfaches unterscheiden.

Was SVG-Dateien unnötig schwer macht

• Metadaten des Programms. Illustrator, Inkscape, Figma und Sketch fügen eigene Namensräume, Ebenennamen, Exportkommentare und manchmal eine eingebettete Kopie des bearbeitbaren Dokuments hinzu.
• Übertriebene Genauigkeit. Koordinaten wie 12.483920174, wo 12.48 in jeder realistischen Größe genau gleich aussieht.
• Überflüssige Struktur. Leere Gruppen, ausgeblendete Ebenen, Standardwerte von Attributen, ungenutzte Definitionen und Stile, die kürzer sein könnten.
• Lange Pfadsyntax. Absolute Befehle, wo relative kürzer wären, wiederholte Befehlsbuchstaben, unnötige Leerzeichen.
• Eingebettete Bitmaps. Ein in eine Illustration eingefügtes Foto wird als Base64-Text im SVG gespeichert und ist damit etwa ein Drittel größer als die ursprüngliche Bilddatei.

So optimiert das Tool SVG

Das Tool führt SVGO, den weit verbreiteten Open-Source-Optimierer für SVG, in Ihrem Browser aus. Er entfernt Metadaten und Kommentare, löst nutzlose Gruppen auf, kürzt Pfaddaten, rundet Zahlen standardmäßig auf 3 Nachkommastellen (wählbar sind 0 bis 6) und fasst Stile zusammen; die Durchläufe werden wiederholt, bis sich nichts mehr ändert. Das Ergebnis ist weiterhin ein normales SVG, das Sie in jedem Programm öffnen oder in HTML einfügen können. In unseren Tests mit acht SVGs, von handoptimierten Icons bis zu einem Inkscape-Export voller Programmdaten, lag die Ersparnis zwischen 8 % und 42 %.

Streng genommen ist die Optimierung verlustbehaftet: Das Runden verschiebt Koordinaten um winzige Beträge, und programmspezifische Daten gehen verloren, sodass Sie die Datei nicht mehr mit allen ursprünglichen Ebenen öffnen können. Behalten Sie die Quelldatei aus Ihrem Designprogramm und betrachten Sie das optimierte SVG als veröffentlichte Fassung.

Server liefern SVG meist mit gzip- oder Brotli-Komprimierung aus, die den Text auf dem Weg zum Browser noch einmal verkleinert. Optimierung und Serverkomprimierung ergänzen sich, denn entfernte Daten müssen gar nicht erst komprimiert werden.

Wenn ein optimiertes SVG nicht mehr funktioniert

• CSS oder JavaScript findet ein Element nicht mehr. Optimierer kürzen oder entfernen IDs und Klassennamen, die innerhalb der Datei ungenutzt wirken. Wenn Stile oder Skripte Ihrer Seite darauf zugreifen, prüfen Sie das Ergebnis vor der Veröffentlichung.
• Das Icon skaliert nicht mehr. Ein SVG braucht sein viewBox-Attribut, um sich richtig zu skalieren. Das Tool behält es bei; prüfen Sie also, ob das Original eines hatte. Ein SVG mit nur fester Breite und Höhe hat sich nie gut skalieren lassen.
• Winzige Formen wirken verzerrt. Sehr kleine Icons, die auf einer großen Zeichenfläche gezeichnet wurden, können unter dem Runden leiden. Mit der Standardgenauigkeit ist das selten.
• Die Datei besteht größtenteils aus einem eingebetteten Foto. Exportieren Sie das Foto als separates JPG oder WebP und verlinken Sie es, oder wandeln Sie die ganze Grafik in eine Bitmap um.

Fragen zu SVG

Verwandte Seiten

Bitmap-Bilder verarbeitet der Bildkompressor. Hintergründe dazu, was lokal läuft und warum, finden Sie unter So funktioniert’s.