3

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 ?

Samuel
  • 594
  • 1
  • 6
  • 22
  • check content-type on response from php - currently poss incorrect `Content-Type:text/html` ... you might need to put `data:image/svg+xml;` before the svg, you might need to escape all > @lt; # etc. .. not sure about that though ... never tried. Good luck – Ruskin Jan 24 '17 at 16:28
  • Ok, I've just done that : Content-type: image/svg+xml. The php now returns valid svg, W3C says. But the html page does not display the picture on Chrome nor IE now. – Samuel Jan 24 '17 at 16:36
  • Hmm ... try losing the text before the svg? – Ruskin Jan 24 '17 at 16:43
  • Sorry. In Chrome, it says "Invalid URL" when doing `data="data:image/svg+xml;http://samuel.levitt.fr/tactik/visu...` – Samuel Jan 24 '17 at 16:58
  • it will do ... my bad. Have you tried linking to static svg file on the server that has the rendered on it? See if that works. – Ruskin Jan 24 '17 at 17:05
  • I could hotlink a test svg file. Works well. `` – Samuel Jan 24 '17 at 17:09
  • tres bien ... now try to attach a static SVG that contains the generated svg from the php. I have to go now. look at response headers in chrome F12 developer tools network tab. Good luck – Ruskin Jan 24 '17 at 17:22
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/133916/discussion-between-ruskin-and-samueltb). – Ruskin Jan 24 '17 at 19:11
  • I’m voting to close this question because it doesn't include a valid code examples (example link is dead) to fix any ie11 related svg rendering issues. Besides, none of the current answers include a working snippet to be tested in ie11. – herrstrietzel Mar 04 '23 at 00:25

3 Answers3

9

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

Simon East
  • 55,742
  • 17
  • 139
  • 133
0

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.

luq
  • 1
  • 1
-2

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%" />
Samuel
  • 594
  • 1
  • 6
  • 22
  • This answer doesn't solve the issue. With all the steps that you provided, without the 'viewBox' property that was specified by Simon's answer. Still it will never render in IE11, which is essential. I tested it myself. – threeFatCat Mar 03 '20 at 06:23