Un badge de confirmation, une carte interactive avec le nom des villes, un graphique en barres avec ses valeurs affichées au-dessus de chaque colonne : dès qu'un SVG doit porter un mot ou un chiffre, c'est <text> qui l'affiche. Sans lui, un dessin vectoriel reste muet, aussi précis soit-il.
C'est l'un des éléments les plus utilisés du SVG, et pourtant l'un des plus mal compris au premier essai : ses coordonnées ne fonctionnent pas comme celles d'une boîte HTML.
Définition
<text> affiche une chaîne de caractères à l'intérieur d'un document SVG. Il accepte du texte brut entre sa balise ouvrante et sa balise fermante, comme un paragraphe HTML, mais son positionnement et son style suivent les règles du SVG plutôt que celles de CSS habituel.
Sans <text>, un SVG ne peut afficher aucun mot : les autres éléments dessinent des formes, lui seul écrit.
Attributs principaux
Quatre attributs suffisent pour la plupart des cas concrets.
| Attribut | Rôle |
|---|---|
x, y | Position du point d'ancrage du texte |
text-anchor | Alignement du texte par rapport à ce point (start, middle, end) |
font-size | Taille de la police, en pixels ou en unités SVG |
fill | Couleur du texte, à ne pas confondre avec color qui n'a aucun effet ici |
Ce dernier point piège beaucoup de monde débutant en SVG : la couleur d'un texte se règle avec fill, la même propriété qui colore un rectangle ou un cercle. La propriété CSS color reste sans effet sur un <text>.
Positionner le texte : la ligne de base, pas le coin
En HTML, un élément se positionne le plus souvent par son coin supérieur gauche. En SVG, x et y sur <text> désignent le point de départ de la ligne de base, cette ligne invisible sur laquelle les lettres semblent posées, comme sur un cahier. Les lettres montent au-dessus de ce point, et les jambages du « g » ou du « p » descendent en dessous.
Piège classique : donner à y la même valeur que la hauteur d'une icône voisine place le texte trop bas, débordant hors du cadre visuel, parce que y marque la ligne de base et non le sommet des lettres. Il faut généralement remonter y d'une valeur proche de la taille de police pour que le texte reste dans les limites prévues.
Exemple de rendu concret
Voici un badge de statut avec une icône de validation et son libellé, centré sous l'icône grâce à text-anchor="middle".
<svg viewBox="0 0 220 130" xmlns="http://www.w3.org/2000/svg">
<circle cx="110" cy="45" r="32" fill="#16a34a" />
<path
d="M95 46 l11 11 l22 -24"
stroke="#ffffff"
stroke-width="7"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
/>
<text
x="110"
y="104"
text-anchor="middle"
font-size="15"
font-family="sans-serif"
fill="#1e293b"
>
Paiement validé
</text>
</svg>Le text-anchor="middle" centre chaque ligne de texte sur la coordonnée x donnée, quelle que soit sa longueur : pratique pour centrer une légende sous une forme dont la largeur du texte n'est pas connue à l'avance.
Différence avec le texte HTML classique
Un paragraphe HTML s'écoule dans un flux, revient à la ligne tout seul et s'adapte à la largeur de son conteneur. <text> ne fait rien de tout cela : il tient sur une seule ligne, sans retour automatique, et déborde du viewBox si la chaîne est trop longue. Pour un texte plus long ou une mise en page sur plusieurs lignes, il faut soit répéter <text> à des positions différentes, soit utiliser <tspan> pour créer plusieurs lignes à l'intérieur d'un même bloc.
Autre différence : les propriétés CSS habituelles comme le padding, la marge ou la hauteur de ligne n'ont aucune prise sur <text>, qui obéit à sa propre géométrie de ligne de base.
Cas d'usage réel
Sur une interface comme celle de Believemy, <text> sert à légender un logo, afficher un pourcentage au centre d'une jauge circulaire, nommer les axes d'un graphique en SVG ou faire tenir un mot le long d'un tracé grâce à <textPath>. Toute icône SVG accompagnée d'un mot, dans un système de badges ou un tableau de bord, passe par cet élément.
Foire aux questions
x et y ?Pas directement avec y seul, qui ne gère que la ligne de base. Pour un centrage vertical précis, il faut ajouter la propriété dominant-baseline="middle", qui recentre la boîte du texte sur le point donné plutôt que sur sa ligne de base habituelle.
Oui, contrairement à un texte dessiné dans une image ou un canvas, le contenu d'un <text> reste du vrai texte : il se sélectionne à la souris, se copie, et les moteurs de recherche l'indexent comme n'importe quel texte de la page.
Pas nativement dans les navigateurs les plus courants. La solution consiste à découper le texte soi-même en plusieurs <tspan> avec des coordonnées y croissantes, une ligne par tspan, ou à basculer sur <foreignObject> pour profiter du flux HTML habituel.