Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fix SVGs not scaling in IE9, IE10, and IE11

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.

@benpearson

This comment has been minimized.

Show comment
Hide comment
@benpearson

benpearson Oct 6, 2014

Thanks very much for sharing this Larry. I added width and height attributes to all my SVGs so they would display properly on Android, so I used your CSS solution.

Thanks very much for sharing this Larry. I added width and height attributes to all my SVGs so they would display properly on Android, so I used your CSS solution.

@bennpearson

This comment has been minimized.

Show comment
Hide comment
@bennpearson

bennpearson Oct 17, 2014

Thanks Larry, hello again Ben Pearson, Benn Pearson here, hope you're well.

Thanks Larry, hello again Ben Pearson, Benn Pearson here, hope you're well.

@tomByrer

This comment has been minimized.

Show comment
Hide comment
@tomByrer

tomByrer Nov 13, 2014

Thanks for all the info!
Unfortunately using width: 100%; will make the SVG fill its container; which will render different from the other browsers. According to my testing, really need to specify the px.

Thanks for all the info!
Unfortunately using width: 100%; will make the SVG fill its container; which will render different from the other browsers. According to my testing, really need to specify the px.

@larrybotha

This comment has been minimized.

Show comment
Hide comment
@larrybotha

larrybotha Nov 13, 2014

@tomBryer that's correct - I usually end up putting the SVG in some sort of grid container that will constrain it to some width

Owner

larrybotha commented Nov 13, 2014

@tomBryer that's correct - I usually end up putting the SVG in some sort of grid container that will constrain it to some width

@DevinWalker

This comment has been minimized.

Show comment
Hide comment
@DevinWalker

DevinWalker Nov 19, 2014

The IE CSS fixes worked like a charm. Thanks!

The IE CSS fixes worked like a charm. Thanks!

@michaelalhilly

This comment has been minimized.

Show comment
Hide comment
@michaelalhilly

michaelalhilly Jan 8, 2015

IE vanquished again!

IE vanquished again!

@simonjamespratt

This comment has been minimized.

Show comment
Hide comment
@simonjamespratt

simonjamespratt Feb 10, 2015

Thanks so much for this! Been trying to work out what was going on with this for ages. Thanks again.

Thanks so much for this! Been trying to work out what was going on with this for ages. Thanks again.

@bytehead

This comment has been minimized.

Show comment
Hide comment
@bytehead

bytehead Apr 24, 2015

There is such a good article here: https://css-tricks.com/scale-svg/

There is such a good article here: https://css-tricks.com/scale-svg/

@larrybotha

This comment has been minimized.

Show comment
Hide comment
@larrybotha

larrybotha May 3, 2015

wow, that's quite an article! Great resource, thanks @bytehead

Owner

larrybotha commented May 3, 2015

wow, that's quite an article! Great resource, thanks @bytehead

@Alpinist1974

This comment has been minimized.

Show comment
Hide comment
@Alpinist1974

Alpinist1974 May 29, 2015

I got good, consistent results across the board sizing SVG in the big 3 browsers and Apple devices using CSS3 viewport width (vw) and viewport height (vh) units. IE 9 and 10 and iOS have problems with these, but Rodney Rehm's Buggyfill

https://github.com/rodneyrehm/viewport-units-buggyfill#user-content-changelog

does a great job fixing them. Hat tip to Zoltan@

http://www.useragentman.com/blog/2014/09/24/fixing-cross-browser-issues-with-css3-viewport-units-in-ie9-and-safari-for-ios/

for a good article and the explanations on using Rehm's Buggyfill.

I got good, consistent results across the board sizing SVG in the big 3 browsers and Apple devices using CSS3 viewport width (vw) and viewport height (vh) units. IE 9 and 10 and iOS have problems with these, but Rodney Rehm's Buggyfill

https://github.com/rodneyrehm/viewport-units-buggyfill#user-content-changelog

does a great job fixing them. Hat tip to Zoltan@

http://www.useragentman.com/blog/2014/09/24/fixing-cross-browser-issues-with-css3-viewport-units-in-ie9-and-safari-for-ios/

for a good article and the explanations on using Rehm's Buggyfill.

@marc151

This comment has been minimized.

Show comment
Hide comment
@marc151

marc151 Jun 9, 2015

Hi Everyone,
I've just had good results using a blank png file on the same scale as the svg, that is set to scale to full width. then i just set the svg to position:absolute and with&height 100%. seems to work cross browser ff, chrome and IE 9+. the png deals with scaling the div and the svg is really just along for the ride, the nice thing is that the png can be a smaller size than the svg just scaled the same, so it doesn't add much in size.

<div style="position:relative;">
    <svg viewBox="0 0 960 600" style="width: 100%; height: auto;position: absolute;" id="statesvg"/>
    <img state="width:100px; height:auto;" src="../IEsizer.png" style="width: 100%; height: auto;">
</div>

marc151 commented Jun 9, 2015

Hi Everyone,
I've just had good results using a blank png file on the same scale as the svg, that is set to scale to full width. then i just set the svg to position:absolute and with&height 100%. seems to work cross browser ff, chrome and IE 9+. the png deals with scaling the div and the svg is really just along for the ride, the nice thing is that the png can be a smaller size than the svg just scaled the same, so it doesn't add much in size.

<div style="position:relative;">
    <svg viewBox="0 0 960 600" style="width: 100%; height: auto;position: absolute;" id="statesvg"/>
    <img state="width:100px; height:auto;" src="../IEsizer.png" style="width: 100%; height: auto;">
