SVGO presets expliqués : optimiser un SVG sans casser le rendu
Safe, default ou aggressive ? Choisissez le bon preset SVGO, optimisez vos SVG pour la prod et évitez les régressions visuelles.
Pourquoi les presets SVGO comptent
Un export Figma ou Illustrator produit souvent un SVG verbeux : métadonnées d'éditeur, précision décimale excessive, IDs redondants. Le minificateur SVG en ligne retire les espaces et les commentaires, ce qui convient à un nettoyage rapide. L'optimiseur SVG (SVGO) va plus loin avec trois préréglages, safe, default et aggressive, qui activent ou désactivent des plugins SVGO selon le risque visuel. Tout se passe dans le navigateur sur le hub outils SVG. Pour le panorama général, voir aussi le guide complet d'optimisation SVG.
Impact réel sur la taille
Sur une icône 24×24 avec métadonnées et paths trop précis, les trois préréglages n'économisent pas la même chose. Les chiffres exacts varient selon le fichier, et l'outil affiche les octets avant et après et le pourcentage économisé. Les chiffres cités servent d'illustration.
Avant optimisation
- Taille des fichiers
- ~4,2 Ko
Après optimisation
- Taille des fichiers
- safe ~3,4 Ko · default ~2,1 Ko · aggressive ~1,6 Ko
Un SVG déjà minifié à la main ou passé plusieurs fois dans SVGO peut converger : safe ≈ default ≈ aggressive. Dans ce cas, le minify des espaces suffit, inutile de repasser en aggressive.
Bonnes pratiques et pièges
Les préréglages default et aggressive peuvent casser des chaînes en aval, car cleanupIds peut supprimer ou raccourcir des IDs : sélecteurs CSS ou JS, références de sprite comme `sprite.svg#icon`, animations SMIL liées à des IDs. Le préréglage aggressive fusionne en plus les paths et arrondit plus fort les coordonnées, ce qui peut toucher les formes complexes et les filtres. Dans ces cas, restez sur safe ou optimisez à la main.
En production, figez le préréglage 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.
Tableau comparatif des préréglages
Le bon préréglage dépend du type d'asset et de votre tolérance au risque visuel, pas du seul pourcentage affiché.
Préréglage
Quand l'utiliser
Montez en pression progressivement plutôt que de démarrer en aggressive.
Quand l'outil navigateur suffit
Pas besoin d'installer SVGO pour comparer trois préréglages sur un fichier reçu par e-mail.
Limites de SVGO en CLI et en CI
L'outil en ligne convient pour explorer et valider un préréglage. Le traitement par lot de centaines de SVG, l'intégration pre-commit et la configuration de plugins sur mesure restent du ressort de SVGO npm ou de plugins de 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.
SVGO CLI et écosystème
FastMinify propose trois préréglages tranchés. SVGO en amont offre une granularité plugin par plugin, utile quand vous avez des règles d'équipe très spécifiques.
svgo (npm CLI)
La ligne de commande SVGO de référence, avec le même moteur que l'optimiseur du navigateur FastMinify.
Avantages :
Inconvénients :
vite-plugin-svgo / bundler plugins
Optimisation à l'import, pratique pour les composants React/Vue.
Avantages :
Inconvénients :
minify-svg FastMinify
Nettoyage rapide des espaces, sans restructuration SVGO profonde.
Avantages :
Inconvénients :
Minifier le SVG ou l'optimiser avec SVGO
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 préréglage safe exécute SVGO en une seule passe (multipass: false) et désactive les transformations structurelles : pas de fusion de paths, pas de conversion forme vers path, pas de nettoyage d'IDs, pas de suppression d'éléments cachés. Il convient aux logos clients, aux illustrations avec calques nommés et aux SVG animés.
Le préréglage default active multipass: true et laisse SVGO appliquer preset-default avec les garde-fous viewBox, title et desc. C'est le choix quotidien pour les icônes d'interface, les pictogrammes et les assets marketing après une revue visuelle.
Le préréglage aggressive ajoute floatPrecision: 1, force mergePaths et renforce convertPathData. 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 dans le CSS ou le JS.
Utiliser l'optimiseur SVGO FastMinify
Collez votre SVG, choisissez le préréglage dans le panneau d'options, lancez Optimiser, puis comparez la sortie et les statistiques. L'outil optimize SVG en ligne tourne entièrement dans le navigateur, et rien n'est envoyé à un serveur.
Pour un nettoyage limité aux espaces, sans toucher aux paths, le minificateur SVG reste plus rapide. Enchaînez minify puis optimize avec default si vous voulez les deux passes.
Les icônes informatives devraient garder title et desc, et FastMinify les préserve sur les trois préréglages. Pour valider la structure d'accessibilité, utilisez validate SVG en ligne avant la livraison.
Conclusion
Les préréglages SVGO traduisent un compromis entre taille et risque visuel. Commencez par safe sur les assets sensibles, adoptez default pour le flux quotidien et réservez aggressive aux icônes simples où chaque octet compte. FastMinify vous permet de comparer les trois modes localement avant de figer la configuration en CI.
Optimisez votre SVG maintenant
Articles connexes
HTTP/2 et HTTP/3 changent le trajet des fichiers, pas leur poids. Mesures de taille, de compilation et de bundling : ce que la minification apporte encore.
Convertissez un epoch Unix en date lisible et inversement, distinguez secondes et millisecondes, et évitez les pièges de fuseau, de JWT et de changement d’heure.
Lisez une expression cron champ par champ, voyez ses prochaines exécutions en UTC ou en heure locale et évitez les pièges de pas, de fuseau et de dialecte.