Warum braucht SVG Optimierung?
SVG, das aus Figma, Illustrator oder Inkscape exportiert wird, ist oft 5-10x größer, als es sein müsste. Sie ergänzen Stapel an Metadaten (`<metadata>`, `<title>`, den Editor, der das File erzeugt hat), lange Klassennamen, Default-Attribute (`fill="black"` obwohl das der Default ist), Koordinaten mit 15 Nachkommastellen (`d="M12.345678901234567,5.987654321"`) und Editor-Kommentare.
Der Optimierer strippt alles Überflüssige, ohne dass sich das Rendering ändert. Eine 12-KB-Datei wird 2 KB. Weniger zu laden, schnellerer FCP, kleineres Bundle.
SVG pasten, Optionen wählen (was strippen, auf wie viele Dezimalstellen runden), das Side-by-Side-Visual prüfen, dass nichts kaputt ging, Ergebnis kopieren oder runterladen. Alles läuft im Browser - die Datei verlässt nichts.
So nutzt du das Tool
- SVG-Code ins linke Panel pasten oder "Upload file" klicken, um von der Disk zu laden.
- Rechts siehst du die optimierte Version. Drunter: ein Before/After-Visual-Vergleich - sollten identisch aussehen.
- In der Optionen-Section: anklicken, was gestrippt werden soll. Defaults sind aggressiv (max. Ersparnis).
- Der Precision-Slider steuert Nachkommastellen für Paths. 2 reicht für die meisten Icons, 4 für Präzisionsgrafik.
- "Copy" drücken für Clipboard oder "Download" zum Speichern als Datei.
Wann das hilft
Typische Situationen, in denen SVG-Cleanup sich auszahlt:
- Icons in einer App. Du exportierst 50 Icons aus Figma, jedes 3 KB - nach Optimierung 400 Bytes. Das sind 150 KB weniger im Bundle.
- Logo auf der Homepage. Ein Illustrator-Export hat oft 30-50 KB Metadaten. Nach Cleanup sind es 3 KB - bessere Performance.
- SVG-Backgrounds. Ein Hero-Pattern muss leicht sein, weil es above-the-fold rendert.
- Inline-SVG in einer React-Komponente. Weniger Code, leichter zu lesen. Vor dem Pasten in eine Komponente optimieren.
- SVG-Sprite. Hunderte Icons in einem File - jedes Byte zählt.
- Email. SVG in Emails (wo unterstützt) profitiert stark von Minifizierung.
- CSS-in-JS. Inline-SVG als String in einer TypeScript-Datei muss kurz bleiben.
Nächster Schritt: SVG zu einer React-Komponente umbauen mit SVG zu Komponente. Für Raster-Bilder schau den Bild-Komprimierer.