Should fonts be embedded into SVG?

[alixander]

Currently we base64 encode fonts (to WOFF mimetype) and include directly in the SVG. This is to ensure the SVG has reproducible appearance everywhere and regardless of network connections.

However, this can make the SVG file unwieldy:

1. Larger file sizes. Fonts can add 1MB or so.
2. Opening up the SVG has this unreadable blob.

The alternatives are:

1. Drop the "regardless of network connections" part. Fetch hosted fonts online.
2. Use a ~universal font, e.g. Times New Roman where the vast majority of machines will have installed. Downside is that it's Times New Roman.
3. ???

[nhooyr]

Strongly believe the font should not be included by default. We should have a flag for bundling a font.

By default, we ought to render with the measurements of Arial and then ensure we have sufficient padding in case the user machine uses a different font.

We could embed a script in the SVG that allows a user to click a settings icon in the corner and select a new font from what they have installed if it doesn't look right. Or adjust the font size.

[nhooyr]

We could also just set the overflow on each element to scroll so if they do have a much larger font, their information isn't cut off, they just have to scroll.

[axelerator]

Hey thanks for providing this awesome tool 🙏 !

I just wanted to second the importance to users to offload the font loading. I just compiled the 'x -> y -> z' example with the latest release and it comes down to a hefty 325K SVG 🙈 .

My use case is our internal markdown wiki. My idea would be to generate the SVGs on the fly and cache them in Redis. So not only for the browser but also our server infrastructure it would be nice if the SVGs would not contain the font.

My "dream" API would be if I could provide the (web) font at rendering time for measuring and then just made sure at runtime it's available to the browser.

[hsuominen]

It would be convenient if both cases were supported for different workflows e.g. configurable with a compiler flag. For early prototyping it's convenient to have a fully self-contained svg to pass around, but for production cases the inflated file size is not ideal

[pedrovhb]

I recently did something similar - feel free to steal anything that may be useful: https://github.com/pedrovhb/svgfontembed

tl;dr is that it includes only the subset of characters which are actually found to be used in the SVG. Probably a bit easier in the case of d2, as you don't have to parse the file to find out what text is associated to what font (you know that at generation time).

[alixander]

oh wow! ty for sharing, will definitely be looking at it for this

[exploids]

I think having the option to not embed the fonts would be useful for further processing with tools that don't support @font-face. For me, these are mainly Inkscape and in turn the LaTeX svg package.

[develar]

I use MkDocs and Roboto is available, so, I set all fonts for D2 to Roboto by default for consistency with other texts.
Still, export D2_BUNDLE=false doesn't respected — font is still embedded to each SVG.

Will be great if will be an option to avoid embeddings fonts.

[alixander]

oh good point, made an issue: #1786

[stereobooster]

Can we use "System Font Stack"?