Menu
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?
731
The quick way: img elementTo embed an SVG via an <img> element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio).
Once you add a viewBox to your <svg> (and editors like Inkscape and Illustrator will add it by default), you can use that SVG file as an image, or as inline SVG code, and it will scale perfectly to fit within whatever size you give it. However, it still won't scale quite like any other image.
Sizing on SVG is pretty arbitrary as it is a vector format, the layout is done with maths and so isn't dependent on the size you specify. However, if the SVG is rendered on the page and then gets resized size it can make a difference at the rendering stage.
For our purposes, the most important aspect is the removal of the width and height attributes that most applications include automatically. This makes the SVG fully responsive in modern browsers.
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.
55
To fix it in ie9 and not to stuck with this. I don't know why, but you should set width:100% through css-rule, but not in img-tag. Aspect ratio will work by magic)) It helped me, hope this post will help other.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
