Why doesn't IE11 see the svg sprite?

Question

css

Good day!
On the page I use 2 svg sprites, both are generated by gulp via symbol. The first is connected at the top of the page directly in html, like this:

<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-1" viewBox="0 0 48 43" preserveAspectRatio="xMidYMid">
<path d="....." class="cls-1"></path>
</symbol>
<symbol id="icon-2" viewBox="0 0 53 40" preserveAspectRatio="xMidYMid">
<path d="....." class="cls-1"></path>
</symbol>

and in icons it is used like this:

<svg width="48" height="43">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-1"></use>
</svg>

And the second one just in the icons additionally indicates the sprite file

<svg class="contacts-list__icon" width="22" height="21">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/sprite.svg#icon-3"></use>
</svg>

But the problem is that in IE11 (not to mention 10) the icons from the second sprite are not displayed. I don't understand what could be the problem :(

Answer 1

To support IE svg sprite from an external file, you need to use the polyfills https://github.com/jonathantneal/svg4everybody or https://github.com/Keyamoon/svgxuse

Answer 2

I recently switched to icon fonts. Try it, you will like it