SVG use tag with external reference in IE 11

Question

I want to include an inline svg in an html5 page that includes \"use\" tags that reference elements in a different svg file, referenced by URL. This is part of the SVG spec

Answer 1

svg4everybody uses requestAnimationFrame, which causes too many calls. I wrote a simple and lighweight polyfill for the very purpose of supporting <use> elements with external references when the browser itself fails. This polyfill uses feature detection rather than browser sniffing. It's on github: https://github.com/Keyamoon/svgxuse

Live demo: https://icomoon.io/svgxuse-demo

Answer 2

The question is old but I've came across it and want to give a basic hint to this:

As https://developer.mozilla.org/de/docs/Web/SVG/Element/use describes the use of the "use" svg-tag to load from external URI isn't supported in IE 11.

I would suggest to use additional libraries, e.g. https://github.com/jonathantneal/svg4everybody , https://github.com/iconic/SVGInjector

Basically, you could write your own js-lib where:

• You check for the browser / look for the feature support (modernizr -> Example 1 , Example 2
• On IE11 than get the reference from the "use" tag, change it with the path-tag from the svg-sprite