SVG dans HTML5 - Apprendre le HTML

SVG (Scalable Vector Graphics) est un format basé sur XML qui décrit des graphiques bidimensionnels sous forme de formes — points, lignes, courbes et texte — plutôt que comme une grille de pixels. Comme le navigateur dessine un SVG à partir d'une description mathématique, il reste parfaitement net quelle que soit la taille et la densité d'écran, ce qui explique pourquoi les icônes, logos, graphiques et diagrammes sont si souvent livrés en SVG.

HTML5 offre plusieurs façons d'intégrer SVG dans une page, chacune impliquant des compromis différents en matière d'accès au DOM, de mise en cache, de style et de fallback. Cette page présente toutes les méthodes d'intégration courantes, puis vous aide à choisir entre elles.

Si vous découvrez ce format, commencez par l'introduction au SVG. Pour une liste complète des éléments et attributs, consultez la référence SVG.

SVG inline

La méthode la plus puissante consiste à écrire le balisage SVG directement dans votre HTML. Comme le SVG fait partie du document, chaque forme est un vrai nœud du DOM : vous pouvez le styliser avec CSS, le scripter avec JavaScript et réagir aux événements sur des chemins individuels.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200" viewBox="0 0 300 200"
         xmlns="http://www.w3.org/2000/svg"
         role="img" aria-labelledby="circleTitle">
      <title id="circleTitle">A pink circle outlined in purple</title>
      <circle cx="150" cy="100" r="50" stroke="purple" stroke-width="5" fill="pink" />
    </svg>
  </body>
</html>

Essayez vous-même »

Décortiquons ce code :

Un SVG inline commence toujours par une balise <svg> et se termine par </svg>.
width et height définissent la taille de la boîte SVG sur la page (en pixels CSS).
viewBox="0 0 300 200" définit le système de coordonnées interne : les valeurs sont min-x min-y width height. Le navigateur met ces unités utilisateur à l'échelle pour qu'elles tiennent dans les width/height affichés, donc un viewBox est ce qui rend le graphique vraiment évolutif et responsive. (Supprimez width/height et le SVG s'étirera pour remplir son conteneur tout en conservant le rapport d'aspect du viewBox.)
xmlns="http://www.w3.org/2000/svg" déclare l'espace de noms SVG. Il est obligatoire quand le SVG est servi en tant que fichier .svg autonome ; à l'intérieur de HTML5, le navigateur l'infère généralement, mais l'inclure rend le balisage portable.
L'élément <circle> dessine un cercle. cx et cy sont les coordonnées x/y de son centre (par défaut 0,0 si omis), et r est le rayon.
stroke et stroke-width contrôlent le contour — ici une bordure violette de 5px. fill définit la couleur intérieure, ici rose.

SVG possède un ensemble d'éléments de formes de base que vous combinez pour créer un graphique. Voir la liste des éléments de formes SVG ci-dessous.

Danger

SVG est du XML, donc chaque élément doit être correctement fermé. Les balises auto-fermantes comme <circle ... /> ont besoin du slash final, et les balises conteneurs comme <svg> ont besoin d'un </svg> correspondant.

Accessibilité pour le SVG inline

Un SVG décoratif peut être masqué des technologies d'assistance avec aria-hidden="true". Quand le graphique a du sens, exposez-le :

Ajoutez role="img" pour que les lecteurs d'écran traitent tout le <svg> comme une seule image.
Donnez-lui un <title> (un nom accessible court) et, si nécessaire, un <desc> (une description plus longue), puis référencez-les avec aria-labelledby.

<svg viewBox="0 0 100 100" role="img" aria-labelledby="t d"
     xmlns="http://www.w3.org/2000/svg">
  <title id="t">Sales chart</title>
  <desc id="d">Bar chart showing a 20% rise in Q4 sales.</desc>
  <rect x="10" y="40" width="20" height="50" fill="teal" />
</svg>

Notez que <title> et <desc> sont des éléments SVG spéciaux, pas du texte visible — <title> n'est pas la même chose que le <title> HTML dans l'en-tête du document.

Intégrer un fichier `.svg` externe

Le balisage inline alourdit votre HTML et ne peut pas être mis en cache séparément. Quand vous avez une ressource réutilisable, gardez le SVG dans son propre file.svg et référencez-le. Il existe quatre façons courantes de le faire.

En tant qu'image avec `<img>`

L'approche la plus simple et la plus largement prise en charge. Le SVG se comporte comme n'importe quelle autre image — il est mis en cache, peut être chargé de façon différée et est facile à utiliser.

<img src="logo.svg" width="120" height="40" alt="Company logo" />

