SVG Text
Description of the <text> element
The SVG <text> element specifies a graphics element used to display 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:
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:
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:
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:
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="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. |
| 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. |
| dominant-baseline | Specifies the vertical alignment of the text. |
The SVG <text> element also supports the Global Attributes and Event Attributes.
Practice
What can be achieved using the SVG 'text' element in HTML?