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?

score 37 · Accepted Answer · answered May 08 '13 at 11:49

37

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.

answered May 08 '13 at 11:49

Peter Hudec

2,462
3
22
29

3

I was having this problem using "max-width: 100%" in IE10 on Windows Phone 8. Making it "width: 100%" solved it there as well. Thanks mate. – Magnus Magnusson Aug 14 '13 at 09:35
1

Actually, once you set the width on the element, you no longer need the width and height set within the SVG. – gzost Dec 07 '13 at 09:58
This worked for me - the SVG I had exported from Illustrator had the height/width set - as with Magnus my issue was the max-width being 100% - set width 100% and it works a charm. – SirRawlins Dec 17 '13 at 18:32
Actually you just need to set the viewBox. And then, only if you want to scale the image in IE. – Stefan Steiger Jan 12 '15 at 11:44
width: 100% was the missing link for me! – Ryan Nov 23 '15 at 21:45

score 6 · Answer 2 · answered Feb 25 '15 at 14:27

6

I solved it by setting the following CSS to the :

width: 100%; max-width: (desiredwidth in px)

answered Feb 25 '15 at 14:27

Becario Senior

704
10
18

Works for me, fixing stretching issues in IE11 - but how? – Matt Saunders Mar 31 '16 at 13:50

score 1 · Answer 3 · answered Nov 12 '15 at 16:20

The solution in my case was using Peter Hudec's answer, but because of using width: 100%; on the <img /> tag, which broke the layout on every non-IE9 browser, I added a IE9-only CSS hack (width: 100%\9\0;). Hope this addition will help someone. :-)

Even using the preserveAspectRatio="xMidYMid meet" was not neccessary.

(I wanted to add only a comment, and not answer, but no reputations yet to do so :-)

score 0 · Answer 4 · answered Jul 23 '15 at 18:05

Just thought that I would add how I stepped into a solution. I had trouble figuring out some of the issues at first.

Edit your SVG file to remove the hard-coded height and width attributes. (with simple text editor)
Apply width:100% css to your svg image to make IE display it like other browsers. (as big as it's container)
Use css on your image container for consistent results!

I made a page to describe it in more detail at http://ivantown.com/posts/svg-scaling-with-ie/

score 0 · Answer 5 · answered Sep 05 '18 at 08:29

Just an additional suggestion: Using an attribute selector based on the .svg filename suffix might be useful in cases where you need this behavior on all your svg content, and don't have control over the markup.

For example

img[src$=".svg"] {
    width:100%;
}

Cross browser SVG preserveAspectRatio

5 Answers5

Linked