FlowingDev

L'optimisation SVG, expliquée : comment mettre vos graphiques vectoriels au régime

Apprenez comment fonctionne l'optimisation SVG en supprimant le code redondant, en simplifiant les tracés, et en minifiant les fichiers pour rendre vos graphiques web plus légers et plus rapides.

Essayer l'outil: Optimiseur SVG

En une phrase

L'optimisation SVG est le processus qui consiste à réécrire de manière algorithmique le code XML sous-jacent d'un fichier SVG pour le rendre aussi petit et efficace que possible, sans changer l'apparence de l'image finale.

Le problème que ça résout

Il était une fois, dans le royaume pixelisé des débuts du web, nous avions deux principaux types d'images : les GIF pour les animations simples et les logos, et les JPEG pour les photos. C'étaient des images raster, c'est-à-dire des grilles de pixels. Agrandissez-les, et vous obtenez une bouillie de blocs.

Puis le SVG est arrivé, ou Scalable Vector Graphics. C'est un standard du W3C qui décrit les images en utilisant les maths — lignes, courbes, formes et couleurs — le tout écrit dans un fichier texte XML. Ça veut dire que vous pouvez agrandir un SVG à la taille d'un panneau d'affichage, et il restera parfaitement net. C'était une révolution pour les logos, les icônes et les illustrations sur le web.

Mais voilà le hic : les logiciels utilisés pour créer ces SVG (comme Adobe Illustrator, Inkscape ou Figma) ne sont pas conçus pour la performance web. Ils sont conçus pour les designers. Ces outils bourrent le fichier SVG d'une tonne d'informations supplémentaires : des métadonnées sur l'éditeur, des calques cachés, des commentaires, un formatage lisible pour un humain avec plein d'espaces, et des descriptions de formes trop complexes. Un SVG pour une simple icône peut peser 20 Ko alors qu'il pourrait facilement en faire 2.

Ce "gonflement du code" (code bloat) est le problème. Sur un site web avec des dizaines d'icônes et d'illustrations, ce poids supplémentaire s'accumule, ralentissant le chargement des pages et frustrant les utilisateurs avec une connexion lente. L'optimisation SVG agit comme un concierge numérique, balayant tous les déchets pour ne vous laisser qu'un graphique léger, efficace et prêt pour le web.

Comment ça marche sous le capot

Pour comprendre l'optimisation, il faut d'abord accepter une vérité fondamentale : un SVG n'est pas vraiment une image. C'est un document texte qui décrit une image. Et comme n'importe quel code, il peut être bordélique, ou il peut être propre.

Ce n'est que du XML, après tout

Au fond, un fichier SVG, c'est juste du XML (eXtensible Markup Language). Vous pouvez l'ouvrir dans un éditeur de texte et le lire. Un simple cercle rouge pourrait ressembler à ça :

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <!-- Ceci est un commentaire qu'on peut supprimer -->
  <metadata>
    <rdf:RDF>
      <!-- Plein de métadonnées de l'éditeur vont ici -->
    </rdf:RDF>
  </metadata>
  <g id="layer1">
    <circle
       style="fill:#ff0000;stroke-width:0"
       id="path31"
       cx="50"
       cy="50"
       r="45" />
  </g>
</svg>

Un optimiseur ne regarde pas ce code comme une image, mais comme un programme à refactoriser.

Virer tout ce qui ne sert à rien

La première étape, la plus simple, est de supprimer tout ce qui ne contribue pas aux pixels finaux à l'écran.

  • Commentaires : Les <!-- ... --> sont pour les humains, pas pour les navigateurs. Dehors.
  • Métadonnées : La balise <metadata> est pleine d'infos sur l'application de création, l'auteur, la date, etc. Inutile pour le rendu. Dehors.
  • Données spécifiques à l'éditeur : De nombreux éditeurs ajoutent leurs propres attributs et éléments avec des namespaces (par ex., inkscape:groupmode ou sodipodi:docname). Le navigateur les ignore. Dehors.
  • Doctype et déclaration XML : La déclaration <?xml ... ?> est généralement superflue quand le SVG est utilisé sur le web. Le <doctype> n'est presque jamais nécessaire. Dehors.
  • Définitions inutilisées : La section <defs> peut contenir des dégradés, des motifs ou des filtres qui ne sont pas réellement utilisés dans l'image. Un optimiseur peut détecter et supprimer ces orphelins.

