Fix SVGs not scaling in IE9, IE10, and IE11

A.markdown

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 with a src that ends in ".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.

Thanks a lot for this.

Top fix!

For me the fix did work just partly.. height and width were removing the problems in some cases but it seems that the viewBox attribute has to be adapted too sometimes. Probably no issue for everyone who has the icons all in the same dimensions. So i had to correct manually.

For me this wasn't quite the right answer: I had to set height: 100% for the SVG because it had a fix width.
So setting the width to 100% broke it (for my case).

@larrybotha .. Many thanks for this! A 3rd party design we were implementing had a svg logo which only had a viewBox set. In IE11.. it was transparently larger and covered other interactive elements.. which therefore were not interactive anymore. Your hack fixed this in one easy copy paste! Also love the IE10+ detection.. never thought of that! Will use that again.

Another issue with IE11 is having inline style tags when you are embedding them.
I found https://github.com/svg/svgo/blob/master/plugins/inlineStyles.js to mostly fix all incoming svgs. The other solution is having Illustrator save them with inline styles.