Cross browser SVG preserveAspectRatio

Question

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?

Answer 1

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.