Minificateur et nettoyeur de SVG

Pourquoi les fichiers SVG traînent du poids en trop

Les logiciels de dessin écrivent le SVG d’abord pour eux-mêmes. Un logo exporté d’Illustrator ou d’Inkscape transporte généralement des données de l’éditeur, des commentaires, des groupes vides, des calques masqués, de longs identifiants et des coordonnées écrites avec six ou huit décimales, dont rien ne change l’aspect. Minifier réécrit le fichier avec seulement ce dont le navigateur a besoin pour le dessiner.

Ce que nous avons mesuré

Nous avons passé cinq fichiers SVG dans le minificateur avec ses réglages par défaut :

Les serveurs web compressent le SVG à la volée, puisque c’est du texte : les visiteurs téléchargent moins que le poids du fichier. Minifier aide encore après cette compression : le sceau est passé de 72,3 Ko à 61,7 Ko compressé, et la carte de 387,8 Ko à 341,6 Ko.

Les réglages

• Précision des nombres fixe combien de décimales gardent les coordonnées. 3, la valeur par défaut, est invisible sur presque tout ; 2 convient aux icônes ; ne montez que pour de très grands dessins où de petites formes se trouvent loin de l’origine.
• Retirer les métadonnées et les commentaires supprime les données de l’éditeur, le titre et la description. Gardez le titre si le SVG est affiché seul et a besoin d’un nom accessible.
• Garder le viewBox doit rester activé : c’est le viewBox qui permet à un SVG de s’adapter à toute taille. Retirer la largeur et la hauteur laisse alors le CSS décider de la taille.
• Retirer les éléments de style supprime les blocs <style>. Laissez-le désactivé sauf si les couleurs viennent de votre propre CSS.
• Plusieurs passes répète l’optimisation jusqu’à ce qu’il n’y ait plus rien à retirer. Mise en forme lisible indente le résultat pour la lecture, au prix du poids.

Assainir un SVG non fiable

Un SVG peut contenir des scripts, comme une page web. Si vous mettez sur votre site le SVG de quelqu’un d’autre, un script qu’il contient pourrait s’exécuter dans le navigateur de vos visiteurs. Nettoyer, activé par défaut, retire les scripts, les gestionnaires d’événements comme onclick, le HTML intégré (foreignObject) et les références à des fichiers extérieurs. Les dessins continuent de fonctionner ; seul le contenu actif est retiré, et le résultat liste ce qui a été enlevé.

Vérifier le résultat

Le SVG minifié est dessiné à côté du code, avec le poids avant et après. Comparez-le à l’original avant de remplacer quoi que ce soit, surtout après avoir baissé la précision. Si un SVG doit être une image plutôt que du code, pour un e-mail ou un document, utilisez SVG en PNG.

En cas de problème

• De petites formes ont bougé ou les courbes ondulent. La précision est trop basse pour ce dessin. Montez-la à 4 ou 5.
• Les couleurs ou les polices ont changé. Un bloc de style ou une classe dont dépendait le dessin a été retiré. Désactivez Retirer les éléments de style.
• Une animation ou une interaction ne marche plus. C’était un script, que Nettoyer retire. Ne désactivez Nettoyer que pour les fichiers de confiance.
• Il indique que le balisage n’est pas du SVG valide. Une balise n’est pas fermée ou l’élément racine manque. Vérifiez qu’il a été copié en entier, de <svg à </svg>.

Notre méthode de test. Cinq fichiers SVG : l’icône d’appareil photo de Lucide, un logo simple et trois fichiers du domaine public de Wikimedia Commons. Minifiés avec les réglages par défaut de cet outil dans Chrome ; poids compressés mesurés avec gzip.