Fichier SVG trop lourd ? 8 techniques de compression et d'optimisation
Comment compresser un fichier SVG trop lourd ? Réduire les ancres, fusionner les tracés, supprimer les métadonnées d'éditeur, abaisser la précision, compresser avec SVGO, réutiliser des symboles, maîtriser les plans de couleur et compresser le transfert : 8 techniques concrètes.
Un SVG pèse souvent plusieurs centaines de Ko, parfois plusieurs Mo : c'est généralement dû à trop d'ancres, à des tracés redondants, aux métadonnées de l'éditeur et à une précision décimale excessive. Les 8 techniques ci-dessous sont rangées de la source à la livraison, et toutes sont applicables.
1. Au niveau du tracé : moins d'ancres, des tracés fusionnés
Astuce 1 : réduire les ancres (simplifier le tracé)
Plus il y a d'ancres, plus le fichier est lourd et plus le rendu est lent. Augmentez un peu le lissage lors de la conversion pour réduire les ancres dès la source ; sur un SVG existant, utilisez « Objet → Tracé → Simplifier » d'Illustrator ou « Chemin → Simplifier » (Ctrl+L) d'Inkscape pour supprimer les ancres superflues. Dans l'outil de conversion PolySVG, le lissage et le nombre de couleurs permettent de peser en direct l'effet et le poids.
Astuce 2 : fusionner les tracés et les calques
Fusionnez en un seul les tracés qui partagent la même couleur de remplissage pour réduire les attributs répétés ; aplatissez les groupes imbriqués sans objet, supprimez les calques masqués et les éléments vides. Dans un logiciel de design, le «Fusionner » de la fenêtre des tracés ou la fusion des calques avant export fait le même travail.
2. Dans le contenu du fichier : métadonnées et précision
Astuce 3 : supprimer les métadonnées de l'éditeur
Les SVG exportés par Illustrator ou Inkscape contiennent souvent des espaces de noms, un bloc <metadata>, des commentaires et des réglages d'export qui n'influencent pas le rendu : supprimez-les à la main ou laissez SVGO les nettoyer. Gardez en revanche les balises <title> et <desc>, utiles pour l'accessibilité.
Astuce 4 : abaisser la précision décimale
Les coordonnées des tracés portent souvent 6 à 8 décimales, alors que le rendu à l'écran n'en demande que 1 ou 2. Dans la configuration SVGO, réduisez la précision des valeurs (floatPrecision) à 1 ou 2 : le poids baisse nettement, sans différence visible à l'œil. Sur les très petites icônes, évitez de trop comprimer les coordonnées au risque de déformer le graphique.
3. Automatisation : la compression en un clic par SVGO
Astuce 5 : optimiser automatiquement avec SVGO
SVGO est l'outil de référence pour l'optimisation SVG, avec des dizaines de plugins intégrés : suppression des commentaires et des métadonnées, fusion des tracés, optimisation des instructions de tracé, nettoyage des valeurs. Utilisation de base :
npx svgo input.svg -o output.svg
Un fichier typique perd 30 % à 70 % de son poids. Deux précautions : ne supprimez pas l'attribut viewBox, sinon la mise à l'échelle se dérègle ; gardez l'héritage de fill pour les icônes dont la couleur doit changer en CSS, sans figer la valeur.
Comparez avant et après optimisation la taille du fichier et la taille de transfert réelle dans les outils de développement du navigateur, afin de confirmer le gain ; ne modifiez qu'une catégorie de paramètres à la fois, pour repérer facilement l'étape en cause si le résultat devient anormal.
4. Structure et réutilisation : symbolisation et plans de couleur
Astuce 6 : réutiliser un graphique répété avec defs et use
Quand une icône apparaît plusieurs fois sur une page, définissez-la une fois avec <defs> et référencez-la avec <use>, ou assemblez une planche de sprites SVG : le poids et le nombre de requêtes diminuent ensemble.
Astuce 7 : maîtriser les plans de couleur et éviter les images matricielles intégrées
Réduisez le nombre de couleurs lors de la vectorisation pour diminuer le nombre de plans ; une couleur unie vaut mieux qu'un dégradé complexe. Évitez surtout d'intégrer une image matricielle en base64 dans le SVG : le fichier vectoriel deviendrait un conteneur d'image matricielle et son poids exploserait. Les tracés parasites issus de la conversion se suppriment au clic dans l'éditeur en ligne.
5. Livraison : compression du transfert et cache
Astuce 8 : activer gzip/Brotli et le cache
Le SVG étant du texte, un serveur gzip/Brotli réduit encore le transfert de 60 % à 80 % ; associez aux SVG statiques des en-têtes de cache longs. Les très petites icônes peuvent être intégrées directement dans le HTML, ce qui supprime la requête. Le principe est expliqué dans Les avantages du SVG ; pour maîtriser le poids dès la conversion, lisez Les méthodes de conversion image en SVG.
L'ordre compte : maîtriser ancres et plans à la source, nettoyer métadonnées et précision dans le fichier, passer par SVGO, puis compresser le transfert. Ces quatre couches combinées réduisent souvent le poids d'un SVG d'un ordre de grandeur.
Questions fréquentes
La compression SVGO change-t-elle l'aspect du graphique ?
Visuellement, la différence est quasi nulle avec la configuration par défaut. Attention à conserver le viewBox ; sur les petites icônes, évitez de trop réduire la précision des coordonnées et désactivez les plugins agressifs un par un si nécessaire.
De combien un SVG peut-il être compressé ?
Cela dépend du niveau de redondance ; 30 % à 70 % de gain sont fréquents, et le transfert peut encore baisser de 60 % à 80 % avec gzip/Brotli côté serveur.