CODEWITHSUNDEEP
htmlcssinternet-explorersvg
Michael Ahearn
Michael Ahearn

Reputation: 13

SVG image not displaying in any version of IE

I'm not convinced that it's the old "SVG external reference not loading in IE" problem. Reason for that there are other SVG images loading correctly.

To see the issue, please preview this site in IE (http://votensw.info/) at screen width less than 900px. Click on the search button top right.

In other browsers, the button changes to an "X" over a grey background: [screenshot of close button][2].

In IE, neither the svg "X" image, nor the grey background display correctly.

While there may be the svg problem with IE, I think that there's also some problem with the CSS, but I can't see what might be the problem.

I'd be very grateful to anyone who can inspect the css and find a fix for me.

Upvotes: 0

Views: 2781

Answers (2)

karthick
karthick

Reputation: 12176

The icon uses svg use

svg use doesn't work in IE if it has to load something from an external resource.

Please check the Browser Compatability in this link.

from the mentioned site:

<svg class="icon icon-blue search__icon-close" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://www.votensw.info/_designs/css/alternative_2017/main_alternative.css/sprite.svg#close"></use>
</svg>

Upvotes: 1

Pautomagi
Pautomagi

Reputation: 344

Also make sure to set the width and height for svgs to work in IE.

Upvotes: 0

Related Questions