CODEWITHSUNDEEP
htmlinternet-explorersvg
Samuel
Samuel

Reputation: 686

SVG not rendering IE 11

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 ?

Upvotes: 3

Views: 30207

Answers (3)

luq
luq

Reputation: 1

I have a similar problem when I use the xlink:href attribute to display my svg imgage in IE11, it only display a empty layout without any content.The svg seems like:

<svg>
   <symbol id="xxx">
     <g>
       <path>
       </path>
     <g>  
   </symbol>
</svg>

when I delete the "g" Tag:

<svg>
   <symbol id="xxx">
     <path>
     </path> 
   </symbol>
</svg>

it have a correct presentation, I hope the answer can help other developers to resolve their questions.

Upvotes: 0

Simon E.
Simon E.

Reputation: 58460

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

Upvotes: 9

Samuel
Samuel

Reputation: 686

What I've done to make it work :

In the svg file :

  1. add <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. add <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
  3. remove height & width properties
  4. add xmlns="http://www.w3.org/2000/svg" in the svg markup

In the html file :

  1. use an img element instead of object : <img src="..." style="width:95%;height:60%" />

Upvotes: -2

Related Questions