Description of the <text> element

The SVG <text> element specifies a graphics element consisting of a text. It is possible to apply a pattern, clipping path, mask, gradient, or filter to <text>, like other SVG graphics elements. The text not included within a <text> element will not be rendered. Whereas the text included within a <text> element can be rendered auto-wrapped, pre-formatted, or on a path.

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>

Example of the SVG <text> element with the rotate attribute:

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

In the following example, the <text> element is used with the <tspan> element, which can contain different formatting and position.

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

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

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" xmlns:xlink="http://www.w3.org/1999/xlink" style="border:1px solid #cccccc">
      <a xlink:href="https://www.w3docs.com/learn-html/svg-intro.html" 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

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 Specifies the rotation of orientation for each individual glyph.
lenghtAdjust Specifies how the text is compressed or stretched for fitting the width defined by the textLenght attribute.
textLenght Specifies the width that the text must fit.

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

Practice Your Knowledge

What can be achieved using the SVG 'text' element in HTML?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?