SVG in img element proportions not respected in ie9

Solution 1:

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.

Solution 2:

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.

Solution 3:

You can also look here: https://gist.github.com/larrybotha/7881691 - this is the continuation of this "story".

Fix SVG in <img> tags not scaling in IE9, IE10, IE11

IE9, IE10, and IE11 don't properly scale SVG files added with img tags when viewBox, width and height attributes are specified. View this codepen on the different browsers.

Image heights will not scale when the images are inside containers narrower than image widths. This can be resolved in 2 ways.

Use sed in bash to remove width and height attributes in SVG files

As per this answer on Stackoverflow, the issue can be resolved by removing just the width and height attributes.

This little script will recursively search your current working directory for SVG files, and remove the attributes for cross browser compatibility:

find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*\.*\[0-9]*" //' -e 's/height="[0-9]*\.*\[0-9]*" //'

Caveats

Removing width and height attributes will force the image to occupy the full width of its container in non-IE browsers.

IE10 (other browsers require testing) will scale the images down to some arbitrary size - meaning you will need to add width: 100% to your CSS for those images to fit their containers.

Target IE with CSS

Since the above solution requires CSS anyways, we might as well use a hack to get IE to behave, and not worry about having to manage every individual SVG file.

The following will target all img tags containing an SVG file, in IE6+ (only IE9+ support SVG files, however).

/*
 * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
 *
 * [1] IE9
 * [2] IE10+
 */
/* 1 */
.ie9 img[src*=".svg"] {
  width: 100%; 
}
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src*=".svg"] {
    width: 100%; 
  }
}

Caveats

This targets every img tag containing ".svg" in IE9, IE10, and IE11 - if you do not want this behaviour on a particular image, you will have to add a class to override this behaviour for that image.

Solution 4:

I have spent weeks trying all kinds of solutions to be able to use SVG's in a size-adaptable website that works for major modern browsers.

The SVG's need to be scaled using CSS percentages and include embedded bitmapped images.

The only solution that I have found for percentage resizing in IE is to embed external SVG's in an <object> tag.

There are various solutions for resizing SVG's in IE to strict pixel sizes, but none of them work for percentage resizing.

I have created a non-exhaustive test suite here.