Introduction au SVG

SVG (Scalable Vector Graphics) décrit des graphiques bidimensionnels en XML. Au lieu de stocker une grille de pixels colorés (comme le font JPEG, PNG ou GIF), un fichier SVG stocke les instructions pour dessiner des formes — lignes, courbes, cercles, rectangles et texte. Le navigateur lit ces instructions et restitue l'image à la taille à laquelle elle est affichée, ce qui garantit un rendu net à n'importe quel niveau de zoom ou résolution d'écran.

SVG est une recommandation du W3C et s'intègre avec d'autres standards tels que le DOM, CSS et JavaScript. Comme chaque forme est un véritable élément dans le document, vous pouvez la styliser avec CSS, l'animer et réagir aux clics et aux survols, tout comme n'importe quel autre élément HTML.

Cette page explique comment SVG fonctionne à l'intérieur d'une page HTML, comment son système de coordonnées est organisé, quand utiliser SVG plutôt que Canvas ou une image raster, et les trois méthodes standard pour intégrer un document SVG.

Fonctionnement du SVG dans une page HTML

Une image SVG est elle-même un petit document XML. L'élément racine <svg> contient des éléments enfants représentant des formes, que le navigateur peint dans l'ordre du code source — les éléments suivants se dessinent par-dessus les précédents, de la même façon que les calques s'empilent dans un programme de peinture.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Le système de coordonnées

SVG utilise une grille de coordonnées dont l'origine (0, 0) se trouve dans le coin supérieur gauche. L'axe x croît vers la droite et l'axe y croît vers le bas — notez que cela diffère de la convention y-vers-le-haut que vous connaissez peut-être des cours de mathématiques.

• Les attributs width et height sur <svg> définissent la taille de la zone de dessin en pixels.
• Un attribut viewBox (par exemple viewBox="0 0 100 100") définit l'espace de coordonnées interne, permettant au même dessin de s'adapter à n'importe quelle taille rendue.

Dans l'exemple ci-dessus, le centre du cercle est à (50, 50) — le milieu d'un canevas 100×100 — et son rayon s'étend de 40 unités dans toutes les directions.

Lecture des attributs de <circle>

Chaque attribut de l'élément <circle> contrôle un aspect de son rendu :

Pour en savoir plus sur le tracé des contours, consultez SVG stroking, et découvrez toutes les formes et attributs dans la référence SVG.

SVG vs. Canvas vs. images raster

Le choix de la bonne technologie dépend de ce que vous dessinez et de la façon dont cela évoluera.

• SVG est idéal pour les graphiques qui doivent rester nets à toute taille et que vous souhaitez styliser, animer ou rendre interactifs : icônes, logos, graphiques, diagrammes et cartes. Chaque forme est un nœud du DOM, donc elle est accessible et facile à scripter. Cela peut devenir lent lorsqu'une scène contient des dizaines de milliers d'éléments individuels.
• Canvas dessine des pixels sur un bitmap avec JavaScript. Il n'a pas de DOM par forme, ce qui le rend efficace pour les scènes à évolution rapide avec de nombreux objets — jeux, effets de particules et visualisations de données en temps réel — mais le résultat ne s'adapte pas sans redessiner et est plus difficile à rendre accessible.
• Les images raster (JPEG, PNG, GIF, WebP) stockent des pixels fixes. Elles sont le bon choix pour les photographies et les textures complexes, mais elles deviennent floues ou pixelisées lors d'un agrandissement et sont plus lourdes à haute résolution.

Une règle simple : utilisez SVG pour les arts vectoriels scriptables indépendants de la résolution ; utilisez Canvas pour le rendu pixel haute fréquence ; utilisez les formats raster pour les photographies.

Intégrer du SVG en HTML

Les fichiers SVG utilisent l'extension .svg et sont pris en charge par tous les navigateurs modernes. Il existe trois façons courantes d'intégrer du SVG dans une page, chacune avec ses propres compromis.

<svg> en ligne

Écrivez le balisage SVG directement dans votre HTML. Cela vous donne un accès complet à chaque forme, vous pouvez donc la styliser avec CSS et animer ou scripter des éléments individuels depuis la même page.

<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
</body>

<img> avec une source SVG

Pointez un élément <img> vers un fichier .svg externe. C'est simple et mis en cache, mais le SVG est traité comme une image plate : ses éléments internes ne peuvent pas être stylisés ou scriptés depuis la page hôte.

<img src="circle.svg" width="100" height="100" alt="A yellow circle outlined in green" />

L'élément <object>

L'élément <object> charge le SVG en tant que document séparé tout en exposant son DOM aux scripts, et permet de fournir du contenu de secours pour les navigateurs qui ne parviennent pas à le charger.

<object data="circle.svg" type="image/svg+xml" width="100" height="100">
  Your browser does not support SVG.
</object>

Pour plus d'informations sur l'élément en ligne lui-même, consultez la balise HTML <svg> et SVG en HTML5.

Créer des images SVG

Vous pouvez écrire du SVG à la main dans n'importe quel éditeur de texte, ce qui est pratique pour les icônes et les formes simples. Pour les illustrations avec de nombreuses courbes et tracés, un programme de dessin tel qu'Inkscape est généralement plus pratique — il exporte des fichiers .svg propres que vous pouvez ensuite affiner à la main. Pour dessiner des formes courbes par code, commencez par l'élément SVG path, et pour les segments droits consultez l'élément SVG line.

Rendre le SVG accessible

Lorsqu'un SVG transmet une signification, donnez à la technologie d'assistance quelque chose à lire. L'approche dépend de la façon dont le SVG est intégré :

• Pour un <svg> en ligne, ajoutez un <title> (et une <desc> plus longue en option) comme premiers enfants, et marquez la racine avec role="img". Référencer le titre avec aria-labelledby lie le nom accessible à l'élément.

<svg role="img" aria-labelledby="circleTitle"
     xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <title id="circleTitle">A yellow circle outlined in green</title>
  <desc>A solid yellow disk with a four-pixel green border, used as a status indicator.</desc>
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

• Pour un SVG chargé via <img>, utilisez un attribut alt descriptif, exactement comme pour n'importe quelle image.
• Si le graphique est purement décoratif, masquez-le à la technologie d'assistance avec aria-hidden="true" (en ligne) ou un alt="" vide (sur <img>) pour que les lecteurs d'écran l'ignorent.

Vous pouvez également ajouter du texte accessible à l'intérieur d'un dessin avec l'élément SVG text.

Avantages de l'utilisation du SVG

Par rapport aux formats raster tels que JPEG et GIF, SVG offre plusieurs avantages :

• Les images SVG peuvent être générées et modifiées avec n'importe quel éditeur de texte.
• Les images SVG peuvent être scriptées, indexées, recherchées et compressées.
• Vous pouvez imprimer des images SVG avec une qualité élevée à n'importe quelle résolution.
• Les images SVG peuvent être redimensionnées et zoomées sans perte de qualité.
• Chaque forme fait partie du DOM, elle peut donc être stylisée avec CSS et animée.
• SVG est un standard ouvert du W3C.

Pratique