SVG Image Workflow

[ivanreese]

This issue will track R&D having to do with figuring out a better way to deal with static SVG images in our content.

Current Issues

• SVG files embedded with <img> can't use webfonts, period. SVG files embedded with <object> can, but they need to load those fonts with a <style> tag inside the SVG, and they don't get cached. For more, see here: https://css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/
• SVG files exported from Illustrator sometimes have weird stuff (like CSS isolation or baked-in kerning). We need a nice export flow from Illustrator.
• Font scaling isn't done smoothly unless you use a CSS style to adjust that.

Ideas

• We could do all static SVG embedding using <object>, and then use JS to reach into each of those images and add the font style rules we need. But then those fonts are going to download once for every SVG (since they don't do resource sharing).
• Same as above, but we extract the SVG document from the <object> and insert it inline into the module. We get fonts, but we lose SVG caching.
• We can convert fonts to outlines and continue loading with <img>. Downside is bloat. Neutral is that we don't get the OS's font rendering (bad because some OSes do a nice job and handle small font sizes well, good because some OSes suck and we cut down on cross-browser differences).
• [Possibly combined with the above] We could stop putting non-decorative text in our art, and use cd-map. The dev experience for this sucks, and cd-map was just supposed to be a stopgap eventually replaced by going all-in on SVG.

[ivanreese]

For the time being, we're using <object> with a <style> tag injected by cdig/cd-core.

I'm going to keep this issue open, since it does point to some of the downsides of that approach, and we might want to switch to one of the JS-based solutions in the future.