SVG element – typography, accessibility
Let’s say you designed something with custom fonts that was a little bit fancy. Perhaps a certain word is positioned between the ascenders of another word below it. Some text is kerned out below to match the width of that same word.
This is something we might tell a graphic designer switching from print to web to avoid. It’s too finicky. Too much touchy, unscalable absolute positioning. Too much risk from different font rendering behavior.
But with inline SVG, we can do it, and do it well.
SVG <text>
The big “trick” here is that SVG has a
<text>element that is just that: text. Not outlines of text, just regular ol’ selectable, accessible web text.