SVG Text - Learn HTML

Description of the `<text>` element

The SVG <text> element specifies a graphics element used to display text. It is placed inside an <svg> element and positioned by its x and y coordinates. You can apply a pattern, clipping path, mask, gradient, or filter to <text>, just like other SVG graphics elements. Any text that is not inside a <text> element will not be rendered.

Note: SVG <text> does not wrap automatically. A single <text> element renders on one line; the text will not break onto a new line when it reaches the edge of the SVG canvas. To split text across lines you must position the lines yourself with <tspan> elements (each given its own y coordinate), use separate <text> elements, or flow the text along a path with <textPath>.

SVG text supports such typographic features as text decorations, choice of typeface, and use of discretionary, stylistic, or historical ligatures.

SVG also supports international text processing needs:

left-to-right or bidirectional text,
the vertical and horizontal orientation of text,
complex text layout,
glyph alignment to different baselines.

It is possible to have multi-language SVG content by substituting various text strings based on the preferred language of the user.

To style text, you can use text-specific CSS properties such as font-family, font-size, kerning, letter-spacing, word-spacing, text-decoration, stroke, stroke-width, and fill.

Example of the SVG `<text>` element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="60" >
      <text x="20" y="25" fill="purple">This is a SVG text example.</text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Try it Yourself »

Rotating text: `transform` vs the `rotate` attribute

There are two different ways to rotate SVG text, and they are easy to confuse:

transform="rotate(angle cx cy)" rotates the whole <text> element as a single block around a center point. The string stays straight; the entire line is tilted.
The rotate attribute rotates each individual glyph (character) in place. The letters stand at an angle, but the line of text still runs horizontally.

The example below uses transform to tilt the entire line by 40 degrees around the point (30, 60):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="150" style="border:1px solid red">
      <text x="20" y="25" fill="purple" transform="rotate(40 30,60)">This is a SVG text example.</text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Try it Yourself »

By contrast, the rotate attribute rotates every character on its own without tilting the baseline:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="80" style="border:1px solid #cccccc">
      <text x="20" y="50" fill="purple" rotate="25">Glyphs rotated</text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Aligning text with `text-anchor` and `dominant-baseline`

By default the x/y coordinates mark the start of the text and sit on the alphabetic baseline. Two attributes change that:

text-anchor controls horizontal alignment relative to x. Values: start (default, text begins at x), middle (text is centered on x), and end (text ends at x). This is essential for centering labels.
dominant-baseline controls vertical alignment relative to y. Common values: auto/alphabetic (default), middle, central, hanging, and text-bottom. Use middle to vertically center text on the y coordinate.

In the next example all three labels share the same x="125", but text-anchor makes them line up differently against the dashed reference line:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="120" style="border:1px solid #cccccc">
      <line x1="125" y1="0" x2="125" y2="120" stroke="red" stroke-dasharray="4" />
      <text x="125" y="30" text-anchor="start">start</text>
      <text x="125" y="60" text-anchor="middle">middle</text>
      <text x="125" y="90" text-anchor="end">end</text>
    </svg>
  </body>
</html>

Using `<tspan>` for multiple lines

The <tspan> element is a child of <text> that lets you change the position, styling, or formatting of a span of text without leaving the parent <text> element. Because SVG text does not wrap, <tspan> is the standard way to break one logical block of text onto several lines: give each <tspan> its own x and y (or use dy to offset from the previous line).

Use <tspan> instead of separate <text> elements when the parts belong together as a single accessible label or share styling — a <tspan> inherits its parent's attributes and stays part of the same text node. Use separate <text> elements when the pieces are genuinely independent.

The example below uses <tspan> to position three lines:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="450" height="150" style="border:1px solid #cccccc">
      <text x="20" y="20" style="fill:green">
        Example of the SVG "text" element used with the "tspan" element
        <tspan x="25" y="65">This is a SVG text.</tspan>
        <tspan x="35" y="90">This is a SVG text.</tspan>
        <tspan x="45" y="115">This is a SVG text.</tspan>
      </text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Try it Yourself »

Placing text on a path with `<textPath>`

To make text follow a curve or any other shape, wrap it in a <textPath> element and point its href at the id of a <path> (or other shape). The text then flows along that path. Define the path inside <defs> so it is reusable and not drawn itself. See the SVG <path> chapter for how path data (d) works.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="120" style="border:1px solid #cccccc">
      <defs>
        <path id="curve" d="M20,90 Q150,10 280,90" />
      </defs>
      <text fill="purple">
        <textPath href="#curve">Text flowing along a curved path</textPath>
      </text>
    </svg>
  </body>
</html>

Example of the SVG `<text>` element used with the `<a>` element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="60" style="border:1px solid #cccccc">
      <a href="/learn-html/svg-intro" target="_blank">
        <text x="20" y="40" fill="blue" font-size="2em">SVG Intro</text>
      </a>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Try it Yourself »

Styling and accessibility

Text inside <text> and <tspan> is styled with text-specific properties, which you can set as presentation attributes (e.g. font-size="20", font-weight="bold", font-family="Verdana") or with CSS. The most common ones are font-family, font-size, font-weight, font-style, text-decoration, letter-spacing, fill (the text color), and stroke/stroke-width (the outline). See the Attributes table below for the layout-related attributes.

Accessibility: SVG text is drawn as graphics, so it is not always exposed to assistive technology the way regular HTML text is. Give meaningful SVG a <title> as the first child of the <svg> (or <text>) element, and add aria-label/role="img" so screen readers announce it. For example:
<svg width="250" height="60" role="img" aria-label="SVG text example">
  <title>SVG text example</title>
  <text x="20" y="40" fill="purple">Accessible SVG text</text>
</svg>

Attributes

Attribute	Description
x	Specifies the starting x coordinate of the text baseline.
y	Specifies the starting y coordinate of the text baseline.
dx	Specifies a text position’s horizontal shift from a previous text position.
dy	Specifies a text position’s vertical shift from a previous text position.
rotate	Rotates each individual glyph (not the whole element — use `transform="rotate(...)"` for that).
lengthAdjust	Specifies how the text is compressed or stretched for fitting the width defined by the textLength attribute.
textLength	Specifies the width that the text must fit.
text-anchor	Specifies the horizontal alignment of the text: `start`, `middle`, or `end`.
dominant-baseline	Specifies the vertical alignment of the text on its baseline (e.g. `middle`, `hanging`).
font-family	Sets the typeface, e.g. `Arial, sans-serif`.
font-size	Sets the text size, e.g. `20` or `1.5em`.
font-weight	Sets the weight, e.g. `normal` or `bold`.
font-style	Sets the style, e.g. `normal` or `italic`.

The SVG <text> element also supports the Global Attributes and Event Attributes.

Practice

Which attribute centers SVG text horizontally on its 'x' coordinate?

text-anchor='middle'dominant-baseline='middle'rotate='90'text-align='center'

Description of the <text> element

Example of the SVG <text> element:

Rotating text: transform vs the rotate attribute

Aligning text with text-anchor and dominant-baseline

Using <tspan> for multiple lines

Placing text on a path with <textPath>

Example of the SVG <text> element used with the <a> element:

Styling and accessibility

Attributes

Practice

Description of the `<text>` element

Example of the SVG `<text>` element:

Rotating text: `transform` vs the `rotate` attribute

Aligning text with `text-anchor` and `dominant-baseline`

Using `<tspan>` for multiple lines

Placing text on a path with `<textPath>`

Example of the SVG `<text>` element used with the `<a>` element: