SVGO-Presets erklärt: SVG optimieren ohne das Rendering zu brechen

Bei einem 24×24-Icon mit Metadaten und übermäßig genauen Pfaden liefern die drei Voreinstellungen unterschiedliche Gewinne. Die genauen Zahlen hängen von der Datei ab, das Tool zeigt Bytes vorher und nachher sowie den prozentualen Anteil der Einsparung. Die folgenden Zahlen dienen der Veranschaulichung.

Ein von Hand minifiziertes oder mehrfach durch SVGO gelaufenes SVG kann konvergieren: Sicher ≈ Standard ≈ Aggressiv. Dann reicht das Minifizieren der Leerzeichen, ein erneuter Durchlauf mit Aggressiv ist unnötig.

Die Voreinstellungen Standard und Aggressiv können nachgelagerte Abläufe brechen, weil cleanupIds IDs entfernen oder kürzen kann: CSS- oder JS-Selektoren, Sprite-Verweise wie `sprite.svg#icon`, an IDs gebundene SMIL-Animationen. Aggressiv fasst zusätzlich Pfade zusammen und rundet Koordinaten stärker, was komplexe Formen und Filter betreffen kann. Bleiben Sie in diesen Fällen bei Sicher oder optimieren Sie von Hand.

Legen Sie die Voreinstellung in der Produktion in Ihrer Pipeline fest (svgo npm, Vite-/Webpack-Plugin) und stimmen Sie sie mit dem ab, was Sie im Browser prüfen. Siehe auch den Artikel Minifizierung in CI/CD für eine breitere Automatisierung.

Die passende Voreinstellung hängt vom Asset-Typ und Ihrer Toleranz für visuelles Risiko ab, nicht allein vom Prozentsatz.

Erhöhen Sie den Druck schrittweise, statt mit aggressive zu starten.

SVGO muss nicht installiert werden, um drei Voreinstellungen an einer per E-Mail erhaltenen Datei zu vergleichen.

Das Online-Tool eignet sich zum Erkunden und Prüfen einer Voreinstellung. Stapelverarbeitung für Hunderte SVG, Pre-commit-Integration und eigene Plugin-Konfiguration bleiben Sache von SVGO npm oder Bundler-Plugins.

Haben Sie im Tool eine Voreinstellung gewählt, bilden Sie dieselbe Logik (safe/default/aggressive) in Ihrer `svgo.config.js` nach, damit Vorschau und Build nicht auseinanderlaufen.

FastMinify bietet drei vorkonfigurierte Voreinstellungen. Das ursprüngliche SVGO erlaubt Einstellungen pro Plugin, nützlich bei sehr speziellen Teamregeln.

Das schnelle Minify zielt auf syntaktisches Rauschen (Leerzeichen, Kommentare, offensichtlich redundante Attribute). Die SVGO-Optimierung baut das Markup um: Pfadvereinfachung, Zusammenführen von Formen, ID-Bereinigung, mit möglichem Einfluss auf die Darstellung, wenn man es übertreibt.

Die Voreinstellung Sicher führt SVGO in einem Durchlauf aus (multipass: false) und schaltet strukturelle Umwandlungen ab: kein Zusammenführen von Pfaden, keine Umwandlung von Formen in Pfade, keine ID-Bereinigung, kein Entfernen versteckter Elemente. Sie passt zu Kundenlogos, Illustrationen mit benannten Ebenen und animierten SVG.

Die Voreinstellung Standard aktiviert multipass: true und lässt SVGO preset-default mit Schutz für viewBox, title und desc anwenden. Sie ist die Alltagswahl für UI-Icons, Piktogramme und Marketing-Assets nach einer visuellen Prüfung.

Die Voreinstellung Aggressiv setzt floatPrecision: 1, erzwingt mergePaths und verstärkt convertPathData. Die Größe sinkt oft weiter, aber feine Details (Kurven, Ecken) können sich leicht verschieben. Reservieren Sie sie für einfache Icons, Sprites oder SVG ohne Animation und ohne ID-Abhängigkeiten in CSS oder JS.

Fügen Sie Ihr SVG ein, wählen Sie im Optionsbereich die Voreinstellung, starten Sie Optimieren und vergleichen Sie dann Ausgabe und Statistik. Das Werkzeug Online optimize SVG läuft vollständig im Browser, und es wird nichts an einen Server gesendet.

Für eine reine Bereinigung von Leerzeichen ohne Änderung der Pfade ist der SVG-Minifier schneller. Verketten Sie Minify und danach optimize mit Standard, wenn Sie beide Durchläufe wollen.

Informative Icons sollten title und desc behalten, und FastMinify erhält sie bei allen drei Voreinstellungen. Zur Prüfung der Barrierefreiheitsstruktur nutzen Sie vor der Auslieferung validate SVG online.