SVG Symbol

Une alternative aux icônes basées sur des polices — utilisation de sprites de symboles SVG pour intégrer des icônes évolutives et multicolores directement en HTML.

Qu'est-ce que les sprites de symboles SVG ?

Les sprites de symboles SVG regroupent plusieurs icônes SVG dans un seul fichier. Chaque icône est définie dans un élément <symbol> avec un id unique. Pour utiliser une icône, vous la référencez avec <use href="#icon-id">. Le sprite est chargé une fois — soit inline, soit comme fichier externe — et les icônes individuelles sont rendues partout sur la page.

C'est une approche fondamentalement différente des polices d'icônes. Au lieu de mapper des points de code Unicode sur des glyphes de police, vous utilisez des éléments SVG natifs. Chaque icône conserve toutes ses capacités SVG : plusieurs couleurs, dégradés, filtres et attributs d'accessibilité détaillés. Le compromis est un balisage et des conventions de style légèrement plus complexes par rapport à l'approche CSS pure des polices d'icônes.

Fonctionnement

Un fichier sprite est un document SVG ordinaire contenant un ou plusieurs éléments <symbol>. Chaque symbole définit une icône autonome avec son propre viewBox :

icons.svg (le fichier sprite)

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4..."/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </symbol>
</svg>

Le SVG externe est masqué avec style="display:none" afin qu'il n'occupe pas d'espace sur la page. Les symboles à l'intérieur sont invisibles jusqu'à ce qu'ils soient référencés. Pour rendre une icône, utilisez l'élément <use> :

Utilisation des symboles en HTML

<svg class="icon"><use href="#icon-home"></use></svg>
<svg class="icon"><use href="#icon-search"></use></svg>

Stylez les icônes avec CSS, en utilisant fill et stroke plutôt que la propriété color basée sur les polices :

CSS pour les icônes SVG

.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: none;
}

L'utilisation de fill: currentColor permet à l'icône d'hériter de la couleur de texte de son élément parent, de manière similaire au fonctionnement des icônes de police avec la propriété color.

Symboles vs polices d'icônes

Avantages des symboles

Prise en charge multicouleur — chaque chemin peut avoir son propre remplissage et contour
Chaque icône est un véritable élément SVG avec une meilleure accessibilité
Pas de mappage Unicode nécessaire — référencer les icônes par des noms lisibles
Rendu plus net — pas de problèmes de crénage ni d'artefacts sous-pixels
Les parties individuelles des icônes peuvent être animées indépendamment
Fonctionne avec toutes les fonctionnalités SVG : dégradés, filtres, chemins de découpe, masques

Inconvénients des symboles

Balisage plus verbeux (<svg><use> vs <i class="icon">)
Ne peut pas facilement être stylisé avec CSS color — nécessite fill/stroke
Les sprites externes ont des implications CORS pour le chargement depuis d'autres origines
Taille totale de fichier plus grande que les formats de polices compressées
Plus de poids HTML par utilisation d'icône
Pas de prise en charge des pseudo-éléments ::before/::after

Stratégies de chargement

Il y a trois façons principales de charger un sprite de symboles SVG dans une page, chacune avec des compromis différents :

Sprite inline

Collez l'intégralité du SVG sprite directement dans le <body> HTML. C'est l'approche la plus simple — pas de problèmes CORS, pas de requête HTTP supplémentaire. Les symboles sont immédiatement disponibles pour toute référence <use> sur la page. Fonctionne mieux pour les applications monopages ou lorsque vous avez un petit ensemble d'icônes (moins de ~50 icônes).

Sprite externe

Chargez le sprite comme un fichier externe via <use href="icons.svg#home">. Cela garde votre HTML propre et permet au navigateur de mettre en cache le sprite séparément de la page. Cependant, cela a des implications CORS : le sprite doit être servi depuis la même origine, ou le serveur doit définir les en-têtes Access-Control-Allow-Origin appropriés. Notez qu'Internet Explorer ne prend pas en charge les références <use> externes — utilisez le polyfill svg4everybody si vous avez besoin du support IE.

Injection JS

Chargez le fichier sprite via fetch() et injectez-le dans le DOM au moment de l'exécution. Cela combine la cachabilité des sprites externes avec la fiabilité des sprites inline — le SVG injecté fait partie du document, donc les références <use> fonctionnent sans restrictions CORS. Bobcorn génère cette approche : un fichier JS qui récupère et enregistre tous les symboles lors du chargement.

Approche par injection JS (sortie Bobcorn)

<!-- Load the generated JS sprite -->
<script src="icons-symbol.js"></script>

<!-- Then use normally: -->
<svg class="icon"><use href="#icon-home"></use></svg>
<svg class="icon"><use href="#icon-search"></use></svg>

Le fichier JS crée un élément <svg> masqué contenant toutes les définitions <symbol> et l'ajoute au corps du document. Une fois chargés, les icônes sont référencées de manière identique à l'approche inline.

Quand utiliser SVG Symbols

Les sprites de symboles SVG sont le bon choix lorsque votre projet nécessite des capacités que les polices d'icônes ne peuvent pas fournir :

Icônes multicolores — quand les icônes utilisent plus d'une couleur, des dégradés ou des remplissages complexes qu'une police monoglyphe ne peut pas représenter
L'accessibilité est une priorité absolue — chaque icône peut inclure un élément <title> et un attribut aria-label, donnant aux lecteurs d'écran des descriptions significatives
Parties d'icônes animées — vous devez animer des chemins ou des groupes individuels dans une icône (par exemple, un engrenage qui tourne dans une icône de paramètres)
Projets à forte utilisation de SVG — votre application utilise déjà largement le SVG inline, donc les symboles s'intègrent naturellement dans l'architecture existante
Netteté de rendu maximale — le crénage peut causer des problèmes d'alignement aux petites tailles ; les symboles SVG se rendent parfaitement à n'importe quelle dimension

Quand s'en tenir aux polices d'icônes

Les polices d'icônes restent le meilleur choix dans plusieurs scénarios courants :

Grands ensembles d'icônes (200+) — un fichier de police WOFF2 compressé est significativement plus petit qu'un sprite SVG avec le même nombre d'icônes
Toutes les icônes sont monochrome — si chaque icône est d'une seule couleur, les polices d'icônes offrent l'intégration la plus simple sans compromis
Intégration CSS uniquement — les polices d'icônes ne nécessitent qu'un lien de feuille de style et des classes CSS, sans JavaScript ni balisage supplémentaire
Systèmes hérités — les projets utilisant déjà des polices d'icônes n'ont pas assez à gagner du passage aux symboles pour justifier l'effort de migration
Prise en charge des pseudo-éléments — vous avez besoin d'icônes dans des pseudo-éléments ::before ou ::after, qui ne fonctionnent qu'avec des glyphes de police

Dans Bobcorn

Bobcorn peut exporter vos icônes comme fichier sprite de symboles JS aux côtés des fichiers de polices. Activez l'option JS dans la boîte de dialogue d'export. Le fichier généré crée un sprite SVG inline et enregistre tous les symboles lors du chargement. Vous pouvez utiliser les deux approches dans le même projet — les polices pour les icônes UI simples, les symboles pour les illustrations colorées complexes.

Conseil

Vous n'avez pas à choisir l'un ou l'autre. De nombreux systèmes de conception utilisent des polices d'icônes pour la grande majorité de leurs icônes UI monochrome (boutons, navigation, éléments de formulaire) et des symboles SVG pour quelques illustrations multicolores ou icônes animées. La boîte de dialogue d'export de Bobcorn vous permet de générer les deux en un seul export.