Graphics that scale with window

Re-size your browser window (or, if you are viewing it on a cell phone, turn on auto-rotation, and rotate the phone). 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 as percentages.

In the HTML file, the CSS for the containing HTML elements needs to be set up to properly scale with the window size.