SVG : qu’est-ce que c’est, concepts clés et utilisation dans le développement web

Qu’est-ce que le SVG ?

SVG est un format de graphiques vectoriels basé sur XML, introduit en 2001 comme recommandation du W3C. Contrairement aux formats raster, le SVG décrit les images via des primitives géométriques : points, lignes, courbes et polygones. Un fichier SVG est un document XML texte brut qui peut être lu, édité et compressé avec des outils standard.

L’architecture SVG comprend plusieurs concepts clés. viewBox définit un système de coordonnées virtuel indépendant des dimensions réelles de l’élément. Par exemple, viewBox="0 0 100 100" crée une grille carrée de 100×100, à l’intérieur de laquelle toutes les coordonnées sont fixes. Lorsque la largeur ou la hauteur du conteneur change, le contenu est mis à l’échelle proportionnellement.

Selon la W3C SVG 2 Specification, la version moderne du SVG prend en charge les dégradés, les masques, les filtres, le texte avec positionnement arbitraire, l’interactivité via JavaScript et l’animation via CSS et SMIL. Le SVG est intégré au DOM en tant qu’élément HTML complet, permettant un contrôle programmatique sur chaque primitive graphique.

Dans le développement mobile, le SVG est également utilisé sous iOS via UIGraphicsImageRenderer et sous Android via VectorDrawable — les deux formats convertissent des descriptions de type SVG en rasters accélérés par le matériel sur le GPU.

Histoire et évolution du format SVG

Le SVG 1.0 est devenu une recommandation du W3C en 2001, le SVG 1.1 en 2003 et le SVG 2.0 est en développement depuis 2012. La principale innovation du SVG 2 est une intégration plus profonde avec CSS, la prise en charge des modes de composition et de mélange, et la possibilité d’utiliser le SVG dans HTML sans préfixes d’espace de noms.

Bien que le SVG 2 n’ait pas encore atteint le statut de Recommandation, les navigateurs modernes prennent déjà en charge la plupart de ses fonctionnalités. Chrome, Safari, Firefox et Edge ont une prise en charge quasi complète du SVG 1.1 et une partie significative du SVG 2.

Éléments de base du SVG

Le SVG fournit un ensemble d’éléments pour décrire des graphiques bidimensionnels. Chaque élément possède des attributs qui définissent sa position, sa taille et son apparence visuelle. Les attributs peuvent être définis comme des attributs xml ou via des propriétés CSS.

• <rect> — rectangle avec les attributs x, y, width, height, rx, ry (arrondi des coins).
• <circle> — cercle avec les attributs cx, cy (centre) et r (rayon).
• <ellipse> — ellipse avec les attributs cx, cy, rx, ry.
• <line> — segment de ligne avec les attributs x1, y1, x2, y2.
• <polyline> — ligne brisée avec l’attribut points (liste de coordonnées).
• <polygon> — polygone fermé avec l’attribut points.
• <path> — tracé arbitraire avec l’attribut d (commandes : M, L, C, Q, A, Z).
• <text> — élément de texte avec les attributs x, y, font-size, font-family.

L’élément path est l’élément SVG le plus puissant et le plus flexible. L’attribut d contient une séquence de commandes : M (moveTo), L (lineTo), C (courbe de Bézier cubique), Q (courbe de Bézier quadratique), A (arc), Z (fermer le chemin). Chaque commande a une forme absolue ou relative (lettre majuscule ou minuscule).

Le SVG prend également en charge le regroupement d’éléments via <g>. Le groupe hérite des attributs visuels (fill, stroke, transform) vers tous les éléments enfants. Cela permet d’appliquer un style unique à tout un ensemble de formes et de contrôler leur position via une seule transformation.

SVG vs graphiques raster : comparaison des formats

La principale différence entre SVG et les formats raster (JPEG, PNG, WebP) est la manière de stocker l’information. Le raster stocke la couleur de chaque pixel dans une grille de taille fixe. Le SVG stocke des commandes mathématiques pour reproduire des formes. Cette différence détermine tous les avantages et inconvénients des formats.

Selon HTTP Archive, 2025, 68% des sites web utilisent le SVG pour les icônes, 34% pour les illustrations et 22% pour les logos. La taille moyenne d’une icône SVG est de 0,5–2 Ko, tandis qu’une icône raster de qualité similaire occupe 5–20 Ko au format PNG.

