Inside and outside

An SVG can be used like a typical image, loaded from an external path:

<div>
  <img src="welcome.svg" alt="Welcome Header" />
</div>

…or embedded into an HTML document itself:

<div>
  <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 100 50">
    <rect x="0" y="0" width="100" height="50" fill="silver" />
    <text fill="black" x="50" y="33"
          font-size="18"
          font-family="'Example Sans', sans-serif"
          text-anchor="middle">
      Welcome!
    </text>
  </svg>
</div>

Designers and developers exporting an asset—assuming they haven’t outlined the type—can use your fonts in either one of these situations.

The key difference is that when the SVG is embedded into the HTML document, like in the second example, it can inherit CSS styling from the parent page.

In this case, the person using this welcome banner needs to load “Example Sans” using @font-face in the parent page. If that’s the font they are already using for other parts of their site, then everything will already work as expected.

If they have a complex series of diagrams across their entire site, say floor plans or technical drawings, this might be a good approach for them: the text will stay “live” (and therefore selectable and accessible to screen readers and search engines), and the file size of the SVG will be smaller than if all that type had been converted to outlines.

I’ll look at some of the ways this can go awry, and compare it to loading a font within the <img> option, in my next message.

Until next time,
Kenneth