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.