Le SVG n’est pas adapté aux photographies et aux images raster complexes — la taille de la description XML dépasserait celle du JPEG équivalent. Domaines d’application recommandés pour le SVG : icônes, logos, illustrations, diagrammes, graphiques, éléments d’interface avec design adaptatif.

Quand choisir le SVG et quand choisir le format raster

Le SVG est le choix optimal pour les éléments d’interface qui doivent paraître nets sur les écrans Retina et à tout niveau de zoom du navigateur. Le raster est pour les photographies, les textures complexes et les images avec des millions de couleurs où la description vectorielle serait excessivement complexe.

Approche hybride — combinaison du SVG pour les éléments d’interface et du WebP/AVIF pour le contenu photo — offre le meilleur équilibre entre qualité et performance de chargement de la page.

SVG inline et stylisation CSS

SVG inline consiste à intégrer le balisage SVG directement dans un document HTML, plutôt que sous forme de fichier séparé via <img> ou background-image. L’avantage du SVG inline est que les éléments SVG deviennent partie du DOM et peuvent être stylisés via CSS, contrôlés via JavaScript et animés sans requêtes supplémentaires au serveur.

Contrairement à <img src="icon.svg">, où le SVG est isolé dans le shadow DOM, le SVG inline hérite des couleurs et polices du document parent. Cela permet de mettre en œuvre, par exemple, le changement de couleur d’une icône au survol via la pseudo-classe CSS :hover sans charger un fichier séparé pour chaque état.

Selon CSS-Tricks, le SVG inline est la méthode recommandée pour utiliser les icônes dans les applications web modernes. Les propriétés CSS fill, stroke, stroke-width s’appliquent directement aux éléments SVG. Pour la personnalisation via CSS, il est important que le SVG source n’ait pas fill et stroke définis comme attributs inline — sinon CSS ne peut pas les remplacer.

• Avantages : stylisation via CSS, contrôle via JS, aucune requête HTTP, adaptabilité du viewBox.
• Inconvénients : augmentation de la taille de la page HTML, impossibilité de mise en cache séparée du HTML.
• Alternative : sprites SVG — regrouper plusieurs SVG dans un seul fichier et utiliser <use href="#id">.

Les sprites SVG résolvent le problème de cache : toutes les icônes sont regroupées dans un seul fichier, le navigateur le charge une fois, et les icônes individuelles sont accédées via <use> en spécifiant l’id de l’élément souhaité dans le sprite.

Animation SVG : CSS et SMIL

L’animation SVG avec CSS est la façon la plus courante et la plus performante d’animer des graphiques vectoriels dans le navigateur. Les propriétés CSS comme transform, opacity et fill s’appliquent aux éléments SVG comme aux éléments HTML. Pour l’animation le long d’un chemin arbitraire, on utilise la propriété CSS offset-path.

SMIL (Synchronized Multimedia Integration Language) est un mécanisme d’animation intégré au SVG, indépendant de CSS. Les éléments <animate>, <animateTransform> et <animateMotion> permettent d’animer n’importe quel attribut SVG sans JavaScript ni CSS. L’animation SMIL est garantie d’être synchronisée avec la fréquence d’images du navigateur.

Selon MDN Web Docs, SMIL est pris en charge dans tous les navigateurs modernes, mais l’animation CSS est considérée comme plus prévisible et performante. Le cas d’utilisation principal de SMIL est l’animation d’attributs inaccessibles via CSS, comme d (path) de l’élément <path>.

JavaScript + requestAnimationFrame offre un contrôle maximal sur l’animation SVG. Les développeurs web utilisent des bibliothèques comme GSAP et Anime.js pour des séquences d’animation complexes avec des timelines et des fonctions d’easing difficiles à implémenter avec du CSS pur.

Exemples de code : création de graphiques SVG

Le premier exemple est une icône de maison simple utilisant des éléments SVG de base. Toutes les formes sont rect et polyline :

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

Le deuxième exemple montre une animation de rotation d’un loader via CSS. Il utilise <circle> avec l’attribut stroke-dasharray pour créer un contour en pointillés :

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

Le troisième exemple utilise la bibliothèque GSAP pour animer un chemin afin de dessiner un contour en douceur. GSAP travaille avec l’attribut stroke-dashoffset, créant un effet d’apparition de la ligne :

// Dessiner un chemin avec GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});