How To Work With SVG Text

SVG text offers the best of both worlds. It’s rendered like other graphic elements so you can do things like add strokes and fills that you can add to shapes, lines, and arrowheads. It’s also packaged as XML character data, which means it’s real text.

Continue reading

How To Manipulate SVG Text

Last week I showed you how to create SVG text using the <text> element. In the examples I added x and y coordinates to position the text and the individual characters in a string of SVG text. There’s more to the <text> element.

Continue reading

How To Style and Position SVG Text With The tspan Element

The SVG text element allows you to easily position and style text, but what do you do if you want to position and style different parts of the text differently? Do you need to create multiple text elements? Nope. There’s an easier way.

Continue reading

How To Reuse SVG Text With The tref Element

Writing SVG code once and being able to use it in multiple places helps you write more modular code and it helps make maintenance easier. SVG makes it easy to reuse text through the tref element.

Continue reading

SVG Text Layout And Alignment

At the start of this series on SVG text I mentioned font tables. I said that certain alignment details for rendering a font’s glyphs were contained inside those tables. I also mentioned at some point in the series we’d see how we could alter some of this information

Continue reading