change aspect ratio of svg in HTML

Issue

Using HTML and CSS, how do you change the size of an SVG (using an <img /> tag to get svg file) WITHOUT keeping the aspect ratio?

Solution

Just add preserveAspectRatio="none" to the <svg> root element. Or if you want you can override it when linking to the img, like in this example, by using a link like this:

<img src="your.svg#svgView(preserveAspectRatio(none))" />

For a live example, try this and resize the browser window.

Answered By - Erik Dahlström