Saying the Verbose Gist

I was not expecting to have this much to say on the intersection of fonts and SVGs—somehow my list of topics is now longer than when I started?

Yet it’s a (relatively) new month, and I think it might be time to move on from SVGs—at least for now.

Here are a few lingering observations that you as a type designers may find noteworthy about SVGs:

Layer order The “layer” order in SVGs is upside-down relative to what most designers using your fonts would expect: the first shape in an SVG is the at the bottom, and the last shape is at the top
Baseline origin The origin point for text coordinates comes from the baseline, not a bounding box
Base64 You can encode a font into a text string within CSS within individual SVGs, and there are specific situations where this really is better than outlining type or using the font externally
SVG fonts The SVG font file format (which you may remember from when you first started distributing web fonts) is one of those rare cases of browsers removing once-approved feature
Save as One thing I’ve been asked by type designers showing custom logos or lettering in SVGs on their site: if you want to use them in the browser, you have to give the visitor[’s browser] the file—you can’t truly “protect” it

Here’s the full series from the last few weeks:

Until next time,
Kenneth