SVG Optimizer — SVG-Optimierer

Warum SVG-Dateien optimieren?

SVG-Dateien, die aus Design-Tools wie Illustrator, Figma, Sketch oder Inkscape exportiert werden, enthalten weit mehr als die sichtbaren Formen. Editor-Metadaten, XML-Kommentare, ausgeblendete Ebenen, Standardwerte von Attributen, ungenutzte Definitionen, überflüssige Nachkommastellen und redundante Gruppen machen schnell die Hälfte der Datei aus. Dieses Tool nutzt SVGO – denselben Optimierer, der in den meisten Build-Pipelines und Icon-Bibliotheken zum Einsatz kommt –, um diesen Ballast zu entfernen. Kleinere SVGs laden schneller, machen Inline-Icons in deinem HTML schlanker und halten Repositories aufgeräumt.

Das Standard-Preset wendet Dutzende sicherer Transformationen an: Es entfernt die XML-Deklaration, Kommentare, Metadaten und Editor-Namespaces, bereinigt IDs, kürzt Farbangaben, führt Pfade zusammen, wandelt Grundformen in kompakte Pfade um, wenn diese kürzer sind, und schreibt Pfaddaten mit relativen Befehlen und weniger Ziffern neu. Multipass wiederholt den Vorgang, bis keine weiteren Einsparungen mehr möglich sind, und holt so oft noch ein paar Prozent zusätzlich heraus.

Die richtigen Optionen wählen

Precision (Genauigkeit) legt fest, wie viele Nachkommastellen in Zahlen erhalten bleiben; 2–3 reichen für Icons, detaillierte Illustrationen oder Karten brauchen eventuell mehr. Remove <title> spart Bytes, entfernt aber den barrierefreien Namen – behalte ihn also bei inhaltlich bedeutsamen Grafiken. Remove viewBox sollte in der Regel ausgeschaltet bleiben, denn erst die viewBox ermöglicht es einem SVG, responsiv zu skalieren. Remove width/height ist nützlich, wenn die Größe per CSS gesteuert wird. Remove scripts & event handlers entfernt <script>-Elemente, on*-Attribute und javascript:-Links – eine gute Angewohnheit bei SVGs aus unbekannten Quellen. Pretty print rückt das Ergebnis zur besseren Lesbarkeit ein und kostet dafür ein paar Bytes.

Private, lokale und sichere Vorschauen

Die gesamte Verarbeitung findet in deinem Browser statt; es werden keine Dateien hochgeladen. Beide Vorschauen werden über ein Bildelement angezeigt, das eine lokale Blob-URL lädt, und Browser führen Skripte in so dargestellten SVGs niemals aus. Vergleiche vor der Verwendung immer beide Vorschauen: Eine zu aggressive Genauigkeit oder das Entfernen der viewBox kann die Darstellung einer Grafik verändern. Die Größenanzeigen zeigen die eingesparten Bytes, sodass du Dateigröße und visuelle Treue gegeneinander abwägen kannst.