</div>

@miguelsirna

This comment has been minimized.

Show comment
Hide comment
@miguelsirna

miguelsirna Jul 12, 2015

gracias totales 😄

gracias totales 😄

@justinputney

This comment has been minimized.

Show comment
Hide comment
@justinputney

justinputney Aug 22, 2015

Awesome, thanks!

I was also able to use this to target ie9:
img[src*=".svg"] {
width: 100%\9;
}

Awesome, thanks!

I was also able to use this to target ie9:
img[src*=".svg"] {
width: 100%\9;
}

@lyonzy

This comment has been minimized.

Show comment
Hide comment
@lyonzy

lyonzy Nov 13, 2015

Swapping
width="www"
height="hhh"
for
viewBox="0 0 www hhh"
did it for me.

lyonzy commented Nov 13, 2015

Swapping
width="www"
height="hhh"
for
viewBox="0 0 www hhh"
did it for me.

@F1LT3R

This comment has been minimized.

Show comment
Hide comment
@F1LT3R

F1LT3R Jan 25, 2016

Does this still work on IE9 for images or lower than 16px? For me it looks like a 12 x 12px image gets truncated on IE9.

F1LT3R commented Jan 25, 2016

Does this still work on IE9 for images or lower than 16px? For me it looks like a 12 x 12px image gets truncated on IE9.

@neilgee

This comment has been minimized.

Show comment
Hide comment
@neilgee

neilgee Mar 10, 2016

Thanks for this!

neilgee commented Mar 10, 2016

Thanks for this!

@ckoppelman

This comment has been minimized.

Show comment
Hide comment
@ckoppelman

ckoppelman Mar 24, 2016

I patched your gist to ignore <img>s with src like //i.svg.example.com/my-jpeg.jpg or worse, img/my.svg.gif:

diff --git a/A.markdown b/A.markdown
index 0a06a0b..4d49f10 100644
--- a/A.markdown
+++ b/A.markdown
@@ -34,12 +34,12 @@ The following will target all `img` tags containing an SVG file, in IE6+ (only I
  * [2] IE10+
  */
 /* 1 */
-.ie9 img[src*=".svg"] {
+.ie9 img[src$=".svg"] {
   width: 100%; 
 }
 /* 2 */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  img[src*=".svg"] {
+  img[src$=".svg"] {
     width: 100%; 
   }
 }
@@ -47,4 +47,4 @@ The following will target all `img` tags containing an SVG file, in IE6+ (only I

 ### 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.
\ No newline at end of file
+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.
\ No newline at end of file

I patched your gist to ignore <img>s with src like //i.svg.example.com/my-jpeg.jpg or worse, img/my.svg.gif:

diff --git a/A.markdown b/A.markdown
index 0a06a0b..4d49f10 100644
--- a/A.markdown
+++ b/A.markdown
@@ -34,12 +34,12 @@ The following will target all `img` tags containing an SVG file, in IE6+ (only I
  * [2] IE10+
  */
 /* 1 */
-.ie9 img[src*=".svg"] {
+.ie9 img[src$=".svg"] {
   width: 100%; 
 }
 /* 2 */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  img[src*=".svg"] {
+  img[src$=".svg"] {
     width: 100%; 
   }
 }
@@ -47,4 +47,4 @@ The following will target all `img` tags containing an SVG file, in IE6+ (only I

 ### 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.
\ No newline at end of file
+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.
\ No newline at end of file
@sorenjacobjensen

This comment has been minimized.

Show comment
Hide comment
@sorenjacobjensen

sorenjacobjensen Apr 15, 2016

I took over a customer site with this issue in IE.
I used the "Target IE with CSS" - worked like a charm! Thanks!

I took over a customer site with this issue in IE.
I used the "Target IE with CSS" - worked like a charm! Thanks!

@larrybotha

This comment has been minimized.

Show comment
Hide comment
@larrybotha

larrybotha Apr 22, 2016

@ckoppelman thanks - updated!

Owner

larrybotha commented Apr 22, 2016

@ckoppelman thanks - updated!

@k-webdesign

This comment has been minimized.

Show comment
Hide comment
@k-webdesign

k-webdesign Jun 3, 2016

Thank you for the CSS only solution, it works perfect.

Thank you for the CSS only solution, it works perfect.

@eloine

This comment has been minimized.

Show comment
Hide comment
@eloine

eloine Jan 13, 2017

You saved me a ton of time! I used the CSS solution.

eloine commented Jan 13, 2017

You saved me a ton of time! I used the CSS solution.

@sparrowxiao

This comment has been minimized.

Show comment
Hide comment
@sparrowxiao

sparrowxiao Feb 17, 2017

@larrybotha Many thanks for this solution.

@larrybotha Many thanks for this solution.

@Vadorequest

This comment has been minimized.

Show comment
Hide comment
@Vadorequest

Vadorequest Mar 17, 2017

Thanks a lot for this.

Thanks a lot for this.

@thomasfava

This comment has been minimized.

Show comment
Hide comment

Top fix!

@jaydioar

This comment has been minimized.

Show comment
Hide comment
@jaydioar

jaydioar Nov 20, 2017

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 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.

@scrummer

This comment has been minimized.

Show comment
Hide comment
@scrummer

scrummer Apr 12, 2018

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).

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).

@AubreyHewes

This comment has been minimized.

Show comment
Hide comment
@AubreyHewes

AubreyHewes Apr 26, 2018

@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.

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment