Hide in ie8

[grimski]

I was wondering what is the best solution to hide/disable a SVG in Internet Explorer 8. I’ve tried display: none !important;, which doesn’t work at all so I’m guessing the browser has no idea what it is or how to interpret it?

I’ve also tried [xmlns="http://www.w3.org/2000/svg"] {display: none;} which kinda worked …my page layout changed but it still wasn’t right (as it is if I remove the SVG from the mark-up completely). It was as if not all the SVG elements had been removed from the page?

My mark-up for the 2 SVG’s is as follows:

<svg id="billboard-svg" version="1.1" viewBox="-679.6 69.3 1646.3 400" preserveAspectRatio="xMinYMax slice" width="100%" height="400">
    <defs>
        <pattern id="svgbg" patternUnits="userSpaceOnUse" width="500" height="300">
            <image xlink:href="img/interface/bg-lightpaperfibers.png" x="0" y="0" width="500" height="300" />
        </pattern>
    </defs>
    <path fill="url(#svgbg)" vector-effect="non-scaling-stroke" d="M-696.2,247.3c336.3,90.5,609.6,109.9,796.2,110.5c64.1,0.2,105.5,0.4,165.2-4.1c244.8-18.5,365.5-82.4,702.3-132.2c15.9-2.4,28.7-4.1,36.1-5.2L987.2,638l-1689.8,2.7L-696.2,247.3z" />
</svg>

<svg id="footer-svg" width="100%" height="160" viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin slice" baseProfile="full">
    <defs>
        <pattern id="svgbg" patternUnits="userSpaceOnUse" width="500" height="300">
            <image xlink:href="img/interface/bg-lightpaperfibers.png" x="0" y="0" width="500" height="300" />
        </pattern>
    </defs>
    <path id="wave" fill="url(#svgbg)" vector-effect="non-scaling-stroke"  d="M 0,40 q 300,60 600,0 T 1210,20 l 0,-580 -1210,0" />
</svg>

Hope someone can help and recommend a best-practice solution for this …if there is one!

[Paulie_D]

Does IE8 even support SVG?

I’m surprised it even renders.

[Beverleyh]

How about wrapping it in downlevel reveal conditional comments?

<!--[if gte IE 9]><!-->
<span>
Hi, I'm visible in IE9+ and other modern browsers!
</span>
<!--<![endif]-->

[Paulie_D]

It doesn’t …but it doesn’t hide it either

Is it wrapped in an element or by itself.

If it’s in a wrapper element, try hiding that instead.

Of course, you should really have a fallback image for these eventualities.

Alternatively, remove the dimensions from the SVG mark-up itself (width/height) and apply those with CSS instead.

[Senff]

display:none; should definitely work, if you put it in an IE8-specific CSS file.

[Senff]

You probably have an error somewhere else in your code then, cause under normal circumstances, setting display:none; on an SVG definitely hides it in IE8. See http://codepen.io/senff/pen/GgmWRG

[Author]

Posts