English

<svg>

Intégrer un graphique vectoriel accessible directement dans le HTML

— 2 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • svg

<svg> — Le graphique vectoriel

La balise <svg> intègre un graphique vectoriel dans ta page. Contrairement aux images matricielles, un SVG est net a toutes les tailles et peut être manipule en CSS et JavaScript.

Quand l'utiliser

Tu as trois options pour intégrer un SVG :

  • Inline (<svg> dans le HTML) : tu veux styliser, animer ou rendre le contenu accessible via <title> et <desc>.
  • Via <img> (<img src="icon.svg">) : l'image est décorative ou ne nécessite pas d'interaction. Plus simple, mais pas de contrôle CSS interne.
  • Via <object> : cas rare, quand tu veux un document SVG interactif isole.

Choisis inline quand l'accessibilité du contenu SVG compte.

Ce que tu gagnes

Accessibilité : un SVG inline avec role="img" et un <title> est lu par les technologies d'assistance. Un <img src=".svg"> dépend uniquement de son alt. Le SVG inline offre un contrôle plus fin.

Exemple de code

<svg role="img" aria-labelledby="chart-title chart-desc"
     viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <title id="chart-title">Completion rate</title>
  <desc id="chart-desc">A circular progress indicator showing 75% completion</desc>
  <circle cx="100" cy="100" r="90" fill="none" stroke="#e0e0e0" stroke-width="12" />
  <circle cx="100" cy="100" r="90" fill="none" stroke="teal" stroke-width="12"
          stroke-dasharray="424" stroke-dashoffset="106" />
</svg>

Pour aller plus loin