Text in SVGs

SVG, because it is the vector graphics format supported by most browsers, should be the preferred format for graphics on the web whenever possible. There are obvious exceptions, for example photographs and screenshots.

A sufficiently often visited web page is viewed on screens of various sizes and resolutions. A single vector graphic file can be displayed by a browser with maximum detail supported by in given situation. The alternative are multiple rasterized versions in different sizes that need to be stored and whose delivery would need to be supported by some logic choosing the (almost) right version for each situation. Also, the SVG would likely be smaller then at least some of the rasterized versions.

Text in an SVG, however, poses a problem. Text has a different shape for each font used. In a graphic, for example a diagram, I want my text to always look the same to ensure that it is properly aligned and does not intersect elements of the graphic that is should not. So, an alternative sans-serif font to the one I used for design does not cut it. Here, I have differing requirements than for continuous text in a web page, where it does not hurt, because at worst, the text gets wrapped differently, and maybe even in a font the reader would prefer to the one I would have chosen.

Letting the reader download the used font when viewing the graphic would solve the problem. But I do not want my readers to have to download a font just to view a diagram, just like I do not want them to have to download a font just to read the text (I just specify whether I want serifs for a given text).

Ideally, there would be a standard set of fonts (at least one proportional font each with and without serifs and one fixed-width font) available on each system with a browser.

Unfortunately there is no such standard set of fonts. In addition, the intersetion of the sets of fonts that are installed on Android, iOS, macOS, and Windows 10 by default is empty.

So, I will continue to convert SVGs with text into rasterized graphics for the web.

We need a standard set of fonts for the web available in all (or the most widely used) browsers.