The <text> Element

Looked at as SVG, text is simply another part of the source code to be rendered by an SVG viewer. Therefore, all the manipulations that are possible with other graphics can also be carried out with text. You can transform text or alter its opacity or animate it. In one sense, text in SVG is just another type of graphic to be displayed.

A <text> element contains information about the screen position of the text in x and y attributes, and the styling information may be contained in a style attribute or in individual attributes corresponding to CSS2 style properties.

Styling SVG text

To apply style to SVG text, you can use either of two syntaxes. Either use a style attribute and then add the desired range of CSS properties as ...

Get Designing SVG Web Graphics now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.