O'Reilly logo

Special Edition Using XML, Second Edition by - et al. David Gulbransen

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

Text Handling in SVG

Text handling in SVG is carried out with three elements— <text>, which is always used when laying out text, and, optionally, <tspan> and <tref> elements.

The <text> Element

To lay out text, the SVG rendering engine needs to know, in addition to what characters to render, where to place the text, what font and font size to use, and so on. You saw in Listing 23.1, the rollover button example, how text is used with a rollover button.

It is important to notice the difference in how the x and y attributes of <rect> and <text> elements are used. Listing 23.21 illustrates the difference in usage.

Listing 23.21. The Difference in Usage of x and y Attributes in <text> and <rect> Elements (DiffTextRect.svg)
 <?xml version="1.0" standalone="no"?> ...

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