Text in SVG

SVG treats a text element in much the same way that it treats graphical and shape elements. You position text with x and y coordinates and use fill and stroke options to color text the same way you would with a <circle> or <rect> element. However, SVG allows a surprising amount of control over how text appears (such as fonts, letter spacing, alignment), much like any good text layout program, but in addition offers the ability to internationalize your text message. Few other applications or computer languages permit this flexibility. This is because text in SVG remains character data even after it is rendered, so it is searchable and can be edited, even if it is a graphical element.

The <text> Element

In SVG, text is rendered with ...

Get SVG for Web Developers 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.