SVG-Optimierer
SVG-Code verkleinern: Metadaten, Kommentare und unnötige Attribute entfernen – mit Vorher-Nachher-Größe und Vorschau.
Der SVG-Optimierer verkleinert SVG-Code: Er entfernt Kommentare, Metadaten, Editor-Daten von Inkscape oder Illustrator, leere Gruppen, unnötige IDs und Standardwerte, kürzt Farben, verdichtet Pfaddaten und rundet Zahlen. Du siehst Größe vorher und nachher, die Vorschau und einen Pixelvergleich, der prüft, ob die Darstellung unverändert bleibt. Alles läuft lokal im Browser.
Optimierungen
Warum SVGs optimieren?
Grafikprogramme speichern in SVG-Dateien viele Informationen, die der Browser nicht braucht: Kommentare, Ebenennamen, Ansichtseinstellungen, überlange Zahlen. Das macht Dateien unnötig groß. Kleinere SVGs laden schneller und lassen sich leichter in HTML oder CSS einbetten.
Was entfernt oder verkürzt wird
| Schritt | Einfluss auf die Darstellung |
|---|---|
| Kommentare, Metadaten, Editor-Daten | Keiner |
| Leere Gruppen, unbenutzte IDs | Keiner |
| Standardwerte (z. B. opacity="1") | Keiner |
| Farben kürzen (#ffffff zu #fff) | Keiner |
| Zahlen runden | Minimal, je nach Nachkommastellen |
So gehst du vor
- SVG laden und Standardoptionen belassen.
- Pixelvergleich und Vorschau prüfen.
- Ergebnis übernehmen. Für CSS nutzt du danach den SVG-zu-CSS-Konverter, Farben änderst du mit SVG-Farben ändern.
Beispiel
Ein Icon aus Inkscape mit 1,5 KB schrumpft nach dem Entfernen von Namespaces, Metadaten und langen Kommazahlen oft auf unter 500 Byte. Die Darstellung bleibt gleich, was der Pixelvergleich bestätigt. Auch für Favicons lohnt sich der Schritt vorab, siehe Favicon-Generator.
Häufige Fragen
Verändert die Optimierung mein Bild?
Die Standardoptionen entfernen nur Ballast, der keinen Einfluss auf die Darstellung hat. Nur das Runden von Zahlen kann Pfade minimal verschieben. Der Pixelvergleich rendert Original und Ergebnis und zeigt, ob und wie stark sie abweichen.
Warum bleiben title und desc standardmäßig erhalten?
Sie liefern Screenreadern eine Beschreibung der Grafik. Dekorative SVGs brauchen sie nicht, informative dagegen schon. Entferne sie nur, wenn du die Beschreibung anderswo bereitstellst.
Was sind Editor-Daten?
Zusatzinformationen, die Programme wie Inkscape, Sketch oder Illustrator in die Datei schreiben: Ansichtseinstellungen, Ebenennamen, Namespaces. Der Browser ignoriert sie, sie machen die Datei aber oft doppelt so groß.
Was ist der Unterschied zu SVGO?
SVGO ist ein umfangreiches Kommandozeilenwerkzeug mit vielen Plugins. Dieser Optimierer deckt die häufigsten und sichersten Schritte direkt im Browser ab. Für maximale Kompression komplexer Grafiken lohnt zusätzlich SVGO in der Build-Pipeline.
Wie viel spart die Optimierung?
Bei Dateien aus Grafikprogrammen oft 30 bis 70 Prozent, bei bereits handoptimierten Icons wenig. Zusätzlich komprimiert der Server SVG mit gzip oder Brotli, was den Effekt in der Praxis verstärkt.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.