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.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.