English

<text>

Ajouter du texte dans un graphique

— 1 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • svg

<text> + <tspan> — Le texte dans SVG

La balise <text> place du texte dans un SVG a une position donnée. <tspan> permet de styliser des portions de ce texte differemment, équivalent SVG d'un <span> HTML.

Quand l'utiliser

Tu veux ajouter des labels a un graphique, des annotations sur un schema, des valeurs sur un diagramme. Le texte SVG fait partie du graphique et se redimensionné avec lui, contrairement a du texte HTML positionné par-dessus.

Ce que tu gagnes

Accessibilité : le texte SVG est lu par les technologies d'assistance comme du texte normal. C'est le moyen le plus direct de rendre un graphique SVG comprehensible sans <title> ni <desc>.

Exemple de code

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="40" font-size="1.25rem" fill="currentColor">
    Revenue:
    <tspan font-weight="bold" fill="teal">+12%</tspan>
    vs last quarter
  </text>
</svg>

Pour aller plus loin