Compromis : vous ne pouvez pas accéder aux éléments internes du SVG depuis le CSS ou le JavaScript de la page, et les scripts à l'intérieur du SVG ne s'exécutent pas. C'est généralement exactement ce que vous souhaitez pour les icônes et les logos. Fournissez toujours un texte alt. Consultez le guide HTML <img> et images.

En tant qu'objet avec `<object>`

<object> charge le SVG comme un document séparé, donc ses scripts internes s'exécutent et vous pouvez y accéder via contentDocument. Il offre également un contenu de fallback naturel entre les balises.

<object type="image/svg+xml" data="diagram.svg" width="300" height="200">
  <img src="diagram.png" alt="Diagram fallback" />
</object>

Compromis : les scripts entre les domaines sont soumis à la politique de même origine (CORS), et les styles de la feuille de style de la page parente ne s'appliquent pas au SVG. En savoir plus dans le chapitre balise HTML <object>.

En tant qu'élément intégré avec `<embed>`

<embed> charge également le SVG comme un document externe. Il est similaire à <object> mais ne peut pas fournir de contenu de fallback (il n'a pas de balise fermante ni de nœuds enfants).

<embed type="image/svg+xml" src="diagram.svg" width="300" height="200" />

Préférez <object> à <embed> quand vous avez besoin d'un fallback. Consultez la balise HTML <embed> pour plus de détails.

En tant que `background-image` CSS

Quand le SVG est purement décoratif, définissez-le comme arrière-plan CSS. Il est mis en cache et garde votre HTML propre, mais il est invisible pour les technologies d'assistance et inaccessible par script.

<style>
  .hero {
    width: 300px;
    height: 200px;
    background-image: url("pattern.svg");
    background-size: cover;
  }
</style>
<div class="hero"></div>

Vous pouvez même intégrer un petit SVG comme URI de données : background-image: url('data:image/svg+xml,...').

SVG inline vs. fichier externe

Capacité	`<svg>` inline	Externe (`img`/`object`/`embed`/CSS)
Styliser les formes avec le CSS de la page	Oui	Non (uniquement `<object>`/`<embed>` via CSS interne)
Scripter des formes individuelles depuis la page	Oui	Limité / bloqué par CORS
Mis en cache séparément du HTML	Non	Oui
Réutilisable sur plusieurs pages sans copier-coller	Non	Oui
Garde le HTML léger	Non	Oui

Règle empirique : optez pour le SVG inline quand vous avez besoin d'animer, de thématiser ou d'interagir avec le graphique (icônes qui changent de couleur au survol, graphiques interactifs). Utilisez un <img src="*.svg"> externe pour les logos statiques et les images décoratives réutilisées sur le site.

SVG vs. images raster

SVG est un format vectoriel ; PNG, JPEG, GIF et WebP sont des formats raster (pixels).

Indépendance de résolution. SVG s'adapte à toutes les tailles sans flou et sans fichiers @2x/@3x séparés — idéal pour les icônes, logos et dessins au trait sur les écrans haute résolution.
Fichiers légers pour les graphiques simples. Les graphiques plats avec quelques formes sont souvent bien plus légers en SVG, et le texte qu'ils contiennent reste sélectionnable et recherchable.
Modifiable et scriptable. SVG est du texte, il peut donc être versionné dans un système de contrôle de versions et animé.

Quand SVG est le mauvais choix : les photographies et les images très détaillées. Une photo décrite comme des milliers de formes serait énorme et lente à rendre — préférez JPEG ou WebP à la place. SVG excelle aussi pour la géométrie nette, tandis que les effets complexes pixel par pixel appartiennent aux formats raster ou à l'élément <canvas>.

Éléments de formes SVG

Le SVG inline fournit un ensemble de formes prêtes à l'emploi que vous combinez pour construire des graphiques :

rectangle <rect> — rectangles et rectangles aux coins arrondis
cercle <circle> — cercles définis par un centre et un rayon
ellipse <ellipse> — ellipses avec des rayons x/y séparés
ligne <line> — un segment droit entre deux points
polyligne <polyline> — une série de segments droits connectés
polygone <polygon> — une forme fermée à partir d'une liste de points
chemin <path> — lignes et courbes arbitraires, la forme la plus flexible

Voir aussi

Pratique

Quelle méthode vous permet de styliser et de scripter des formes SVG individuelles avec le CSS et le JavaScript propres à la page ?

Écrire le SVG en ligne avec un élément <svg> dans le HTML.Intégrer le SVG avec <img src='logo.svg'>.Définir le SVG comme background-image CSS.Référencer le fichier SVG avec <embed>.