Statut : stable · Niveau : intermédiaire
TL;DR — Bonnes pratiques d'intégration et d'optimisation des icônes SVG chez Alsacréations : techniques d'intégration (img, inline, sprite), réduction de la syntaxe SVG via SVGOMG.
Ce document rassemble les bonnes pratiques appliquées par l'agence Alsacreations.fr concernant les icônes. Il évolue dans le temps et s'adapte à chaque nouveau projet.
On cherchera à réduire le poids des ressources icônes (SVG) par
- plusieurs techniques d'intégration dans le document
- une réduction de la syntaxe SVG
Selon la façon dont l'icône est intégrée au document, la performance de chargement peut être affectée.
- En image
<img src="/icones/kiwi.svg">(mise en cache possible, code inline réduit, requête HTTP supplémentaire au premier chargement, pas de style possible par CSS depuis le document) - Code inline
<svg>...</svg>(pas de mise en cache, code inline, une seule requête HTTP, style possible via CSS du document etcurrentColorcar fait partie de l'arborescence DOM) - Composants/sprites/use et divers
Diverses techniques complémentaires.
- Utiliser svgomg
- Utiliser les options par défaut, éventuellement tester en cochant les paramètres supplémentaires.
- Jouer sur la Precision pour arrondir les valeurs numériques (un niveau de 1 ou 2 est atteignable, attention à zoomer pour vérifier les détails).
- Ouvrir dans un éditeur de code source
- Supprimer les bitmaps éventuels dans le code (parfois le cas d'ombrages ou logos), remplacer par du vectoriel.
- Simplifier encore ce que svgomg n'a pas pu remarquer, notamment doublons/imbrications de
<g>.
- Ouvrir dans un éditeur graphique tel que Figma
- Supprimer les formes inutiles, recadrer, etc.
- HTML — Sémantique des médias.
- CSS — Stylisation des SVG via
currentColor. - Webdesign — Production graphique des pictogrammes.
- Performances — Réduire le poids des assets.