Optimisation et factorisation de sprite Scalable Vector Graphics

Comment concevoir et optimiser un fichier « sprite » Scalable Vector Graphics et améliorer les performance ?

mercredi 31 décembre 2025

Nous connaissons les « sprites » SVG classiques, avec l'utilisation de use. Cette méthode implique souvent de charger le code du SVG et des symbol au coeur même de la page HTML.
L'inconvénient de cette pratique (même si elle a des avantages…) est que ce fichier est présent dans toutes les pages du site, le plus souvent. En cas de mise à jour du sprite, il faut invalider le cache côté serveur (ou du CDN) et côté client.
Un autre petit souci est qu'il faut faire appel à un polyfill pour certains navigateurs et que cet usage devient compliqué lorsque l'on souhaite utiliser ce même fichier en propriété background-image dans un fichier CSS.

Imaginons les icones suivantes :

Séchage en machine à température modérée (60 °C maximum)
Séchage en machine à température modérée (80 °C maximum)
Séchage en machine interdit
Lavage en machine 30 °C, programme coton
Lavage en machine 30 °C, programme synthétique
Lavage en machine 30 °C, programme laine
Lavage en machine prohibé

Pour construire le SVG nécessaire, nous allons découper les icones et factoriser les éléments communs.
Nous avons donc besoin d'une bassine (4 fois) , d'une croix (2 fois) , d'une température de 30 °C (3 fois) , d'un point (3 fois) , d'un cercle (3 fois) , d'un carré (3 fois) , et enfin d'un trait (3 fois) .

Maintenant, nous allons assembler tout ce petit monde pour construire nos icones, avec pour effet de n'avoir qu'un seul symbol à mettre à jour en cas de modification graphique.
Commençons à construire notre SVG.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs></defs>
</svg>