Minifier la structure et les attributs

Ensuite, l'optimiseur nettoie la structure elle-même.

  • Supprimer les espaces (whitespace) : Tous les sauts de ligne et l'indentation qui rendent le code lisible pour les humains sont des octets perdus pour un navigateur. Tout est supprimé.
  • Aplatir les groupes : Les groupes vides (<g></g>) ne servent à rien. Les groupes sans attributs spéciaux (<g><circle.../></g>) peuvent souvent être aplatis, en sortant le cercle et en supprimant le groupe.
  • Convertir les styles : style="fill:#ff0000; stroke:none" peut être converti en attributs individuels : fill="red" stroke="none". Parfois, c'est plus court. L'optimiseur vérifie ce qui est le plus compact. Il peut aussi remarquer que #ff0000 est identique au mot-clé red, qui est un octet plus court.

Après ces étapes, notre SVG du cercle pourrait plutôt ressembler à ça :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="red" cx="50" cy="50" r="45"/></svg>

Regardez-moi ça ! C'est déjà beaucoup plus petit, mais ça dessine exactement la même image.

La magie de la simplification des tracés

C'est là que les gains les plus impressionnants se produisent. La plupart des formes complexes en SVG sont définies par l'élément <path>, qui a un attribut d contenant un mini-langage de commandes pour se déplacer (M), tracer une ligne (L), une courbe (C) et fermer le tracé (Z).

Un tracé provenant d'un outil de design pourrait ressembler à ceci : d="M 10.12345,20.54321 C 30.98765,40.11111 60.55555,40.22222 80.43210,20.32109"

Un optimiseur utilise plusieurs astuces ici :

  1. Réduire la précision : Avez-vous vraiment besoin de cinq décimales pour une coordonnée dans une image de 100x100 pixels ? Non. L'optimiseur peut arrondir ces nombres à une précision raisonnable (par ex., deux décimales), économisant des tonnes d'octets. 10.12345 devient 10.12.
  2. Commandes relatives : Les commandes de tracé existent en deux versions : absolues (majuscule L) et relatives (minuscule l). Les commandes relatives donnent souvent des nombres plus petits et donc une chaîne de tracé plus courte.
  3. Conversion de formes : Un optimiseur peut analyser un <path> et se dire : "Hé, ce tracé décrit un rectangle parfait !". Il convertira alors la longue chaîne du <path> en un élément <rect> beaucoup plus court.
  4. Ajustement de tracé : En utilisant des algorithmes intelligents (comme Ramer-Douglas-Peucker), un optimiseur peut analyser une série de courts segments de droite dans un tracé et les remplacer par une seule courbe lisse, visuellement indiscernable, mais qui utilise beaucoup moins de caractères pour être décrite.

Du fichier au Data URI

Enfin, une fois que le SVG est aussi petit que possible, vous pourriez ne plus vouloir l'enregistrer en tant que fichier. Un optimiseur peut convertir tout le texte SVG minifié en une seule chaîne de caractères appelée Data URI. Cela vous permet d'intégrer l'image directement dans votre HTML (<img src="data:image/svg+xml,...">) ou votre CSS (background-image: url("data:image/svg+xml,...");). Cela économise une requête réseau complète, ce qui peut rendre votre site encore plus rapide au ressenti.

Histoires vécues

Le cas du logo obèse

Une startup vient de terminer une refonte majeure de sa marque et a reçu un nouveau logo super classe de son agence de design. Le développeur a balancé le fichier logo.svg sur la page d'accueil. Le rendu était super. Mais le fichier pesait 45 Ko. Pour un seul logo ! En l'ouvrant, il a découvert qu'il était plein de commentaires, de calques de guidage cachés et de coordonnées de tracés avec huit décimales. Un passage dans un optimiseur l'a réduit à seulement 4 Ko, soit une réduction de 90%. Le score LCP (Largest Contentful Paint) de la page d'accueil s'est amélioré immédiatement, en particulier pour les utilisateurs sur les réseaux mobiles.

Leçon : Les fichiers sortis des outils de design sont un point de départ, pas un produit fini pour le web. Partez toujours du principe qu'ils peuvent être optimisés.

L'icône animée qui ramait

