Réduire la taille d'un SVG sans le casser

Un SVG exporté depuis un logiciel de design est surtout fait de texte que le navigateur jette : métadonnées de l’éditeur, commentaires et coordonnées écrites avec six décimales. Supprimer tout cela ne pose aucun risque. Le problème, c’est que deux des réglages qui allègent le plus sûrement un fichier le cassent aussi, et un nombre d’octets ne peut pas vous dire lequel des deux s’est produit.

Optimiser un SVG avec l’outil

1. Ouvrez le SVG optimiser. Collez votre code dans la zone intitulée SVG markup (code SVG), appuyez sur Open SVG files (ouvrir des fichiers SVG) en dessous, ou déposez des fichiers SVG n’importe où sur la page ; plusieurs fichiers sont optimisés ensemble, chacun sur sa carte. La zone contient au départ une petite icône d’exemple, et sa ligne de décompte indique combien de caractères et de lignes elle contient.
2. Il n’y a aucun bouton à presser : chaque fichier est réoptimisé dès que vous modifiez son texte ou un réglage. Lisez les chiffres de Result (résultat) : Before (avant), After (après), Saved (gagné) et Gzipped (en gzip, avant → après, « which is what ships », ce qui est réellement servi). La carte de chaque fichier montre son propre avant et après.
3. Déplacez Coordinate precision (précision des coordonnées). Le curseur va de 0 à 6 décimales et démarre à 3. En dessous de 2, un avertissement apparaît sous le curseur.
4. Laissez Run repeatedly until it stops shrinking (relancer jusqu’à ce que le fichier ne rétrécisse plus) coché. Il est activé par défaut et répète l’optimisation jusqu’à ce qu’un passage ne fasse plus rien gagner.
5. Ouvrez More options (plus d’options) pour voir Options that can break the file (options qui peuvent casser le fichier) : Remove viewBox, Remove <title> et Shorten and drop unused ids. Chacune est décochée, et chacune indique sous son nom ce qu’elle coûte. La ligne sous More options dit lesquelles sont activées, et Result les nomme même quand le groupe est fermé.
6. Comparez les deux aperçus rendus, intitulés Original et Optimised. S’ils diffèrent, c’est le dernier réglage que vous avez modifié qui en est la cause.
7. Appuyez sur Download optimised SVG (ou la touche D) pour enregistrer le résultat, sous le nom optimised.svg pour du code collé ou logo-optimised.svg pour un fichier nommé logo.svg, ou sur Copy SVG code (copier le code SVG, ou la touche C). Avec plusieurs fichiers, All 3 as .zip les enregistre ensemble.

Ce que supprime chaque réglage, et ce qu’il peut casser

Réglage	Valeur de départ	Ce qu’il fait gagner	Ce qu’il peut casser
Commentaires, métadonnées de l’éditeur, définitions inutilisées	Toujours actif	Les octets faciles de tout export de logiciel de design	Rien de visible
Précision des coordonnées	3 décimales	L’essentiel du gain sur un export typique	Les courbes, en dessous de 2 décimales
Relancer en boucle	Activé	Ce qu’un seul passage a laissé	Rien
Remove viewBox	Décoché	Très peu d’octets	Le redimensionnement
Remove <title>	Décoché	Le texte du titre	Le nom accessible
Shorten and drop unused ids	Décoché	Les chaînes d’id	Le CSS externe, les scripts et les références <use> depuis d’autres documents

C’est dans la précision que se trouvent les octets

La précision des coordonnées est le nombre de décimales conservées pour chaque nombre du fichier. Les logiciels de design en écrivent couramment six ou plus, et aucun écran ne peut afficher la différence.

L’exemple de l’outil montre l’ampleur du phénomène. Sa coche est dessinée par ce tracé :

M 16.000000 24.000000 L 22.000000 30.000000 L 32.000000 14.000000

Cette chaîne fait 65 caractères. Chacune de ses six coordonnées porte un point décimal et six zéros : 6 × 7 = 42 de ces 65 caractères ne disent donc rien du tout. Quand les derniers chiffres ne sont pas des zéros, dans une icône dessinée à sa taille prévue, ils décrivent encore une différence bien inférieure à un pixel, et c’est ce que le curseur élague : trois décimales comme point de départ, deux conviennent généralement pour une icône, et en dessous de deux les courbes se déforment visiblement. L’aperçu côte à côte est là pour que vous voyiez cela se produire au lieu de vous fier à un pourcentage.

