Embedding fonts in an SVG
Text inside an SVG does not carry its font along with it. Left alone, it is redrawn with whatever font the machine opening it happens to have.
What goes wrong
An SVG's text says only "this character, at this position, in this font". If that font is not installed, something else is used instead — and the letterforms are not the only casualty.
- The widths change. The diagram measured its text to decide where the lines go. Different widths, and the leader lines no longer meet their descriptions
- The wrapping changes. A description that fit on one line takes two, and collides with the item below
- Japanese may not render at all. On a machine with only Latin fonts, the characters come out as boxes
- You will not notice. On the machine that made it, everything looks right. It breaks where you sent it
Three ways to handle it
| Approach | Upside | Downside |
|---|---|---|
| Outline the text convert letters into shapes |
Identical everywhere it opens. Font licensing is usually less of a question | No longer text: nothing to search, select or correct. Japanese, with its stroke counts, makes for large files |
| Embed the font put the font inside the file |
Text stays text — searchable, and reachable by a screen reader | The license has to permit embedding. Done naively, the file gets heavy |
| Rasterize export a PNG instead |
Displays anywhere | Poor under enlargement. Gives up everything SVG was for |
Subsetting keeps the file small
A Japanese font holds several thousand to several tens of thousands of characters. Embed one whole and the file runs to megabytes — not a realistic size for a single diagram.
So only the characters the diagram actually uses are taken out and embedded. That is subsetting. A part number diagram uses at most about 200 distinct characters, so even one written in Japanese stays in the tens of KB. This tool does it on every export, running the HarfBuzz text-shaping library in the browser.
A character the font lacks cannot be embedded
Subsetting takes out the characters you used, so a character the font never had cannot be taken out. It is missing from the file, and gets drawn with the reader's own font — which brings back the problem at the top of this page. The positions were computed on the assumption that the character was there, so the spacing breaks by exactly that much.
The fonts bundled with this tool cover Japanese and the Latin alphabet. Korean, Cyrillic and Thai have no glyphs in them. Type one and the checks raise it as something to look at. In testing, Russian came out letter by letter, with gaps between the characters.
Checking the license
Whether a font may be embedded is up to its license. The SIL Open Font License (OFL) permits embedding in a document explicitly. Commercial fonts set their own terms per product, so check what you agreed to when you bought it.
Every font this tool embeds is OFL. This site adds no restriction of its own to distributing or selling the files you export (see Licenses).
What to check at the receiving end
A file you thought was embedded can still arrive broken. Open it somewhere other than the machine that made it.
- Drag the file into a browser on another device
- Open it on a machine that does not have the fonts the diagram uses
- If it is going into a PDF, open that PDF on another device
If the text can be selected and the lines wrap where they did when you made it, the embedding worked.