<text>

Defines a graphics element consisting of text.

• DOM object: SVGTextElement
• SVG2 spec: https://www.w3.org/TR/SVG2/text.html#TextElement

The <text> element renders a string of text as a graphics primitive while preserving the original text content in the SVG DOM. Text scales with the rest of the SVG scene and accepts normal SVG presentation attributes - fill, stroke, opacity, transform, gradients via url(#id), filters, clip paths, and so on. Fonts are loaded through standard CSS @font-face rules (TTF, OTF, WOFF, WOFF2) or fall back to a built-in typeface when no match is available.

Use <text> for labels, titles, axis tick marks, captions, and any other readable content. Substrings inside a <text> can be re-styled or repositioned with <tspan>, and text can be made to follow an arbitrary curve with <textPath>.

<text x="50" y="60">Hello, SVG text!</text>

Attribute	Default	Description
lengthAdjust	spacing	"spacing" or "spacingAndGlyphs". Indicates how the text may stretch (extra letter spacing only, or glyph-stretch as well).
x	0	If a single value is provided, sets the absolute x-position of the first character. If multiple values, sets positions per glyph.
y	0	Similar to x, but for y-position.
dx	(none)	One or more relative x shifts (optional).
dy	(none)	One or more relative y shifts (optional).
rotate	(none)	A list of rotation values per character (optional).
textLength	(none)	Author-specified total text advance length for calibration.

Note

For multi-value attributes (x, y, dx, dy, rotate), additional entries beyond the number of glyphs do nothing. If fewer entries than glyphs exist, the final value is reused for the remaining glyphs (for rotate), or the shift stays at 0 if no dx/dy is available.