SVGO presets expliqués : optimiser un SVG sans casser le rendu

Sur une icône 24×24 avec métadonnées et paths sur-précis, les trois presets produisent des gains différents. Les chiffres exacts varient selon le fichier — l'outil affiche before/after bytes et pourcentage économisé.

Un SVG déjà minifié manuellement ou passé plusieurs fois en SVGO peut converger : safe ≈ default ≈ aggressive. Dans ce cas, le minify whitespace suffit — pas besoin de repasser en aggressive.

SVGO aggressive peut casser des workflows downstream : animations SMIL/CSS keyed on IDs, scripts embarqués, filtres complexes ou `<use href="#id">`. Dans ces cas, restez sur safe ou optimisez manuellement.

En production, figez le preset dans votre pipeline (svgo npm, plugin Vite/Webpack) et alignez-le sur ce que vous validez dans le navigateur. Voir aussi l'article minification en CI/CD pour l'automatisation globale.

Le bon preset dépend du type d'asset et de votre tolérance au risque visuel — pas du seul pourcentage affiché.

Montez en pression progressivement plutôt que de démarrer en aggressive.

Pas besoin d'installer SVGO pour comparer trois presets sur un fichier reçu par email.

L'outil en ligne est idéal pour explorer et valider un preset. Le batch sur des centaines de SVG, l'intégration pre-commit et la config plugins custom restent du ressort de SVGO npm ou de plugins bundler.

Une fois le preset choisi dans l'outil, reproduisez la même logique (safe/default/aggressive) dans votre `svgo.config.js` pour éviter les écarts entre preview et build.

FastMinify expose trois presets opinionés. SVGO upstream offre une granularité plugin par plugin — utile quand vous avez des règles d'équipe très spécifiques.

Le minify rapide cible le bruit syntaxique (espaces, commentaires, attributs évidents). L'optimisation SVGO restructure le markup : simplification de paths, fusion de formes, nettoyage d'IDs — avec un impact visuel possible si vous poussez trop loin.

Le preset <strong>safe</strong> exécute SVGO en une seule passe (<code>multipass: false</code>) et désactive les transformations structurelles : pas de fusion de paths, pas de conversion shape→path, pas de nettoyage d'IDs, pas de suppression d'éléments cachés. Idéal pour des logos clients, des illustrations avec calques nommés ou des SVG animés.

Le preset <strong>default</strong> active <code>multipass: true</code> et laisse SVGO appliquer preset-default avec les garde-fous viewBox/title/desc. C'est le choix quotidien pour des icônes UI, des pictogrammes et des assets marketing après revue visuelle.

Le preset <strong>aggressive</strong> ajoute <code>floatPrecision: 1</code>, force <code>mergePaths</code> et renforce <code>convertPathData</code>. La taille chute souvent davantage, mais des détails fins (courbes, coins) peuvent légèrement bouger. Réservez-le aux icônes simples, aux sprites ou aux SVG sans animation ni dépendance à des IDs CSS/JS.

Collez votre SVG, choisissez le preset dans le panneau options, puis comparez la sortie et les stats. L'outil optimize SVG en ligne tourne entièrement dans le navigateur — rien n'est envoyé au serveur.

Pour un nettoyage whitespace-only sans toucher aux paths, le minificateur SVG reste plus rapide. Enchaînez minify puis optimize default si vous voulez les deux passes.

Des icônes informatives devraient garder title et desc — FastMinify les préserve sur les trois presets. Pour valider la structure a11y, utilisez validate SVG en ligne avant livraison.