Svg in Img Element Proportions Not Respected in IE9

SVG in img element proportions not respected in ie9

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.

SVG images scaling down to a container in Internet Explorer

Unfortunately IE doesn't seem to handle the scaling of SVGs correctly when the size is unspecified. Other browsers default to a size of 300x150 when they can't otherwise determine what the intended size is. IE does not.

You therefore have to specify a width and height for your SVG. If not in the SVG itself, then in the <img> or <object> that references it.

SVG not rendering in IE

Navigating directly to the SVG in question works fine.

If you use the F12 Developer Tools to disable CSS on the page, the SVG image renders.

If you remove the width property from #logo-image img, it renders, or you can add a height:35px property instead and the SVG will render.

Perhaps related to this question? SVG in img element proportions not respected in ie9

SVG with width/height doesn't scale on IE9/10/11

This happens when your image is missing the viewBox attribute on the svg element.

Yours should be set to: 0 0 640 480. The zeros are X and Y offsets and the 640 and 480 correspond to the width and height. It defines a rectangle that represents the boundaries of the image.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640" viewBox="0 0 640 480">

img and span with same svg render at different sizes in IE9

Removing the width="32px" height="32px" from the SVG element will fix this

SVG background image in IE9

Make sure that your local webserver sends the correct mediatype for svg files, image/svg+xml.

---

Related Topics