Les deux réglages qui cassent les fichiers

Un viewBox est l’attribut qui fait correspondre les coordonnées internes d’un dessin à la boîte dans laquelle le SVG est affiché. C’est lui qui permet à un même fichier de s’adapter à n’importe quelle taille. Supprimez-le, et le SVG est figé sur ses attributs width et height : il ne remplira plus un conteneur et ne réagira plus au dimensionnement CSS. C’est la façon la plus courante dont une icône optimisée se retrouve à la mauvaise taille en production, et le réglage ne fait gagner que très peu d’octets en échange.

L’élément <title> est ce qui permet à un lecteur d’écran de nommer un SVG. Supprimez-le, et un graphique informatif n’est plus annoncé du tout. On ne peut le retirer sans risque que d’une icône purement décorative, déjà masquée aux technologies d’assistance avec aria-hidden.

SVGO, le moteur qu’exécute l’outil, a retiré ces deux opérations de son préréglage par défaut dans sa version 4, précisément pour ces raisons. Si vous comparez la sortie de l’outil à celle d’un optimiseur plus ancien et que celle-ci est un peu plus lourde, un viewBox et un title conservés expliquent presque toujours la différence. Le fichier le plus léger était le fichier cassé.

Vérifiez vos ids à la main

Les ids sont le risque le plus discret. Si quoi que ce soit hors du SVG fait référence à un id qu’il contient (une feuille de style, un script, ou un élément <use> d’un autre document qui pointe vers une planche de sprites), raccourcir ou supprimer cet id casse la référence sans aucun changement visible dans l’aperçu, car l’aperçu montre le fichier isolément.

Laissez donc Shorten and drop unused ids décoché pour tout fichier vers lequel un autre fichier pointe, et ne le cochez que pour une icône autonome, dont rien d’extérieur ne dépend. Pour une planche de sprites, les ids sont toute l’interface.

Cette case n’a pas toujours fait ce qu’elle annonçait. En rédigeant ce guide, nous avons découvert que SVGO 4.1, la version qu’exécute l’outil, inclut toujours son nettoyage des ids dans le préréglage par défaut : les ids étaient donc raccourcis ou supprimés même case décochée. L’outil désactive désormais explicitement ce nettoyage quand la case est décochée, et un test dans le code du site vérifie les deux sens. Si vous avez optimisé une planche de sprites ici avant octobre 2026, cherchez dans le résultat les ids dont votre site dépend.

Les octets bruts exagèrent le gain

Les serveurs compressent le SVG pendant le transfert, et la compression gère déjà les répétitions. Deux résultats qui semblent très éloignés sans compression se rapprochent souvent nettement une fois passés en gzip, c’est pourquoi l’outil affiche les chiffres gzip à côté des chiffres bruts. Si un réglage risqué fait gagner beaucoup en brut et presque rien en gzip, prenez le fichier le plus sûr.

Les autres méthodes

SVGO s’exécute aussi en ligne de commande :

npx svgo input.svg -o output.svg

Cette commande utilise le préréglage par défaut de SVGO. À partir de la version 4, ce préréglage conserve viewBox et l’élément title, comme l’outil. Pour la précision et les autres réglages, reportez-vous à la documentation de SVGO. Ni macOS ni Windows n’intègrent d’optimiseur SVG.

Vérifier que rien n’a été envoyé

SVGO s’exécute dans l’onglet. La première fois que la page optimise quelque chose, ce qui se produit dès le chargement de l’exemple, votre navigateur télécharge le code de SVGO lui-même, environ 195 Ko en gzip ; c’est la seule requête que vous verrez dans le panneau Network des outils de développement, et elle entre au lieu de sortir. Ensuite, vous pouvez couper la connexion, coller votre propre fichier, et l’outil continue de fonctionner.

Et ensuite

Collez votre fichier dans le SVG optimiser, descendez la précision à deux et comparez les aperçus. Si le SVG est un logo destiné à devenir un favicon, le Favicon generator l’accepte directement. Si vous comptez l’intégrer dans du CSS, le Data URI converter vous dit si cela en vaut la peine.