Skip to main content
Home / The Lodge / Everything You Need To Know About SVG / 29: SVG Text

29: SVG Text

There is a <text> element in SVG. No big surprise here: it's for putting text into the SVG. Not outlines of shapes of letters (although you can do that too) but actual normal web text. Selectable, SEO-friendly, accessible, normal ol' web text.

The fonts you have access to are the same as the rest of the document. So if you load an @font-face font, you'll be able to use that in the SVG.

What I think is cool is that the size of the fonts is relative to the SVG document, just like all the shapes and stuff are. So if you design something very deliberate and perfect typographically in the SVG, it will keep that integrity as the SVG resizes. That would be hard to pull off in HTML/CSS. Here's an article all about that.

One limitation: the text can't wrap. That can be a rather significant downside, but that feature is coming in SVG 2.

icon-link icon-logo-star icon-search icon-star