SVG in img element proportions not respected in ie9

css svg internet-explorer-9
Fresheyeball picture Fresheyeball · Mar 19, 2012 · Viewed 55.4k times · Source

CSS:

img{
    max-height:30px;
}

HTML:

<img src="foo.svg" />

I am looking for this svg image to scale proportionately to a max height of 30 pixels high. The natural dimensions of the svg are 200px by 200px. Works great in FF and Chrome (30x30) but in IE9 the image is 30x200. Now here is the kicker. It only happens with certain SVG files, other svgs scale correctly.

It seems the difference is one is made of polygons, and the other is made of paths.

does not scale correctly:

http://www.radiantinteractive.com/rs/images/allies/other/crocs.svg

does scale correctly:

any idea on why this happens, or how I can get the first one to scale proportionately in ie9?

Answer

robertc picture robertc · Mar 20, 2012

To get more consistent scaling across browsers always ensure you specify a viewBox but leave off the width and height attributes on your svg element. I've created a test page for comparing the effect of specifying the different SVG attributes in combination with widths and heights specified in CSS. Compare it side by side in a few different browsers and you'll see a lot of differences in the handling.

Related questions

Background-size with SVG squished in IE9-10

I have a div set with a background image: <div>Play Video</div> with the following CSS: div { background-image: url('icon.png'); background-image: url('icon.svg'), none; background-size: 40px 40px; background-repeat: no-repeat; background-position: 90% 50%; padding: 20px; width: 150…

Read More
How to change the color of an svg element?

I want to use this technique http://css-tricks.com/svg-fallbacks/ and change the svg color but so far I haven't been able to do so. I put this in the css but my image is always black, no matter what. …

Read More
How to change color of SVG image using CSS (jQuery SVG image replacement)?

This is a self Q&A of a handy piece of code I came up with. Currently, there isn't an easy way to embed an SVG image and then have access to the SVG elements via CSS. There are …

Read More