SVG pour le web : guide complet

SVG est le seul format d'image nativement vectoriel du web. Contrairement à JPEG, PNG ou WebP, un fichier SVG ne stocke pas des pixels mais des instructions géométriques, tracés, courbes, formes, interprétées par le navigateur à l'affichage. Le résultat est une image nette à n'importe quelle taille, du favicon 16×16 px à l'écran 8K, pour un poids de fichier souvent dérisoire. Son support navigateur est de 100 % depuis Internet Explorer 9. Voici tout ce qu'il faut savoir pour l'utiliser intelligemment.

Vecteur vs raster : la différence fondamentale

Les formats raster (JPEG, PNG, WebP, AVIF) stockent l'image sous forme d'une grille de pixels. Agrandir une image raster au-delà de sa résolution native provoque le flou caractéristique de la pixellisation. Chaque doublement de dimensions quadruple le nombre de pixels, et donc le poids mémoire.

Le format SVG (Scalable Vector Graphics) stocke des descriptions mathématiques : "un cercle de rayon 50 px, rempli de rouge, centré en (100, 100)". Afficher ce cercle en 10 px ou en 1 000 px revient à recalculer la même équation, la qualité est parfaite dans les deux cas, et le fichier ne grossit pas d'un octet.

SVG est un format XML standardisé par le W3C. Un fichier .svg est du texte lisible, modifiable, versionnable et compressible comme n'importe quel document HTML ou CSS.

SVG vs PNG vs JPEG : quand choisir quoi ?

Accessibilité : title, desc et aria

Un SVG bien structuré est accessible aux technologies d'assistance (lecteurs d'écran) sans effort supplémentaire. Les deux balises essentielles sont <title> et <desc> :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
     role="img" aria-labelledby="logoTitle logoDesc">
  <title id="logoTitle">Logo imgpact</title>
  <desc id="logoDesc">Un éclair stylisé symbolisant la rapidité d'optimisation</desc>
  <!-- chemins SVG -->
</svg>

Pour les SVG purement décoratifs (icônes qui accompagnent un libellé textuel), masquez-les aux lecteurs d'écran pour éviter la redondance :

<svg aria-hidden="true" focusable="false">
  <!-- icône décorative -->
</svg>
<span>Télécharger</span>

Animations SVG : CSS et SMIL

SVG supporte nativement deux types d'animations :

Animations CSS (recommandée) : les éléments SVG répondent aux propriétés CSS transform, opacity, fill, stroke. Vous animez un SVG exactement comme un élément HTML :

<style>
  .spinner {
    animation: rotate 1s linear infinite;
    transform-origin: center;
  }
  @keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
</style>
<svg viewBox="0 0 24 24">
  <circle class="spinner" cx="12" cy="12" r="10"
          fill="none" stroke="#0066cc" stroke-width="2" />
</svg>

SMIL : animations déclarées directement dans le SVG avec des balises comme <animate>. Utiles pour des SVG autonomes intégrés via une balise <img> (le CSS externe n'y a pas accès), mais moins flexibles que CSS.

Les SVG animés remplacent avantageusement les GIFs animés, qui sont souvent 10 à 50 fois plus lourds, pour les loaders, indicateurs de progression et microinteractions.

Inline SVG vs balise <img> : quand choisir quoi ?

Il existe deux façons principales d'intégrer un SVG en HTML, avec des cas d'usage distincts :

Balise <img src="logo.svg">

• Simple à implémenter, mis en cache par le navigateur comme n'importe quelle image
• N'alourdit pas le DOM HTML, n'expose pas le code SVG
• Impossible de styliser les éléments internes via CSS externe
• Impossible d'animer les chemins internes via JavaScript
• Idéal pour : logos en footer, illustrations d'articles, images SVG statiques

SVG inline (code copié directement dans le HTML)

• Accès complet au DOM SVG : chaque élément est ciblable par CSS ou JS
• Permet de changer la couleur du logo selon le thème (dark/light mode) avec une variable CSS
• Permet les animations complexes et interactions pilotées par JavaScript
• Alourdit le HTML, non cachable séparément, code plus verbeux
• Idéal pour : icônes d'interface, logos colorisables selon le contexte, illustrations interactives

Performance : optimiser les SVG avec SVGO

Les SVG exportés par Illustrator, Figma ou Inkscape contiennent souvent un volume important de métadonnées inutiles : commentaires d'éditeur, IDs auto-générés, attributs redondants, groupes vides, balises <defs> vides. SVGO (SVG Optimizer) est l'outil de référence pour nettoyer ces fichiers :

npm install -g svgo
svgo logo.svg --output logo.min.svg

Les gains sont souvent spectaculaires : 30 à 60 % de réduction de taille sans aucune modification visuelle. Quelques règles supplémentaires pour les performances :

• Évitez les chemins trop complexes : une illustration avec 50 000 points de contrôle génère un SVG lourd et un DOM coûteux à rendre. Au-delà d'un certain niveau de détail, un WebP optimisé sera plus léger.
• Utilisez toujours viewBox, pas width/height fixes : l'attribut viewBox rend votre SVG naturellement responsive sans CSS supplémentaire.
• Activez la compression gzip/Brotli : comme SVG est du texte XML, la compression HTTP réduit encore sa taille de 60 à 80 %. Assurez-vous que votre serveur sert les SVG avec Content-Encoding: gzip.
• Fusionnez les groupes inutiles : des couches Figma non fusionnées génèrent des dizaines de balises <g> vides qui alourdissent inutilement le DOM.