While text in SVG has a number of limitations, at least in the current spec - text can’t be wrapped, and positioning it is more like arranging elements in CSS, rather than the natural “flow” of HTML text - it also has some significant advantages in particular use-cases. Understanding those use-cases, together with the associated SVG text attributes, will allow you to know where and how to employ SVG text in your web page designs.
As always, there’s more to be added to this list (especially as the SVG2 draft is finalised and its features adopted by browsers), so I would recommend checking back regularly.
Time: 2 hours
Prerequisites: Intro to SVG, CSS Typography
Introduction
Responsive Hero Text
Stroked Text
Text Clipping Masks
Text on a Circle
Comic Book Speech Bubbles
Staggered & Fainting Text
Comic Book FX Lettering
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
