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.
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]*" //'
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.
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%;
}
}
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.
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>