Cross browser SVG preserveAspectRatio

cross-browser, html, svg

Solution

Seems like I found the solution:

You need to keep the `width` and `height` properties in the SVG.

<svg
    width="580"
    height="220"
    viewBox="0 0 580 220"
    preserveAspectRatio="xMidYMid meet"
>...</svg>

And to make it work on IE 9 you need to specify at least one dimension of the `<img />` tag.

<img src="your.svg" style="width: 100%" />

This seems to be working everywhere.

Problem

I'm trying to have a SVG graphic inside an `<img />` tag that would fit (without crop) inside the tag with preserved aspect ratio. I created the SVG in Inkscape. It worked as expected on all browsers except for Internet Explorer 9. To make it work on IE 9 I had to add the `viewBox="0 0 580 220"` and `preserveAspectRatio="xMidYMid meet"` and remove the `width="580"` and `height="220"` SVG properties. ``` <svg viewBox="0 0 580 220" preserveAspectRatio="xMidYMid meet">...</svg> ``` This seemed to work everywhere, just until I tried it on Webkit, where the `<img />` tag gets stretched vertically although the aspect ratio of the SVG is indeed preserved. When I put back the `width="580"` and `height="220"` properties, it works on Webkit but on IE 9 the aspectr ratio is lost. Is there a cross browser solution for this behavior?

Original source