SVG-Optimierer
Verkleinern Sie SVG-Dateien mit SVGO – Editor-Metadaten entfernen, Koordinaten runden, Pfade zusammenführen – und prüfen Sie das Ergebnis in der Vorschau, bevor Sie es herunterladen.
Eingabe
Ergebnis
Das Ergebnis erscheint hier.SVGs, die aus Illustrator, Figma, Sketch oder Inkscape exportiert wurden, enthalten vieles, was der Browser nie nutzt: Editor-Metadaten, leere Gruppen, Standardwerte von Attributen und Koordinaten mit sechs Nachkommastellen. SVGO, der Optimierer hinter den meisten SVG-Build-Werkzeugen, entfernt all das mit seinem Plugin-Satz preset-default. Fügen Sie das Markup ein und erhalten Sie die optimierte Datei, eine gerenderte Vorschau, die bestätigt, dass sich nichts Sichtbares verändert hat, und die eingesparte Größe. SVGO 4 entfernt viewBox und <title> standardmäßig nicht mehr, da beide für Skalierung und Barrierefreiheit wichtig sind, und mit den Optionen hier entscheiden Sie selbst.
So arbeitet es
- Die Nachkommastellen legen die Genauigkeit jeder Zahl in Pfaden und Transformationen fest; 3 ist bei Icon-Größen unsichtbar, während 1 oder 0 kleine Details verzerren kann.
- Multipass führt die Plugins erneut aus, bis die Datei nicht mehr schrumpft, und erwischt so Pfade, die erst nach einem früheren Durchlauf zusammengeführt werden können.
- Das Entfernen von width und height lässt die viewBox bestehen, sodass das SVG mit seinem Container skaliert – genau das, was Sie für per CSS dimensionierte Icons wollen.
- Die Vorschau wird über ein <img>-Tag aus einer Data-URL gezeichnet, sodass ein Skript im SVG auf dieser Seite niemals ausgeführt werden kann.
Wohin Ihre Daten gehen
Nirgendwohin. Dieses Werkzeug läuft vollständig in Ihrem Browser: Der eingefügte Text wird von der Seite verarbeitet und weder an einen Server übertragen noch protokolliert.
Dieses Tool ist kostenlos und braucht kein Konto. Die Ergebnisse existieren nur in Ihrer geöffneten Seite und werden nirgends gespeichert.
Was es kostet
Dieses Werkzeug ist kostenlos, ohne Anmeldung und ohne Punkte.
Häufige Fragen
- Warum sollte ich die viewBox behalten?
- Die viewBox definiert das Koordinatensystem, das ein SVG skalierbar macht. Ohne sie wird ein SVG, dem Sie in CSS eine neue Größe geben, beschnitten statt skaliert. Ältere SVGO-Versionen entfernten sie, wann immer width und height übereinstimmten; Version 4 tut das nicht mehr, und sie zu behalten ist die richtige Voreinstellung.
- Kann die Optimierung das Aussehen meines SVG verändern?
- preset-default ist darauf ausgelegt, visuell verlustfrei zu sein, und die Vorschau lässt Sie das prüfen. Verschiebt sich doch etwas, liegt es meist an einer niedrigen Einstellung der Nachkommastellen bei einem kleinen, detailreichen Icon; erhöhen Sie sie dann auf 3 oder mehr. Auch IDs werden gekürzt, was nur zählt, wenn CSS oder JavaScript außerhalb der Datei auf sie verweist.
- Bleibt das <title>-Element erhalten?
- Ja. SVGO 4 hat removeTitle aus dem Standard-Preset genommen, weil Screenreader den Titel eines Inline-SVG vorlesen. Ist die Grafik rein dekorativ, können Sie den Titel selbst löschen und das Element dort, wo Sie es verwenden, mit aria-hidden markieren.
- Was ist mit SVGs mit eingebetteten Bildern oder Schriften?
- Eingebettete Base64-Bitmaps und Schriften bleiben, wie sie sind; SVGO optimiert das Vektor-Markup um sie herum. Eine Datei, die größtenteils aus einem eingebetteten PNG besteht, schrumpft kaum – komprimieren oder konvertieren Sie die Bitmap separat oder exportieren Sie stattdessen eine echte Rastergrafik.
Das Open Source dahinter
Dieses Werkzeug läuft auf svg/svgo, veröffentlicht unter MIT. Wer dasselbe Verhalten im eigenen Programm braucht, greift zu dieser Bibliothek.
svg/svgoAuch bekannt als
- SVG optimieren
- SVG optimieren online
- SVGO online
- SVG komprimieren
- SVG Minifier
- SVG Dateigröße reduzieren