Graphics that scale with font size

Change the font size in this window. If the browser is handling SVG graphics properly, the graphics should scale accordingly, so that the fonts within the graphic remain porportional to that of the other text in the page.

On desktop systems, do this using key-commands (Firefox: ctrl +, ctrl -). On mobile systems, the browser may have a setting for font size, and the system may have a global setting for font size.

 

This uses simple web standards, HTML, CSS, and SVG. No scripting is involved.

Several things need to be in place for it to work.

In the SVG graphics file, the outermost svg element needs a viewBox attribute to define its internal coordinate ranges, but its width and height attributes must be given in font size units (such as em).

Note that modern browsers support an svg tag within HTML. This example uses the older object tag. For that, different browsers set the default background-color CSS property in different ways in light and dark contexts, so that should be specified.