Autoscaling an SVG embedded in HTML on window resize

Question

I would like to embed some SVG in an HTML page in a way such that is is automatically resized (using SVG, CSS, or JS) when the page is resized, while still preserving the or

Answer 1

You need a viewBox-attribute on your SVG root element, which will define the overall size of the SVG-image:

<svg version="1.1" viewBox="0 0 300 185">

Now you can set the width OR height of the image via CSS and it will scale perfectly.