SVG est un format d'image vectoriel (basé sur XML), il se redimensionne donc à n'importe quelle taille sans devenir flou. Vous pouvez l'inclure de deux façons principales, chacune avec ses compromis.
Avantages : vous pouvez le styliser avec CSS (fill, stroke), animer ses parties, changer la couleur via currentColor (hérite de la couleur du texte), et réagir aux événements — car c'est un vrai DOM. Aucune requête HTTP supplémentaire.
Inconvénients : alourdit le HTML, non mis en cache séparément, les icônes répétées dupliquent le balisage.
<img> — référencé en tant que fichier<img src="logo.svg" alt="Company logo" width="120" />
Avantages : mis en cache par le navigateur, garde le HTML propre, simple. Inconvénients : vous ne pouvez pas styliser ou scripter ses éléments internes avec votre CSS/JS — c'est une image opaque.
Need to recolor/animate/interact with the SVG → inline SVG
Static logo/illustration, want caching + clean HTML → <img src=".svg">
Many repeated icons → an SVG sprite (<use>) or an icon component
<svg role="img" aria-label="Settings">...</svg> <!-- meaningful icon -->
<svg aria-hidden="true">...</svg> <!-- decorative: hide from AT -->
Le choix entre une SVG inline et <img> dépend de la question : avez-vous besoin de styliser/animer le graphique (inline) ou simplement de l'afficher efficacement (<img>).
Les icônes qui changent de couleur au survol ou selon le thème utilisent inline (souvent comme composants) ; les éléments de marque statiques utilisent <img>.
Dans les deux cas, les vecteurs restent nets à chaque résolution — idéal pour les icônes et logos.