Answer 1

The SVG Scaling Toolbox

Other images scale because the browser knows the height, width, and aspect ratio of the image, and it adjusts everything together. Giving SVG these properties is the first step to getting it to scale. However, scaling SVG goes beyond what is possible with other images.

The height and width attributes

A first glance at the SVG specifications would suggest that the height and width attributes on the top-level svg element will implicitly set an aspect ratio and therefore make SVG scale like other images. It’s true that setting height and width will override the default dimensions when you use SVG as an image. But of course it’s not that easy:

If you use an <img> to embed your SVG, setting height and width will make the SVG scale predictably in most browsers, but not in Internet Explorer. With CSS like img { width: 100%; height: auto; }, IE will auto-scale the image area to keep the width:height aspect ratio constant, but it won’t scale the actual drawing to match the scale of the imag