Optimiseur SVG
Optimisez et minifiez vos fichiers SVG en ligne avec SVGO, dans le navigateur. Préréglages, comparaison visuelle et gain de poids, gzip compris.
Plugins
Supprimer le viewBox empêche le dessin de s’adapter à sa taille, et raccourcir ou supprimer les ID casse le CSS, le JavaScript, les <use> ou les liens d’ancre qui y font référence. Gardez le préréglage Prudent pour les SVG utilisés dans du code, des sprites ou des animations.
- Taille d’origine
- Taille optimisée
- Gain
- Compressé gzip
Comment optimiser un fichier SVG
- Déposez un fichier SVG dans la zone prévue ou cliquez pour le choisir. Vous pouvez aussi coller le code dans le champ Code SVG.
- Choisissez un Préréglage : Prudent, Équilibré (par défaut) ou Maximal. La liste Plugins juste en dessous montre précisément ce que chaque préréglage active.
- Ajustez si besoin la Précision décimale (de 0 à 8 chiffres), l’option Plusieurs passes et Code indenté (lisible) si vous voulez un code facile à relire. Dès que vous modifiez un plugin, la précision ou les passes, le préréglage devient Personnalisé.
- Cliquez sur Optimiser le SVG. Un fichier déposé est optimisé immédiatement, et une fois un premier résultat obtenu, chaque changement de réglage relance l’optimisation.
- Consultez la Taille d’origine, la Taille optimisée, le Gain et la ligne Compressé gzip, puis comparez les deux rendus côte à côte.
- Cliquez sur Copier pour récupérer le Code SVG optimisé, ou sur Télécharger le SVG optimisé pour l’enregistrer sous le nom
nom.min.svg.
L’optimisation est confiée à SVGO 4, l’optimiseur SVG libre (licence MIT) utilisé par la plupart des outils de build web. Sa version navigateur est chargée au premier clic, puis tout se passe sur votre appareil : votre SVG n’est jamais envoyé.
Pourquoi les SVG exportés sont-ils si lourds ?
Un SVG issu d’Illustrator, d’Inkscape, de Figma ou de Sketch contient bien plus que le dessin. Le logiciel y ajoute ses propres espaces de noms et attributs (noms de calques, repères, paramètres d’export), un bloc <metadata>, des commentaires du type « Generator: Adobe Illustrator », des coordonnées à six décimales ou plus, des groupes qui n’entourent qu’un seul élément et des couleurs verbeuses comme #ffffff. Rien de tout cela ne change l’affichage. SVGO le supprime, arrondit les nombres, réécrit les tracés avec des commandes plus courtes, raccourcit les couleurs et fusionne ou déballe les éléments superflus. Une réduction de 40 à 60 % est courante sur des icônes et illustrations exportées.
Les préréglages et les plugins à risque
- Prudent applique le préréglage par défaut de SVGO mais conserve les ID, les
<desc>, les tracés séparés et les règles<style>, avec 3 décimales et une seule passe. C’est le bon choix pour les SVG ciblés par du CSS ou du JavaScript, les sprites et les animations. - Équilibré correspond au préréglage par défaut de SVGO, avec 3 décimales et plusieurs passes. Il convient à la plupart des icônes et illustrations affichées comme images.
- Maximal ajoute Supprimer
, Supprimer les scripts et attributs d’événement, Supprimer width/height (garder le viewBox) et Remplacer xlink:href par href, avec 2 décimales et plusieurs passes.
Aucun préréglage ne supprime le viewBox. Supprimer le viewBox n’est là que pour des cas particuliers : sans lui, le dessin ne s’adapte plus à la taille que vous lui donnez en CSS.
Sachez ce que les autres plugins peuvent casser :
- Raccourcir et supprimer les ID inutilisés renomme par exemple
#icone-accueilena. Tout sélecteur CSS, requête JavaScript, référence de sprite<use href="#…">, lien d’ancre ou animation SMIL/CSS qui visait l’ancien nom cesse de fonctionner. - Supprimer
et Supprimer effacent le nom et la description accessibles. Gardez-les sur les icônes porteuses de sens et les graphiques que les lecteurs d’écran doivent annoncer. - Une Précision décimale trop faible peut déformer les petites icônes : courbes qui ondulent, bords qui se décalent. Vérifiez toujours la comparaison visuelle ; 3 est une valeur sûre.
- Fusionner les tracés regroupe des tracés voisins en un seul : un effet de survol ou une animation qui ciblait un tracé précis perd sa cible.
Conseils
- Conservez une version maîtresse non optimisée pour les retouches, et traitez le
.min.svgcomme du code compilé. - Activez gzip ou brotli sur votre serveur : le SVG, format texte, se compresse très bien, et la valeur Compressé gzip indique ce que vos visiteurs téléchargent réellement (affichée si votre navigateur prend en charge
CompressionStream). - Un SVG intégré dans le HTML se stylise et s’anime en CSS mais n’est pas mis en cache à part ; un SVG en
<img>est mis en cache mais ne peut pas être stylisé depuis la page.
Questions fréquentes
Mon SVG est-il envoyé sur un serveur ?
Non. SVGO s’exécute dans votre navigateur. Le seul téléchargement est celui du code de l’optimiseur, lors de la première optimisation.
Pourquoi l’aperçu est-il affiché sous forme d’images ?
Le SVG est un format de document qui peut contenir du JavaScript et charger des fichiers externes. Les deux aperçus sont rendus en <img> à partir d’URL blob locales : dans ce mode, le navigateur n’exécute aucun script et ne charge aucune ressource externe. Prévisualiser un SVG douteux ici est donc sans danger. Le code optimisé, lui, garde ses scripts, sauf si Supprimer les scripts et attributs d’événement est coché (c’est le cas avec Maximal).
Mon SVG optimisé ne se redimensionne plus : que s’est-il passé ?
Le viewBox a sans doute disparu, soit avec Supprimer le viewBox, soit plus tôt, à cause d’un autre outil. Réoptimisez l’original avec ce plugin désactivé.
Pourquoi mon sprite d’icônes ou mon animation ne fonctionne-t-il plus ?
Raccourcir et supprimer les ID inutilisés ou Fusionner les tracés a modifié les éléments auxquels votre code fait référence. Utilisez le préréglage Prudent, qui conserve les deux.
Le fichier optimisé n’est pas plus petit : pourquoi ?
Le SVG est probablement déjà minifié. Essayez Maximal ou une Précision décimale plus faible, et décochez Code indenté (lisible).
Outils similaires
- SVG en PNG Convertissez un SVG en PNG, JPG ou WebP dans votre navigateur, à la taille, l'échelle ou la résolution voulue, avec fond transparent ou coloré. Sans envoi.
- Vectoriser une image en SVG Vectorisez un logo ou un dessin PNG ou JPG en tracés SVG dans votre navigateur. Préréglages, nombre de couleurs, filtre des taches, sans envoi de fichier.
- Compresser une image Compressez vos images JPG, PNG et WebP avec un curseur de qualité, comparez le poids avant et après et traitez vos photos par lot, sans envoi.
- Formateur et minificateur CSS Indentez proprement un CSS désordonné ou minifiez-le avec csso, en voyant la taille avant et après. Tout se passe dans votre navigateur.