Français

<text>

Adding text inside a graphic

— 1 min read

  • HTML
  • accessibility
  • semantics
  • SVG

<text> + <tspan> — Text in SVG

The <text> element places text inside an SVG at a given position. <tspan> lets you style portions of that text differently — the SVG equivalent of an HTML <span>.

When to use it

You want to add labels to a chart, annotations to a diagram, values to a graph. SVG text is part of the graphic and scales with it, unlike HTML text positioned on top.

What you gain

Accessibility: SVG text is read by assistive technologies as normal text. It is the most direct way to make an SVG graphic understandable without <title> or <desc>.

Code example

<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>

Further reading