Un développeur front-end créait un jeu d'icônes interactives qui s'animaient au survol (on hover). Une des icônes, une roue dentée complexe, faisait saccader la page pendant son animation de rotation. En utilisant les outils de développement du navigateur, il a vu que le navigateur luttait constamment avec le "repainting" (le redessin de la page). Il a inspecté le code source du SVG et a découvert que la roue était composée de dizaines d'éléments <path> distincts, tous imbriqués dans plusieurs balises de groupe <g>. L'optimiseur a aplati les groupes et, plus important encore, a combiné tous les tracés séparés en un seul tracé composite. L'élément DOM résultant était beaucoup plus simple. Le navigateur avait beaucoup moins de travail à faire, et l'animation est devenue fluide comme de la soie.

Leçon : L'optimisation SVG n'est pas seulement une question de taille de fichier ; c'est aussi une question de performance de rendu. Une structure SVG plus simple signifie moins de travail pour le moteur de rendu du navigateur.

La débâcle de la librairie de graphiques

Une équipe d'analystes de données utilisait une puissante librairie JavaScript pour générer des diagrammes et des graphiques complexes pour leur tableau de bord. Le problème ? Chaque graphique était un SVG, et la librairie les générait à la volée dans le navigateur de l'utilisateur. Le tableau de bord, qui contenait cinq graphiques, téléchargeait la librairie puis générait près de 1 Mo de code SVG non optimisé, gelant le navigateur pendant plusieurs secondes. Leur solution a été de déplacer la génération des graphiques côté serveur. Ils ont créé un petit service qui générait le code SVG avec Node.js, passait la chaîne de caractères résultante dans une librairie d'optimisation SVG, puis envoyait le SVG minuscule et pré-optimisé au client. Le temps de chargement du tableau de bord a été réduit de 75%.

Leçon : L'optimisation peut et doit faire partie d'un processus de build automatisé ou d'un workflow backend, et pas seulement une étape manuelle pour des ressources ponctuelles.

Erreurs et pièges courants

  • Casser l'interactivité en supprimant les ID : De nombreux optimiseurs suppriment agressivement les ID des éléments pour économiser des octets. Si vous avez du JavaScript ou du CSS qui cible ces ID (par ex., document.getElementById('my-button-shape')), votre code sera cassé. Assurez-vous que votre optimiseur est configuré pour préserver les ID dont vous avez besoin.
  • Simplification de tracé trop agressive : Baisser trop bas le paramètre de "précision" peut visiblement déformer votre image. Une courbe peut devenir une ligne brisée, ou des détails fins peuvent disparaître. Comparez toujours visuellement la version originale et la version optimisée pour vous assurer que la qualité n'a pas été sacrifiée.
  • Supprimer les fonctionnalités d'accessibilité : Les balises <title> et <desc> à l'intérieur d'un SVG fournissent une alternative textuelle pour les lecteurs d'écran. Un optimiseur naïf pourrait les supprimer car "non nécessaires". Les bons outils ont une option pour préserver ces balises afin de maintenir l'accessibilité.
  • Perdre les informations de la feuille de style : Les SVG peuvent contenir des blocs <style>, tout comme le HTML. Si vous utilisez des classes pour styliser différentes parties de votre SVG, assurez-vous que l'optimiseur ne supprime pas le bloc de style ou ne déforme pas les noms de classe sur lesquels vous comptez.

Pourquoi vous devriez vous y intéresser

À l'ère des Core Web Vitals et de l'indexation mobile-first, la performance d'un site n'est pas un luxe, c'est une exigence. Chaque kilooctet compte. Les SVG sont partout sur le web moderne : logos, icônes, illustrations "hero", visualisations de données. Ils sont l'une des plus grandes sources de gains de performance faciles à obtenir.

Savoir optimiser un SVG est une compétence fondamentale pour tout développeur ou designer web qui se soucie de l'expérience utilisateur. C'est un gain rapide et facile qui peut avoir un impact mesurable sur la sensation de vitesse de votre site. Avant de passer une semaine à refactoriser un bundle JavaScript complexe, passez cinq minutes à optimiser vos images. Les résultats pourraient vous surprendre.

Pour aller plus loin

Théorie bouclée. Place à la pratique — 100 % dans ton navigateur.

Essayer l'outil: Optimiseur SVG