O'Reilly logo

Designing SVG Web Graphics by Andrew H. Watt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required