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.
/*
* 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%;
}
}
Website
Thanks for this very useful tip Anish. Keep up your postings, they are invaluable.
Thankyou Joel