Ton SVG est 10x plus gros qu'il ne devrait l'être

Exporte une icône depuis Illustrator. Vérifie la taille du fichier. Ouvre-le dans un éditeur de texte.

Tu trouveras : des métadonnées dont personne n'a besoin, des points décimaux à 15 places, des groupes vides, des scories spécifiques à l'éditeur, et des commentaires de 2019. Un logo simple pèse 50KB alors qu'il pourrait faire 3KB.

SVG c'est juste du XML. Chaque caractère inutile, ce sont des octets que tes utilisateurs téléchargent.

Ce que les outils de design ajoutent

Illustrator, Figma, Sketch—ils intègrent tous des données supplémentaires :

<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100"
     style="enable-background:new 0 0 100 100;" xml:space="preserve">

Rien de tout ça n'est nécessaire pour le rendu. Ce sont des métadonnées pour que l'outil de design réouvre le fichier correctement.

Le problème de précision

Les outils de design utilisent des coordonnées haute précision :

<path d="M12.374892749237,45.293847293847 L67.293847293847,89.374892749237"/>

Les navigateurs arrondissent à environ 1-2 décimales de toute façon. Tous ces chiffres sont des octets gaspillés.

Mieux :

<path d="M12.37,45.29 L67.29,89.37"/>

Même résultat visuel, fraction de la taille.

Groupes vides et IDs

L'export crée souvent des structures comme :

<g id="Layer_1">
  <g id="icon">
    <g>
      <path d="..."/>
    </g>
  </g>
</g>

Trois groupes imbriqués pour contenir un chemin. Chaque groupe ajoute des octets. Retire-les sauf s'ils font quelque chose (comme appliquer des transformations ou styles).

Les IDs sont similaires. id="XMLID_847_" sur chaque élément s'additionne. Garde les IDs que tu références dans CSS ou JavaScript. Retire le reste.

Quoi optimiser

Retire les métadonnées. Commentaires, info éditeur, namespaces que tu n'utilises pas.

Réduis la précision. 2-3 décimales suffisent généralement.

Aplatir les groupes. L'imbrication inutile ne sert à rien.

Nettoie les IDs. Garde ceux référencés, retire les déchets auto-générés.

Fusionne les chemins. Plusieurs chemins qui pourraient être un seul chemin devraient être combinés.

Retire les éléments cachés. Les calques que tu as cachés dans l'outil de design mais pas supprimés.

Quand garder la taille de fichier

Parfois plus gros est correct :

Animations. Les IDs et groupes servent souvent de cibles d'animation. Ne les retire pas aveuglément.

Stylisation CSS. Si tu stylises le SVG avec du CSS externe, tu as besoin de ces IDs et classes.

Édition future. Le SVG ultra-optimisé est difficile à éditer. Garde le fichier source, optimise la version production.

Comparaison

Icône simple, avant optimisation :

Original : 24KB
Après suppression métadonnées : 8KB
Après réduction précision : 4KB
Après nettoyage structure : 2KB

C'est 12x plus petit. Se charge plus vite. S'analyse plus vite. Chaque chargement de page, chaque utilisateur.

Inline vs Externe

Les petits SVGs (moins de 1KB optimisés) fonctionnent souvent mieux inline directement dans HTML. Pas de requête HTTP supplémentaire.

Les SVGs plus gros ou icônes réutilisées fonctionnent mieux comme fichiers externes qui peuvent être mis en cache.

Le point d'équilibre dépend de ta situation. Généralement : si tu utilises un SVG une fois et qu'il est minuscule, inline-le. Si tu l'utilises de manière répétée ou qu'il est complexe, fichier externe.

---

L'optimisation SVG est de la performance gratuite. Passe tes icônes dans un optimiseur avant de livrer. Prend des secondes, économise des octets à chaque chargement de page, pour toujours.