Compresser des fichiers SVG

Le SVG, c’est du code, pas des pixels

Un fichier SVG (Scalable Vector Graphics) est un document texte en XML qui décrit des formes : tracés, cercles, dégradés, texte. Comme il contient des instructions au lieu de pixels, il reste net à toutes les tailles, d’un favicon de 16 pixels à un panneau publicitaire. Les icônes, logos, illustrations, graphiques et cartes du Web sont souvent en SVG, et le format est une norme du W3C depuis 2001.

Être du texte a une conséquence : la taille du fichier dépend de la verbosité avec laquelle le logiciel l’a écrit, et non de la taille d’affichage de l’image. Deux SVG au rendu identique peuvent avoir des tailles qui varient du simple au multiple.

Ce qui alourdit inutilement les fichiers SVG

• Les métadonnées de l’éditeur. Illustrator, Inkscape, Figma et Sketch ajoutent leurs propres espaces de noms, noms de calques, commentaires d’export et parfois une copie incorporée du document modifiable.
• Une précision excessive. Des coordonnées comme 12.483920174 là où 12.48 donne exactement le même rendu à toute taille réaliste.
• Une structure redondante. Groupes vides, calques masqués, valeurs d’attributs par défaut, définitions inutilisées et styles qui pourraient être plus courts.
• Une syntaxe de tracé trop longue. Commandes absolues là où des commandes relatives seraient plus courtes, lettres de commande répétées, espaces superflus.
• Des images bitmap incorporées. Une photo collée dans une illustration est stockée sous forme de texte Base64 dans le SVG, ce qui pèse environ un tiers de plus que le fichier image d’origine.

Comment l’outil optimise le SVG

L’outil exécute SVGO, l’optimiseur SVG open source très répandu, dans votre navigateur. Il supprime les métadonnées et les commentaires, fusionne les groupes inutiles, raccourcit les données de tracé, arrondit les nombres à 3 décimales par défaut (vous pouvez choisir de 0 à 6) et regroupe les styles, en répétant les passes jusqu’à ce que plus rien ne change. Le résultat reste un SVG normal que vous pouvez ouvrir dans n’importe quel éditeur ou coller dans du HTML. Lors de nos tests sur huit SVG, des icônes optimisées à la main jusqu’à un export Inkscape rempli de données d’éditeur, les gains sont allés de 8 % à 42 %.

L’optimisation est techniquement avec perte, au sens strict : l’arrondi modifie très légèrement les coordonnées, et les données propres à l’éditeur disparaissent, si bien que vous ne pouvez plus rouvrir le fichier avec tous ses calques d’origine. Conservez le fichier source de votre logiciel de création et considérez le SVG optimisé comme la version publiée.

Les serveurs envoient généralement le SVG avec une compression gzip ou Brotli, qui réduit encore le texte en chemin vers le navigateur. L’optimisation et la compression du serveur se cumulent, car les données supprimées n’ont plus du tout besoin d’être compressées.

Quand un SVG optimisé ne fonctionne plus

• Le CSS ou le JavaScript ne trouve plus un élément. Les optimiseurs raccourcissent ou suppriment les ID et noms de classe qui semblent inutilisés dans le fichier. Si les styles ou scripts de votre page les ciblent, vérifiez le résultat avant de publier.
• L’icône ne se redimensionne plus. Un SVG a besoin de son attribut viewBox pour s’adapter correctement. L’outil le conserve : vérifiez donc si l’original en avait un ; un SVG doté seulement d’une largeur et d’une hauteur fixes ne s’est jamais bien redimensionné.
• Les toutes petites formes paraissent déformées. Les très petites icônes dessinées sur un grand canevas peuvent souffrir de l’arrondi. C’est rare avec la précision par défaut.
• Le fichier est surtout une photo incorporée. Exportez la photo séparément en JPG ou WebP et liez-la, ou convertissez tout le graphisme en image bitmap.

Questions sur le SVG

Pages associées

Les images bitmap sont prises en charge par le compresseur d’images. Pour comprendre ce qui s’exécute en local et pourquoi, consultez comment ça marche.