How To Hide Svg Tag From Ie8

I have HTML page where I render SVG and all works fine in modern browsers and IE9+. IE8 however doesn't display svg and all I see is empty box. I'm trying to make IE8 and older bro

Solution 1:

You don't have to wrap your SVGs into another element. It's sufficient to add proper namespace declarations and target those, like:

[xmlns="http://www.w3.org/2000/svg"] {
  display: none;
}

You could also use modernizr, a custom test or a simple html tag switch with conditional comments to add the classes inlinesvg and no-inlinesvg (or something similar), respectively, to the HTML tag:

.no-inlinesvg[xmlns="http://www.w3.org/2000/svg"] {
  display: none;
}

Hope this helps!

Solution 2:

I would not hide SVG, instead use this little hack that gets the job done.

<imgsrc="image.svg"onerror="this.onerror=null; this.src='image.png'">

Additional Info

Solution 3:

Late answer here, but in my testing, Josh C's solution won't work, presumably because since IE8 doesn't know what an <svg> is, it isn't able to apply styles to it.

What worked in my case was to wrap the <svg> in a <div id="svgWrapper">. Then a modification of Josh's solution works quite nicely:

<!--[if lte IE 8]>
  <style type="text/css">
    #svgWrapper { display: none; }
  </style>
<![endif]-->

In my particular case, I was already adding an outer wrapper class in the case of IE, so all I needed was a new style targeting .ie8 #svgWrapper and it seemed to test well.

EDIT: I need to learn to read better. Clearly the OP reached the same conclusion and answer was totally unnecessary.