SVG not rendering IE 11

Question

I've the html code here. The svg does not render with IE 11. Can't find out why.

I've added as seen in another place :

<meta http-equiv="X-UA-Compatible" content="IE=edge">

I suspect the image is here but not visible. Or it could be the large data= which is not interpreted correctly. How to check ?

Answer 1

I had a similar issue and in my case it was because IE requires the viewBox attribute to be specified within the SVG for scaling to work correctly, and it was missing from my SVG.

I changed:

<svg xmlns="http://www.w3.org/2000/svg" width="767" height="1024">

to:

<svg xmlns="http://www.w3.org/2000/svg" width="767" height="1024" viewBox="0 0 767 1024">

The viewBox attribute specifies <x-origin> <y-origin> <width> <height>.

This article helped me understand the reasons for this: How to scale SVG [css-tricks.com].