Fix SVG Scale Issues in IE9, IE10, IE11

SVGs, when resized, will not scale in proportion in older versions of Internet Explorer.

The images will appear stretched or squished due to a lack of browser support for SVGs.

Add the following to your stylesheet to correct the display issue:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /** IE 10 & 11 **/
	
	img[src$=".svg"] {
	    width: 100%; 
	}

}

@media screen and (min-width:0\0) { /* IE 9 */
	
	img[src$=".svg"] {
	    width: 100%; 
	}

}

Source.

Leave a Reply

Posted in CSS
katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.