Home/ Questions/Q 7682677
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T18:37:22+00:00

CSS: img{ max-height:30px; } HTML: <img src=foo.svg /> I am looking for this svg

  • 0

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 (30×30) but in IE9 the image is 30×200. 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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0