Maintenant, nous mettons notre belle bassine dans son symbol avec un identifiant.
A noter le fait de ne pas mettre de viewBox sur le symbol, partant du principe que toutes nos icones sortiront en 32x32 (nous le verrons à l'étape suivante).

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="wash">
      <path d="M30,6.15l-.54,2.66a4.73,4.73,0,0,1-2.33-1.17,5.89,5.89,0,0,0-4-1.52,5.79,5.79,0,0,0-4,1.52,4.48,4.48,0,0,1-3.11,1.22A4.4,4.4,0,0,1,13,7.64,5.87,5.87,0,0,0,9,6.12,5.81,5.81,0,0,0,5,7.64,4.66,4.66,0,0,1,2.6,8.84L2,6H0L4,26H28L32,6.17ZM26.41,24H5.6L2.86,10.31a6.08,6.08,0,0,0,3-1.47A4.48,4.48,0,0,1,9,7.61a4.41,4.41,0,0,1,3.11,1.22,6,6,0,0,0,8,0,4.55,4.55,0,0,1,6.2,0,6.31,6.31,0,0,0,2.93,1.47Z"/>
    </symbol>
  </defs>
</svg>

Fichier SVG final

Normalement, nous devrions nous arrêter là. Mais comme nous voulons utiliser ce SVG en ressource externe ET via des background-image, nous allons compléter notre fichier avec des balises view qui seront appelées via leur identifiant, suivies de balises use pointant sur les symboles à l'intérieur du même fichier.
Plus clairement, ça donne ceci :

Taille : 17,24 kilo-octets (~5,02 kilo-octets compressé)Mis à jour jeudi 30 mars 2023

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 350" fill="#111" role="img">
  <defs>
    <style>
      svg {color-scheme: dark light;}
      use:not([width]) {width:2rem; height:2rem;}
    </style>
    <!-- symbols wash -->
    <symbol id="forbidden-icon">
      <path d="M30.70215,29.6084l-1.04981,1.0664L16,17.06348,2.3916,30.70215,1.32568,29.65234l.17725-.17871L14.93652,16,1.29736,2.3916,2.34863,1.32568,15.99951,14.93652,29.60938,1.29736,30.6748,2.34863,17.06348,15.99951Z"/>
    </symbol>
    <symbol id="wash">
      <path d="M30,6.15l-.54,2.66a4.73,4.73,0,0,1-2.33-1.17,5.89,5.89,0,0,0-4-1.52,5.79,5.79,0,0,0-4,1.52,4.48,4.48,0,0,1-3.11,1.22A4.4,4.4,0,0,1,13,7.64,5.87,5.87,0,0,0,9,6.12,5.81,5.81,0,0,0,5,7.64,4.66,4.66,0,0,1,2.6,8.84L2,6H0L4,26H28L32,6.17ZM26.41,24H5.6L2.86,10.31a6.08,6.08,0,0,0,3-1.47A4.48,4.48,0,0,1,9,7.61a4.41,4.41,0,0,1,3.11,1.22,6,6,0,0,0,8,0,4.55,4.55,0,0,1,6.2,0,6.31,6.31,0,0,0,2.93,1.47Z"/>
    </symbol>
    <symbol id="wash-30">
      <path d="M11.12,21.49a3.93,3.93,0,0,1-2-.49A2.26,2.26,0,0,1,8,19.66l.81-.86a1.09,1.09,0,0,0,.19.48,2,2,0,0,0,.46.46,2.87,2.87,0,0,0,.7.36,3,3,0,0,0,.94.14,3.21,3.21,0,0,0,.78-.09,1.81,1.81,0,0,0,.63-.28,1.36,1.36,0,0,0,.41-.42,1.08,1.08,0,0,0,.16-.57,1.16,1.16,0,0,0-.76-1.07,5.2,5.2,0,0,0-2.1-.35H9.77V16.31h.45A4.61,4.61,0,0,0,12.11,16a1.05,1.05,0,0,0,.73-1,1,1,0,0,0-.15-.55,1.64,1.64,0,0,0-.38-.41,1.86,1.86,0,0,0-.54-.24,2.55,2.55,0,0,0-.61-.08,2.69,2.69,0,0,0-1.4.33,2.09,2.09,0,0,0-.79.77l-1-1a2.64,2.64,0,0,1,.55-.56,4,4,0,0,1,.76-.41,5.11,5.11,0,0,1,.89-.27,5,5,0,0,1,.94-.09,4.59,4.59,0,0,1,1.3.18,3.48,3.48,0,0,1,1,.51,2.68,2.68,0,0,1,.67.76,1.88,1.88,0,0,1,.24,1,1.64,1.64,0,0,1-.47,1.22,2.73,2.73,0,0,1-1.35.67,2.58,2.58,0,0,1,.85.28,2.18,2.18,0,0,1,.64.51,2,2,0,0,1,.41.67,2.07,2.07,0,0,1,.14.78,2,2,0,0,1-.29,1.05,2.57,2.57,0,0,1-.78.76,4,4,0,0,1-1.11.47,4.81,4.81,0,0,1-1.31.17Zm8.81,0a3.6,3.6,0,0,1-1.77-.44A4,4,0,0,1,16.89,20a4.61,4.61,0,0,1-.77-1.43,4.43,4.43,0,0,1,0-3.1A4.68,4.68,0,0,1,17,14a4,4,0,0,1,1.28-1,3.5,3.5,0,0,1,1.7-.4A3.45,3.45,0,0,1,21.7,13,4,4,0,0,1,23,14.12a4.57,4.57,0,0,1,.78,1.44,5.12,5.12,0,0,1,.25,1.5,4.83,4.83,0,0,1-1.1,3,4.45,4.45,0,0,1-1.29,1A3.69,3.69,0,0,1,19.93,21.5Zm-2.56-4.45a5,5,0,0,0,.18,1.13,3.33,3.33,0,0,0,.49,1,2.69,2.69,0,0,0,.78.76,2.11,2.11,0,0,0,1.11.29,2.07,2.07,0,0,0,1.13-.3,2.7,2.7,0,0,0,.79-.79,3.42,3.42,0,0,0,.46-1,4.28,4.28,0,0,0,.16-1.08,4.13,4.13,0,0,0-.17-1.13,3.33,3.33,0,0,0-.49-1,2.57,2.57,0,0,0-.79-.75,2,2,0,0,0-1.08-.3,2,2,0,0,0-1.14.31,2.59,2.59,0,0,0-.8.78,3.42,3.42,0,0,0-.46,1,4,4,0,0,0-.17,1.08Z"/>
    </symbol>
    <symbol id="wash-40">
      <path d="M12.2,21.38V19.23H8V18l4.66-5.5h1V18h1.17v1.24H13.67v2.15ZM9.49,18h2.88v-3.4ZM20,21.5a3.52,3.52,0,0,1-1.75-.44A4,4,0,0,1,17,20a4.88,4.88,0,0,1-.77-1.44,4.73,4.73,0,0,1,0-3.15A4.91,4.91,0,0,1,17,13.94a4.12,4.12,0,0,1,1.27-1,3.75,3.75,0,0,1,3.43,0A4.12,4.12,0,0,1,23,14a5,5,0,0,1,.77,1.46A5.31,5.31,0,0,1,24,17a5,5,0,0,1-.28,1.61,4.86,4.86,0,0,1-.81,1.44,4.42,4.42,0,0,1-1.27,1A3.52,3.52,0,0,1,20,21.5ZM17.45,17a4.56,4.56,0,0,0,.17,1.14,3.42,3.42,0,0,0,.48,1,2.82,2.82,0,0,0,.78.76,2.15,2.15,0,0,0,2.21,0,2.7,2.7,0,0,0,.78-.8,3.37,3.37,0,0,0,.46-1A4.45,4.45,0,0,0,22.48,17a4.14,4.14,0,0,0-.16-1.15,3.42,3.42,0,0,0-.48-1,2.86,2.86,0,0,0-.79-.76A2,2,0,0,0,20,13.77a2,2,0,0,0-1.12.3,2.74,2.74,0,0,0-.79.8,3.37,3.37,0,0,0-.46,1,4.12,4.12,0,0,0-.16,1.1Z"/>
    </symbol>
    <symbol id="wash-50">
      <path d="M11.45,15.67a3.62,3.62,0,0,1,1.26.22,3.22,3.22,0,0,1,1,.59,2.46,2.46,0,0,1,.67.89,2.84,2.84,0,0,1,0,2.35,2.84,2.84,0,0,1-.74,1,3.62,3.62,0,0,1-1.09.61,4.16,4.16,0,0,1-1.38.22,4,4,0,0,1-1.88-.43A3.12,3.12,0,0,1,8,19.89l.89-.79a2.81,2.81,0,0,0,1,.85,2.72,2.72,0,0,0,1.27.32,2.11,2.11,0,0,0,.77-.13,1.72,1.72,0,0,0,.62-.35,1.56,1.56,0,0,0,.4-.54,1.67,1.67,0,0,0,.15-.71,1.58,1.58,0,0,0-.15-.69,1.69,1.69,0,0,0-.39-.53A1.77,1.77,0,0,0,12,17a2.09,2.09,0,0,0-.72-.12,2.29,2.29,0,0,0-1,.21,1.88,1.88,0,0,0-.73.6H8.23a1.11,1.11,0,0,0,.06-.3c0-.16.08-.37.13-.63s.12-.52.18-.83L8.81,15c.16-.74.33-1.57.52-2.48h4.72v1.26H10.42l-.5,2.42a1.58,1.58,0,0,1,.62-.37,2.85,2.85,0,0,1,.91-.14Zm8.42,5.82a3.64,3.64,0,0,1-1.78-.44A4,4,0,0,1,16.8,20a5,5,0,0,1-1.05-3,4.51,4.51,0,0,1,.29-1.6,4.64,4.64,0,0,1,.83-1.45,4.08,4.08,0,0,1,1.29-1,3.65,3.65,0,0,1,1.73-.4,3.53,3.53,0,0,1,1.78.43A4.28,4.28,0,0,1,23,14a4.78,4.78,0,0,1,.78,1.46A5,5,0,0,1,24,17a4.76,4.76,0,0,1-.29,1.61,4.59,4.59,0,0,1-.83,1.44,4.3,4.3,0,0,1-1.3,1A3.66,3.66,0,0,1,19.87,21.49ZM17.29,17a4.58,4.58,0,0,0,.18,1.14,3.44,3.44,0,0,0,.49,1,2.64,2.64,0,0,0,.8.76,2.11,2.11,0,0,0,1.11.3A2.18,2.18,0,0,0,21,19.93a2.7,2.7,0,0,0,.79-.79,3.55,3.55,0,0,0,.47-1.05A4.36,4.36,0,0,0,22.45,17a4.15,4.15,0,0,0-.17-1.14,3.44,3.44,0,0,0-.49-1,2.8,2.8,0,0,0-.81-.76,2.07,2.07,0,0,0-1.09-.3,2.18,2.18,0,0,0-1.16.31,2.74,2.74,0,0,0-.8.79,3.55,3.55,0,0,0-.47,1.05A4,4,0,0,0,17.29,17Z"/>
    </symbol>
    <symbol id="wash-60">
      <path d="M14.82,18.45a2.9,2.9,0,0,1-.26,1.19,2.86,2.86,0,0,1-.72,1,3.51,3.51,0,0,1-1.07.66,3.89,3.89,0,0,1-1.34.23A3.55,3.55,0,0,1,10,21.23a3.07,3.07,0,0,1-1.09-.76,3.51,3.51,0,0,1-.69-1.23A5.19,5.19,0,0,1,8,17.6a8.56,8.56,0,0,1,.26-2.22A4.86,4.86,0,0,1,9,13.79a2.86,2.86,0,0,1,1.12-1,3.24,3.24,0,0,1,1.47-.33,3.42,3.42,0,0,1,1.64.39A3,3,0,0,1,14.42,14l-.86.85a2.28,2.28,0,0,0-.83-.83,2.39,2.39,0,0,0-1.19-.3,1.86,1.86,0,0,0-1.57.78,3.8,3.8,0,0,0-.62,2.22,2.11,2.11,0,0,1,.87-.88,2.76,2.76,0,0,1,1.33-.33,3.59,3.59,0,0,1,1.28.23,3.5,3.5,0,0,1,1,.62,2.87,2.87,0,0,1,.68.94,2.4,2.4,0,0,1,.27,1.17Zm-3.38,1.89a2,2,0,0,0,.77-.16,1.81,1.81,0,0,0,.63-.41,1.86,1.86,0,0,0,.44-.6,1.61,1.61,0,0,0,.16-.72,1.55,1.55,0,0,0-.16-.72,1.94,1.94,0,0,0-.44-.59,1.91,1.91,0,0,0-.63-.41,2,2,0,0,0-.77-.15,2,2,0,0,0-.77.15,1.91,1.91,0,0,0-.63.41,2.08,2.08,0,0,0-.43.59,1.61,1.61,0,0,0,0,1.44,2.06,2.06,0,0,0,1.83,1.17ZM20,21.5a3.51,3.51,0,0,1-1.74-.44A4.06,4.06,0,0,1,17,20a5,5,0,0,1-.76-1.43A4.92,4.92,0,0,1,16,17a4.7,4.7,0,0,1,.29-1.6,4.62,4.62,0,0,1,.8-1.44,4.05,4.05,0,0,1,1.26-1,3.71,3.71,0,0,1,3.41,0A4.21,4.21,0,0,1,23,14.07a4.68,4.68,0,0,1,.76,1.45A5.25,5.25,0,0,1,24,17a5,5,0,0,1-.28,1.6,4.81,4.81,0,0,1-.81,1.43,4.08,4.08,0,0,1-1.26,1A3.54,3.54,0,0,1,20,21.5ZM17.48,17a4.58,4.58,0,0,0,.18,1.13,3.48,3.48,0,0,0,.47,1,2.69,2.69,0,0,0,.78.76,2.2,2.2,0,0,0,2.2,0,2.52,2.52,0,0,0,.77-.79,3.48,3.48,0,0,0,.46-1A4.31,4.31,0,0,0,22.49,17a4.13,4.13,0,0,0-.16-1.14,3.37,3.37,0,0,0-.48-1,2.82,2.82,0,0,0-.78-.76A2,2,0,0,0,20,13.82a2.06,2.06,0,0,0-1.12.3,2.8,2.8,0,0,0-.78.79,3.45,3.45,0,0,0-.45,1A3.67,3.67,0,0,0,17.48,17Z"/>
    </symbol>
    <symbol id="wash-95">
      <path d="M8,15.55a2.59,2.59,0,0,1,.29-1.2,3,3,0,0,1,.8-1,3.84,3.84,0,0,1,1.2-.65,4.75,4.75,0,0,1,1.49-.23,4.35,4.35,0,0,1,1.57.27,3.24,3.24,0,0,1,1.2.76,3.65,3.65,0,0,1,.76,1.23,4.57,4.57,0,0,1,.27,1.63,8.08,8.08,0,0,1-.28,2.21,4.48,4.48,0,0,1-.8,1.59,3.22,3.22,0,0,1-1.26,1,4,4,0,0,1-1.63.33,4.36,4.36,0,0,1-1.86-.39A3.36,3.36,0,0,1,8.41,20l1-.85a2.37,2.37,0,0,0,.94.83,2.91,2.91,0,0,0,1.31.31,2.22,2.22,0,0,0,1.77-.79,3.44,3.44,0,0,0,.67-2.2,2.15,2.15,0,0,1-1,.87,3.3,3.3,0,0,1-1.49.33,4.46,4.46,0,0,1-1.43-.22A3.86,3.86,0,0,1,9,17.65a2.75,2.75,0,0,1-.76-.94A2.64,2.64,0,0,1,8,15.55Zm3.76-1.9a2.1,2.1,0,0,0-.84.16,2.46,2.46,0,0,0-.71.4,2.16,2.16,0,0,0-.48.61,1.51,1.51,0,0,0-.18.72,1.48,1.48,0,0,0,.18.72,2.22,2.22,0,0,0,.48.59,2.75,2.75,0,0,0,.71.41,2.39,2.39,0,0,0,.86.15,2.47,2.47,0,0,0,.86-.15,3,3,0,0,0,.7-.4,2,2,0,0,0,.48-.59,1.54,1.54,0,0,0,.18-.72,1.58,1.58,0,0,0-.18-.73,2.07,2.07,0,0,0-.48-.62,2.52,2.52,0,0,0-.72-.4A2.39,2.39,0,0,0,11.76,13.65Zm8.81,2.06a4.17,4.17,0,0,1,1.36.22,3.92,3.92,0,0,1,1.09.58,2.86,2.86,0,0,1,.73.89A2.5,2.5,0,0,1,24,18.53a2.53,2.53,0,0,1-.29,1.2,2.77,2.77,0,0,1-.8.94,4.07,4.07,0,0,1-1.19.62,5,5,0,0,1-1.48.21,4.69,4.69,0,0,1-2-.43,3.13,3.13,0,0,1-1.36-1.17l1-.79a2.81,2.81,0,0,0,1.07.85,3.11,3.11,0,0,0,1.38.32,2.72,2.72,0,0,0,.83-.13,2,2,0,0,0,.67-.34,1.71,1.71,0,0,0,.43-.54,1.54,1.54,0,0,0,.16-.71,1.42,1.42,0,0,0-.16-.68,1.54,1.54,0,0,0-.42-.53,1.91,1.91,0,0,0-.63-.34,2.39,2.39,0,0,0-.77-.12,2.67,2.67,0,0,0-1.06.21,2,2,0,0,0-.78.59H17.08s0-.13.06-.29.08-.37.14-.62.12-.52.2-.83l.21-.93c.19-.73.37-1.55.57-2.46h5.11v1.26H19.44l-.54,2.39a1.85,1.85,0,0,1,.67-.36,3.45,3.45,0,0,1,1-.14Z"/>
    </symbol>
    <symbol id="wash-hand">
      <path d="M22.71,4.25,21.52,2.08a1.86,1.86,0,0,1-.25-.64V1.08H20v.36A3.23,3.23,0,0,0,20.4,2.7l1.19,2.18a2.25,2.25,0,0,1,.2.9V16.61a.68.68,0,0,1-.18.4.71.71,0,0,1-.5,0l-.47-.21V10.64H19.36V20a.37.37,0,0,1-.18.3l-.25.12a1,1,0,0,1-.59,0,.64.64,0,0,1-.27-.4V9.6H16.78V20a1.63,1.63,0,0,0,.25.82l-.29.24a.78.78,0,0,1-.5.07l-.51-.18a.54.54,0,0,1-.22-.26V9.35H14.23v11l-.19.08a.47.47,0,0,1-.4-.08L13.23,20a1.06,1.06,0,0,1-.3-.61v-9H11.65v3.11l-.24.15a.68.68,0,0,1-.44,0l-.23-.11a.65.65,0,0,1-.26-.4V5.43a1.33,1.33,0,0,1,.29-.7l1.6-1.82a2.31,2.31,0,0,0,.55-1.38V1.08H11.65v.44a1.1,1.1,0,0,1-.23.53L9.82,3.88a2.62,2.62,0,0,0-.61,1.56v7.68a1.88,1.88,0,0,0,.93,1.52l.23.12a1.79,1.79,0,0,0,.86.21,1.47,1.47,0,0,0,.42-.06v4.51A2.42,2.42,0,0,0,12.36,21l.41.36a1.73,1.73,0,0,0,1.15.42,1.44,1.44,0,0,0,.59-.11l.08,0a1.51,1.51,0,0,0,.68.49l.51.18a1.57,1.57,0,0,0,.58.1A1.9,1.9,0,0,0,17.51,22l.52-.41a2.32,2.32,0,0,0,.65.09,1.82,1.82,0,0,0,.75-.14l.25-.12A1.67,1.67,0,0,0,20.63,20v-1.8a1.72,1.72,0,0,0,2.44-1.61V5.78A3.53,3.53,0,0,0,22.71,4.25Z"/>
    </symbol>
    <symbol id="underscore">
      <path d="M4,27H28v2H4Z"/>
    </symbol>
    <symbol id="iron">
      <path d="M31,26.5H1A1,1,0,0,1,.13,26a1,1,0,0,1,0-1c.24-.42,6-10.21,12.11-10.21H27.89L26.46,7.54h-18a1,1,0,0,1,0-2H27.26a1,1,0,0,1,1,.81l3.75,19a1,1,0,0,1-.2.85A1,1,0,0,1,31,26.5Zm-28.22-2h27l-1.52-7.68h-16C8.76,16.78,4.86,21.44,2.8,24.46Z"/>
    </symbol>
    <symbol id="dot-point">
      <path d="M16,14a2,2,0,1,1-2,2A2,2,0,0,1,16,14Z"/>
    </symbol>
    <symbol id="whitening">
      <path d="M16,7.22,27.37,26.91H4.64L16,7.22M16,3,1,29H31Z"/>
    </symbol>
    <symbol id="whitening-cl">
      <path d="M10.8,21.37a4,4,0,0,1,.2-1.31A3.29,3.29,0,0,1,11.61,19a3,3,0,0,1,.94-.74A2.83,2.83,0,0,1,13.8,18a2.67,2.67,0,0,1,2.58,1.68l-1.43.5a1.35,1.35,0,0,0-.49-.56,1.22,1.22,0,0,0-.68-.19,1.17,1.17,0,0,0-.58.15,1.32,1.32,0,0,0-.47.41,2,2,0,0,0-.32.62,2.86,2.86,0,0,0-.11.8,2.58,2.58,0,0,0,.12.8,2.21,2.21,0,0,0,.33.63,1.53,1.53,0,0,0,.47.41,1.27,1.27,0,0,0,.57.15,1.31,1.31,0,0,0,.73-.23,1.15,1.15,0,0,0,.46-.55l1.43.5a2.67,2.67,0,0,1-1,1.23,2.72,2.72,0,0,1-1.62.48,2.83,2.83,0,0,1-1.25-.28,2.76,2.76,0,0,1-.94-.75A3.31,3.31,0,0,1,11,22.68a4.13,4.13,0,0,1-.21-1.31Zm6.49-5.87h1.45v7.05a.94.94,0,0,0,.15.57.5.5,0,0,0,.44.2,1,1,0,0,0,.28-.05,1.14,1.14,0,0,0,.3-.13l.19,1.29a2.47,2.47,0,0,1-.68.24,3.21,3.21,0,0,1-.71.09,1.36,1.36,0,0,1-1.06-.42,1.74,1.74,0,0,1-.38-1.2V15.5Z"/>
    </symbol>
    <symbol id="square">
      <path d="M1,1V31H31V1ZM28.74,28.74H3.26V3.26H28.74Z"/>
    </symbol>
    <symbol id="circle">
      <path d="M16,4.5A11.5,11.5,0,1,0,27.5,16,11.5,11.5,0,0,0,16,4.5ZM16,25a9,9,0,1,1,9-9A9,9,0,0,1,16,25Z"/>
    </symbol>
    <symbol id="pro">
      <path d="M16,4.94A11,11,0,1,1,8.17,8.18,11,11,0,0,1,16,4.94M16,3A13,13,0,1,0,29,16,13,13,0,0,0,16,3Z"/>
    </symbol>
    <symbol id="p">
      <path d="M11.43,9.15h4.62c3,0,5.35,1,5.35,4.32S19,18,16.14,18H14.47v4.56h-3ZM16,15.62c1.67,0,2.46-.75,2.46-2.15s-.9-1.91-2.55-1.91h-1.4v4.06Z"/>
    </symbol>
    <symbol id="a">
      <path d="M14.18,9.15h3.64L22,22.59H18.82l-1.75-6.81c-.38-1.34-.74-2.93-1.1-4.33h-.08c-.32,1.41-.68,3-1.06,4.33l-1.76,6.81H10ZM12.74,17h6.47v2.36H12.74Z"/>
    </symbol>
    <symbol id="f">
      <path d="M11.68,9.15h8.48V11.7H14.72v3.11h4.65v2.55H14.72v5.23h-3Z"/>
    </symbol>
  </defs>
  <!-- symbols wash -->
  <view id="i-wash" viewBox="10 10 32 32"/>
  <use href="#wash" x="10" y="10"/>
  <view id="i-wash-forbidden" viewBox="60 10 32 32"/>
  <use href="#wash" x="60" y="10"/>
  <use href="#forbidden-icon" x="60" y="10"/>
  <view id="i-wash-30" viewBox="110 10 32 32"/>
  <use href="#wash" x="110" y="10"/>
  <use href="#wash-30" x="110" y="10"/>
  <view id="i-wash-40" viewBox="160 10 32 32"/>
  <use href="#wash" x="160" y="10"/>
  <use href="#wash-40" x="160" y="10"/>
  <view id="i-wash-50" viewBox="210 10 32 32"/>
  <use href="#wash" x="210" y="10"/>
  <use href="#wash-50" x="210" y="10"/>
  <view id="i-wash-60" viewBox="260 10 32 32"/>
  <use href="#wash" x="260" y="10"/>
  <use href="#wash-60" x="260" y="10"/>
  <view id="i-wash-95" viewBox="310 10 32 32"/>
  <use href="#wash" x="310" y="10"/>
  <use href="#wash-95" x="310" y="10"/>
  <view id="i-wash-hand" viewBox="360 10 32 32"/>
  <use href="#wash" x="360" y="10"/>
  <use href="#wash-hand" x="360" y="10"/>
  <view id="i-wash-30-under" viewBox="410 10 32 32"/>
  <use href="#wash" x="410" y="10"/>
  <use href="#wash-30" x="410" y="10"/>
  <use href="#underscore" x="410" y="11"/>
  <view id="i-wash-40-under" viewBox="460 10 32 32"/>
  <use href="#wash" x="460" y="10"/>
  <use href="#wash-40" x="460" y="10"/>
  <use href="#underscore" x="460" y="11"/>
  <view id="i-wash-50-under" viewBox="510 10 32 32"/>
  <use href="#wash" x="510" y="10"/>
  <use href="#wash-50" x="510" y="10"/>
  <use href="#underscore" x="510" y="11"/>
  <view id="i-wash-60-under" viewBox="560 10 32 32"/>
  <use href="#wash" x="560" y="10"/>
  <use href="#wash-60" x="560" y="10"/>
  <use href="#underscore" x="560" y="11"/>
  <view id="i-wash-95-under" viewBox="610 10 32 32"/>
  <use href="#wash" x="610" y="10"/>
  <use href="#wash-95" x="610" y="10"/>
  <use href="#underscore" x="610" y="11"/>
  <view id="i-wash-30-underdouble" viewBox="660 10 32 32"/>
  <use href="#wash" x="660" y="6"/>
  <use href="#wash-30" x="660" y="6"/>
  <use href="#underscore" x="660" y="7"/>
  <use href="#underscore" x="660" y="10"/>
  <view id="i-wash-40-underdouble" viewBox="710 10 32 32"/>
  <use href="#wash" x="710" y="6"/>
  <use href="#wash-40" x="710" y="6"/>
  <use href="#underscore" x="710" y="7"/>
  <use href="#underscore" x="710" y="10"/>
  <!-- rapassage -->
  <view id="i-iron" viewBox="10 60 32 32"/>
  <use href="#iron" x="10" y="60"/>
  <view id="i-iron-1" viewBox="60 60 32 32"/>
  <use href="#iron" x="60" y="60"/>
  <use href="#dot-point" x="60" y="64.5"/>
  <view id="i-iron-2" viewBox="110 60 32 32"/>
  <use href="#iron" x="110" y="60"/>
  <use href="#dot-point" x="107" y="64.5"/>
  <use href="#dot-point" x="113" y="64.5"/>
  <view id="i-iron-3" viewBox="160 60 32 32"/>
  <use href="#iron" x="160" y="60"/>
  <use href="#dot-point" x="155" y="64.5"/>
  <use href="#dot-point" x="161" y="64.5"/>
  <use href="#dot-point" x="167" y="64.5"/>
  <view id="i-iron-forbidden" viewBox="210 60 32 32"/>
  <use href="#iron" x="210" y="60"/>
  <use href="#forbidden-icon" x="210" y="60"/>
  <!-- blanchiment -->
  <view id="i-whitening" viewBox="10 110 32 32"/>
  <use href="#whitening" x="10" y="110"/>
  <view id="i-whitening-cl" viewBox="60 110 32 32"/>
  <use href="#whitening" x="60" y="110"/>
  <use href="#whitening-cl" x="60" y="110"/>
  <view id="i-whitening-forbidden" viewBox="110 110 32 32"/>
  <use href="#whitening" x="110" y="110"/>
  <use href="#forbidden-icon" x="110" y="115" width="28" height="28"/>
  <!-- séchage -->
  <view id="i-drying" viewBox="10 160 32 32"/>
  <use href="#square" x="10" y="160"/>
  <use href="#circle" x="10" y="160"/>
  <view id="i-drying-forbidden" viewBox="60 160 32 32"/>
  <use href="#square" x="60" y="160"/>
  <use href="#circle" x="60" y="160"/>
  <use href="#forbidden-icon" x="60" y="160"/>
  <view id="i-drying-moderate" viewBox="110 160 32 32"/>
  <use href="#square" x="110" y="160"/>
  <use href="#circle" x="110" y="160"/>
  <use href="#dot-point" x="110" y="160"/>
  <view id="i-drying-normal" viewBox="160 160 32 32"/>
  <use href="#square" x="160" y="160"/>
  <use href="#circle" x="160" y="160"/>
  <use href="#dot-point" x="157" y="160"/>
  <use href="#dot-point" x="163" y="160"/>
  <!-- nettoyage professionnel -->
  <view id="i-pro" viewBox="10 210 32 32"/>
  <use href="#pro" x="10" y="210"/>
  <view id="i-pro-forbidden" viewBox="60 210 32 32"/>
  <use href="#pro" x="60" y="210"/>
  <use href="#forbidden-icon" x="60" y="210"/>
  <view id="i-pro-p" viewBox="110 210 32 32"/>
  <use href="#pro" x="110" y="210"/>
  <use href="#p" x="110" y="210"/>
  <view id="i-pro-p-forbidden" viewBox="160 210 32 32"/>
  <use href="#pro" x="160" y="210"/>
  <use href="#p" x="160" y="210"/>
  <use href="#forbidden-icon" x="160" y="210"/>
  <view id="i-pro-a" viewBox="210 210 32 32"/>
  <use href="#pro" x="210" y="210"/>
  <use href="#a" x="210" y="210"/>
  <view id="i-pro-f" viewBox="260 210 32 32"/>
  <use href="#pro" x="260" y="210"/>
  <use href="#f" x="260" y="210"/>
  <view id="i-pro-p-underscore" viewBox="310 210 32 32"/>
  <use href="#pro" x="310" y="210"/>
  <use href="#p" x="310" y="210"/>
  <use href="#underscore" x="310" y="214"/>
  <view id="i-pro-f-underscore" viewBox="360 210 32 32"/>
  <use href="#pro" x="360" y="210"/>
  <use href="#f" x="360" y="210"/>
  <use href="#underscore" x="360" y="214"/>
  <!-- each symbols -->
  <view id="i-forbidden-wash" viewBox="10 310 32 32"/>
  <use href="#forbidden-icon" x="10" y="310"/>
  <view id="i-30" viewBox="60 310 32 32"/>
  <use href="#wash-30" x="60" y="310"/>
  <view id="i-dot-point" viewBox="110 310 32 32"/>
  <use href="#dot-point" x="110" y="310"/>
  <view id="i-underscore" viewBox="160 310 32 32"/>
  <use href="#underscore" x="160" y="310"/>
  <view id="i-square" viewBox="210 310 32 32"/>
  <use href="#square" x="210" y="310"/>
  <view id="i-circle" viewBox="260 310 32 32"/>
  <use href="#circle" x="260" y="310"/>
</svg>

Fichier images SVG

Au final, cette méthode permet de générer 41 icones à partir de 19 balises symbol. Taille des données transférées ~5.7 ko (gzip), mise en cache côté client, centralisation des assets, maintenance facilitée, etc….

Kortic implémente bien entendu ce type de SVG.
les drapeaux mondiaux visibles sur cette page.

Performance et intégration des pictogrammes dans Hyper Text Language Markup et Cascading Style Sheets ?
En savoir plus

Mise en œuvre HTML

Pour l'exemple, nous affichons l'icone de séchage prohibé en machine dans les consignes d'entretien de linge.

Note : l'utilisation de ce type de sprites SVG permet de s'affranchir de la gestion des positionnements en background-image CSS.

<img src="/svg/sample_xlinks.svg#i-drying-forbidden" alt="">

affichera

<img src="/blank.gif" alt="" class="drying-forbidden">

affichera avec la CSS ad hoc ci-dessous.

.drying-forbidden {
  background-image: url('/svg/sample_xlinks.svg#i-drying-forbidden');
  background-position: center center;
  background-size: cover;
  width: 1.75rem;
  height: 1.75rem;
  vertical-align: middle;
}

Allez… y'a plus qu'à !!
Si besoin ou remarque(s), ça se passe ici : contact

Licence Creative commons CC BY-NC-SA 4.0

Lien vers la licence : Creative commons CC BY-NC-SA 4.0

Les sources proposées sur Kortic Anthony Ladeuil sont mises à disposition selon les termes suivants :

Pas d’utilisation commerciale: Vous n'êtes pas autorisé à faire un usage commercial de cette Œuvre, tout ou partie du matériel la composant.
Bien entendu, la probabilité est faible pour que ce point soit respecté. En cas de sursaut d'honnêteté, vous pouvez payer un café, cette page soulagera votre conscience.
Attribution: Vous devez créditer l'Œuvre, intégrer un lien vers la licence et indiquer si des modifications ont été effectuées à l'Œuvre. Vous devez indiquer ces informations par tous les moyens raisonnables, sans toutefois suggérer que l'Offrant vous soutient ou soutient la façon dont vous avez utilisé son Œuvre.
Partage dans les mêmes conditions: Dans le cas où vous effectuez un remix, que vous transformez, ou créez à partir du matériel composant l'Œuvre originale, vous devez diffuser l'Œuvre modifiée dans les mêmes conditions, c'est-à-dire avec la même licence avec laquelle l'Œuvre originale a été diffusée.
Pas de restrictions complémentaires Vous n'êtes pas autorisé à appliquer des conditions légales ou des mesures techniques qui restreindraient légalement autrui à utiliser l'Œuvre dans les conditions décrites par la licence.

Note : Vous n'êtes pas dans l'obligation de respecter la licence pour les éléments ou matériel appartenant au domaine public ou dans le cas où l'utilisation que vous souhaitez faire est couverte par une exception.

Aucune garantie n'est donnée. Il se peut que la licence ne vous donne pas toutes les permissions nécessaires pour votre utilisation. Par exemple, certains droits comme les droits moraux, le droit des données personnelles et le droit à l'image sont susceptibles de limiter votre utilisation.

À défaut de tout ça, un petit message et une référence à Kortic restent les bienvenus.

Limitation de responsabilité

Le code est fourni « tel quel », sans garantie d'aucune sorte, expresse ou implicite. En aucun cas l’auteur ou les détenteurs du copyright ne seront responsables de toute réclamation, dommage ou autre responsabilité, que ce soit dans une action contractuelle, délictuelle ou autre, résultant de, en dehors ou en relation avec le logiciel ou l'utilisation ou d'autres transactions.

Vous aimez cette page ?
Dites-le !