Graphics that scale with font size

Change the font size in this window (Firefox: ctrl +, ctrl -). If the browser is handling SVG graphics properly, the graphics should scale accordingly.

 

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).