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

Bei einem 24×24-Icon mit Metadaten und überpräzisen Pfaden liefern die drei Presets unterschiedliche Gewinne. Exakte Zahlen variieren — das Tool zeigt Bytes vorher/nachher und gesparte Prozent.

Ein manuell minifiziertes oder mehrfach durch SVGO gelaufenes SVG kann konvergieren: safe ≈ default ≈ aggressive. Dann reicht Whitespace-Minify — aggressive erneut ist unnötig.

SVGO aggressive kann Downstream-Workflows brechen: SMIL/CSS-Animationen mit ID-Bezug, eingebettete Skripte, komplexe Filter oder `<use href="#id">`. Dann bei safe bleiben oder manuell optimieren.

In Produktion Preset in der Pipeline festlegen (svgo npm, Vite/Webpack-Plugin) und mit dem Browser-Validieren abstimmen. Siehe auch den Artikel Minifizierung in CI/CD für breitere Automatisierung.

Das richtige Preset hängt vom Asset-Typ und Ihrer Toleranz für visuelles Risiko ab — nicht allein vom Prozentsatz.

Druck schrittweise erhöhen statt mit aggressive zu starten.

Kein SVGO-Install nötig, um drei Presets an einer per E-Mail erhaltenen Datei zu vergleichen.

Das Online-Tool eignet sich zum Erkunden und Validieren eines Presets. Batch über hunderte SVG, Pre-commit-Integration und custom Plugin-Config bleiben Sache von SVGO npm oder Bundler-Plugins.

Nach Preset-Wahl im Tool dieselbe Logik (safe/default/aggressive) in `svgo.config.js` reproduzieren, um Drift zwischen Preview und Build zu vermeiden.

FastMinify bietet drei opinionierte Presets. Upstream-SVGO erlaubt Plugin-Granularität — nützlich bei sehr spezifischen Teamregeln.

Schnelles Minify zielt auf syntaktisches Rauschen (Leerzeichen, Kommentare, offensichtliche redundante Attribute). SVGO-Optimierung strukturiert das Markup um: Pfadvereinfachung, Formzusammenführung, ID-Bereinigung — mit möglichem visuellem Einfluss bei zu aggressivem Vorgehen.

Das <strong>safe</strong>-Preset führt SVGO in einem Durchlauf aus (<code>multipass: false</code>) und deaktiviert strukturelle Transformationen: kein Pfad-Merging, keine Shape→Path-Konvertierung, kein ID-Cleanup, kein Entfernen versteckter Elemente. Ideal für Kundenlogos, Illustrationen mit benannten Ebenen oder animierte SVG.

Das <strong>default</strong>-Preset aktiviert <code>multipass: true</code> und lässt SVGO preset-default mit viewBox/title/desc-Schutz anwenden. Das ist der Alltagsmodus für UI-Icons, Piktogramme und Marketing-Assets nach visueller Prüfung.

Das <strong>aggressive</strong>-Preset setzt <code>floatPrecision: 1</code>, erzwingt <code>mergePaths</code> und verstärkt <code>convertPathData</code>. Die Größe sinkt oft weiter, aber feine Details (Kurven, Ecken) können leicht verschieben. Reservieren Sie es für einfache Icons, Sprites oder SVG ohne Animation oder CSS/JS-ID-Abhängigkeiten.

SVG einfügen, Preset im Optionspanel wählen, Ausgabe und Statistik vergleichen. Das Online optimize SVG-Tool läuft vollständig im Browser — nichts wird an einen Server gesendet.

Für reine Whitespace-Bereinigung ohne Pfadänderung ist der SVG-Minifier schneller. Minify dann optimize default verketten, wenn Sie beide Durchläufe wollen.

Informative Icons sollten title und desc behalten — FastMinify erhält sie bei allen drei Presets. Für a11y-Struktur nutzen Sie validate SVG online vor der Auslieferung.