Icônes SVG : balisage en ligne, sprite avec use, ou élément img

Ce que c'est

Trois façons de placer une icône SVG. En ligne : le balisage <svg> se trouve dans le HTML, si bien que fill="currentColor" suit la couleur du texte et le CSS peut atteindre chaque chemin. Sprite : un seul fichier définit chaque icône comme <symbol id="check">…</symbol>, et chaque occurrence s'écrit <svg><use href="/icons.svg#check"></use></svg> ; le fichier est récupéré une seule fois et mis en cache, et le clone hérite de color depuis son contexte. Image : <img src="icon.svg"> ou un arrière-plan CSS est la solution la plus simple et mise en cache, mais le SVG est alors une image opaque dont le CSS ne peut pas styler l'intérieur.

Pourquoi c'est important

Les icônes sont nombreuses, répétées et colorées selon le contexte. Le balisage en ligne offre un contrôle total mais répète les octets à chaque page et à chaque ligne de tableau ; le sprite offre la mise en cache et une définition unique, sous des règles de chargement plus strictes ; l'image offre la mise en cache mais aucun style. Ce choix détermine si les icônes suivent la couleur du texte, les états de survol et le mode sombre sans ressources supplémentaires.

Comment l'appliquer

• Privilégier par défaut un sprite de même origine avec <use href>. MDN indique que les navigateurs peuvent appliquer la politique de même origine à <use> et refuser les URL cross-origin, donc servir le sprite depuis l'origine de la page ou insérer en ligne le bloc <symbol> une fois en haut du document.
• Placer fill="currentColor" (et stroke le cas échéant) sur les symboles ; MDN définit currentColor comme la valeur de la propriété color de l'élément, de sorte que color sur le bouton ou le lien style l'icône.
• Marquer les icônes décoratives aria-hidden="true" et focusable="false". Donner un nom à une icône qui se suffit à elle-même : un élément <title> à l'intérieur du SVG (l'élément de nom accessible, habituellement aussi affiché comme infobulle) ou un aria-label sur le bouton qui l'entoure.
• Fixer width et height (en attributs ou en CSS) sur chaque icône pour que la mise en page ne se déplace pas avant l'arrivée du sprite.
• Insérer en ligne les deux ou trois icônes nécessaires au premier affichage (logo, menu) et garder le reste dans le sprite ; versionner l'URL du sprite comme toute autre ressource.
• Passer les icônes par un optimiseur et normaliser le viewBox pour que toutes les icônes partagent un même système de coordonnées.

Pièges

Les classes de la page n'atteignent pas le contenu cloné de <use> ; seules les propriétés héritables et les propriétés personnalisées traversent, donc les icônes multicolores ont besoin de currentColor associé à des propriétés personnalisées, pas de sélecteurs de classe. Le clone n'est pas présent dans le DOM pour les scripts. Un sprite qui change ses noms d'identifiants casse toute page qui référence les anciens, jusqu'à expiration des caches. Les polices d'icônes, l'ancienne alternative, ne sont pas comparées ici.