So nutzt du: SVG Optimierer
- Füge SVG-Code ein oder öffne eine
.svg-Datei. - Behalte die Standardeinstellungen für die beste Ersparnis oder senke die Genauigkeit für noch kleinere Pfade.
- Vergleiche die Vorschauen von Original und Optimierung, um sicherzugehen, dass sich nichts verschoben hat.
- Kopiere den optimierten Code oder lade die
.svgherunter.
Warum SVG-Dateien optimieren?
SVGs aus Design-Tools enthalten oft viel Ballast: Editor-Metadaten, Kommentare, versteckte Ebenen, Standardwerte für Attribute, leere Gruppen und Koordinaten mit sechs Nachkommastellen. Auf das Aussehen des Bildes hat das keinen Einfluss, die Datei kann aber zwei- bis fünfmal größer sein als nötig. Inline eingebundene SVG-Icons blähen so jede Seite auf.
Was SVGO macht
SVGO ist der Standard-SVG-Optimierer, den die meisten Build-Tools verwenden. Er führt eine Reihe sicherer Plugins aus:
- Entfernt die XML-Deklaration, Kommentare,
<metadata>, Editor-Namespaces (Illustrator, Inkscape, Sketch) und versteckte Elemente. - Löst unnötige Gruppen auf, führt Pfade wo möglich zusammen und wandelt Formen in kürzere Pfaddaten um.
- Rundet Zahlen auf die gewählte Genauigkeit und schreibt Pfadbefehle in ihrer kürzesten Form.
- Minifiziert Inline-Styles und Farben (
#FFFFFF→#fff) und entfernt Standardwerte. - Kürzt IDs und entfernt die, auf die nichts verweist.
Dieses Tool behält immer das viewBox-Attribut bei, denn es wird benötigt, damit SVGs korrekt skalieren.
Die richtige Genauigkeit wählen
| Genauigkeit | Ideal für |
|---|---|
| 1 | Einfache Icons, die auf einem Pixelraster gezeichnet sind |
| 2–3 | Die meisten Icons, Logos und Illustrationen (Standard: 3) |
| 4–5 | Detaillierte Illustrationen, Karten und Diagramme mit feinen Kurven |
Eine geringere Genauigkeit bedeutet weniger Stellen und kleinere Dateien, Kurven können sich aber leicht verschieben. Genau dafür gibt es die Vorschau.
Breite, Höhe und viewBox
Wenn du width und height entfernst, lässt sich das SVG per CSS an seinen Container anpassen. Das ist bei Icons und Inline-SVG meist gewünscht. Behalte beide Attribute, wenn das SVG in einem <img> ohne feste Maße verwendet wird.
Nächste Schritte: Verwandle das optimierte SVG in einen CSS-Hintergrund, eine React-Komponente oder ein Webflow-Element.
Auch gesucht als: svgo online, svg komprimieren, svg minifier, svg optimieren, svg verkleinern, svg kompressor, svg dateigröße reduzieren.
Passende Tools zu: SVG Optimierer
- SVG ViewBox Skalierer — Icons auf eine neue viewBox (z.
- Bildkompressor — Verkleinere Fotos und Grafiken um 50–90 % ohne sichtbaren Qualitätsverlust.
- Gzip komprimieren & entpacken — Komprimiere Text oder beliebige Dateien mit Gzip, Zlib oder Raw Deflate – oder füge Base64 ein bzw.
- Brotli Komprimieren & Dekomprimieren — Komprimiere Text oder Dateien mit Brotli in jeder Qualität von 0 bis 11, dekomprimiere .br-Daten und vergleiche das Ergebnis mit gzip — alles lokal in deinem Browser.