Optimiser un SVG pour le web sans l’abîmer

Trop de points. Un outil de vectorisation place un point à chaque changement de direction de la limite des pixels, ce qui, sur une courbe anticrénelée, arrive en permanence. Une courbe qui a besoin de quatre points peut en recevoir quarante.

Une précision décimale excessive. Des coordonnées comme 127.38472615 sont courantes dans les fichiers vectorisés, et les dernières décimales décrivent souvent des distances inférieures à un pixel, quelle que soit la taille d’affichage du fichier.

Des formes en double et invisibles. Des tracés d’aire nulle, des formes entièrement cachées derrière d’autres, des rectangles de détourage oubliés.

Les métadonnées de l’éditeur. Ouvrez un fichier vectorisé dans Inkscape, enregistrez-le, et vous venez d’ajouter un bloc de données d’espace de noms propres à Inkscape qu’aucun navigateur ne lit.

Des styles en ligne répétés sur chaque élément. Cinquante tracés qui portent chacun les mêmes déclarations fill et stroke.

C’est l’étape qui donne un sens au reste, et elle prend une minute.

Notez trois valeurs pour l’original : la taille du fichier, le nombre de points (la plupart des éditeurs l’affichent, sinon comptez les paires de coordonnées dans les attributs d), et une capture d’écran à la taille à laquelle le graphisme sera vraiment utilisé. Puis optimisez, notez les trois mêmes valeurs, et comparez les captures côte à côte à cette taille.

Sans cela, vous devinez. Avec, vous faites la différence entre une optimisation qui a fait gagner 80 % sans rien changer, et une autre qui a fait gagner 85 % en aplatissant discrètement vos courbes.

Simplifiez les tracés. C’est généralement le gros morceau. La simplification fusionne les points redondants tout en gardant la courbe dans une tolérance que vous fixez. Jusqu’où aller dépend entièrement du visuel : un logo géométrique et épais supporte une simplification agressive, une illustration détaillée non. Commencez prudemment, comparez avec votre capture de référence, augmentez jusqu’à voir une différence, puis revenez en arrière.

Faites-le au moment de la vectorisation si votre outil le permet. Simplifier pendant la vectorisation donne généralement de meilleures courbes que simplifier après, car l’outil dispose encore des pixels d’origine.

Réduisez la précision décimale. SVGO propose une valeur réglable pour cela. Deux ou trois décimales conviennent à beaucoup d’icônes et de logos pour le web, mais le bon nombre dépend de l’échelle de vos coordonnées et de la finesse des détails. C’est un paramètre à tester, pas une règle, et c’est généralement l’un des gains les moins coûteux.

Supprimez les métadonnées. Espaces de noms de l’éditeur, commentaires, groupes vides, définitions inutilisées. Sans risque dans un fichier que vous publiez.

Retirez la géométrie cachée. Les formes sans aire, les éléments à opacité nulle, tout ce qui est entièrement recouvert par une forme opaque au-dessus. Sans risque dans une copie de production. Gardez à l’esprit que, dans un fichier maître de travail, certains de ces éléments peuvent être volontaires.

Déplacez les styles répétés dans le CSS. Si tous les tracés partagent un remplissage, une seule classe vaut mieux que cinquante attributs en ligne.

C’est plus important que n’importe quel réglage. L’optimisation est destructive, et il n’y a pas de retour en arrière une fois le fichier écrasé.

Gardez un fichier maître modifiable, avec ses calques, ses variantes masquées et sa structure intacts. Exportez une copie optimisée pour le web. Quand le design change, vous modifiez le maître et réexportez, au lieu d’essayer de reconstituer un fichier minifié.

SVGO est la référence. En ligne de commande, dans une étape de build, ou via l’interface web SVGOMG si vous voulez activer chaque optimisation une à une et voir le résultat.

Un réglage à surveiller : removeViewBox supprime l’attribut qui permet à un SVG de s’adapter à la taille de son conteneur. Il ne fait pas partie du préréglage par défaut de SVGO, mais il peut être activé explicitement, et d’autres chaînes d’outils qui intègrent SVGO peuvent le configurer autrement. Si un SVG cesse soudain de se redimensionner correctement après traitement, c’est la première chose à vérifier.

La vectorisation elle-même compte plus que n’importe quel post-traitement. Une vectorisation qui ne contient pas plus de formes que le visuel n’en demande produit un fichier qui n’a presque pas besoin d’optimisation. Une vectorisation pleine de fragments en produit un qu’aucun optimiseur ne peut entièrement sauver.

La simplification excessive est un vrai risque, et elle passe facilement inaperçue sur un grand écran.

Vérifiez à la taille d’utilisation. Un logo optimisé avec un zoom à 400 % peut sembler faux à 32 px dans une barre de navigation, et inversement.

Méfiez-vous des courbes aplaties. Une simplification agressive transforme les courbes douces en segments droits. Sur un cercle, ça se voit tout de suite ; sur une lettre, ça se traduit par une gêne subtile qu’on n’arrive pas à nommer.

Surveillez les angles. Les angles vifs sont souvent les premiers que la simplification arrondit. Un carré dont les angles se sont légèrement adoucis signifie que vous êtes allé trop loin.

Des repères, pas des seuils : une icône simple de quelques kilo-octets et un logo typique de quelques dizaines de kilo-octets sont des résultats raisonnables. Les illustrations détaillées pèsent plus, et c’est normal.

Si vous êtes très au-dessus de ce qui paraît juste pour la complexité du visuel, la solution est généralement en amont plutôt que dans l’optimiseur. Vectorisez en monochrome un design d’une seule couleur, supprimez les calques dont vous n’avez pas besoin, ou simplifiez le design lui-même.

L’accessibilité. Un SVG en ligne porteur de sens a besoin d’un élément <title>, et un SVG décoratif a besoin de aria-hidden="true". Ni l’un ni l’autre ne coûte quoi que ce soit, et les deux sont régulièrement oubliés. Les optimiseurs ne les ajouteront pas pour vous, et certaines configurations supprimeront même un <title> que vous avez ajouté si vous ne leur dites pas le contraire.

Tracer vous laisse régler la vectorisation avant l’export, et c’est l’optimisation la moins chère qui soit. Gratuit en SVG.