SVG use tag with external reference in IE 11
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 and works (as I've attempted it) in Chrome 33 and FireFox 27. It does not appear to work in IE 11.
In the actual use case, the definitions are static, large, and shared between a number of pages and among multiple inline svgs on each page. I want the definitions downloaded once and cached and then used everywhere.
Here is my example HTML:
<!DOCTYPE html> <html> <head></head> <body> <svg xmlns:xlink="http://www.w3.org/1999/xlink" height="100px" width="100px" xmlns="http://www.w3.org/2000/svg" version="1.1"> <g externalResourcesRequired="true"> <use xlink:href="defs.svg#path-1" fill="#000000"></use> <use xlink:href="defs.svg#path-2" fill="#000000"></use> </g> </svg> </body> </html>
And here is the defs.svg file referenced above:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <path d="M10,10L20,10L20,20L10,20" id="path-1"></path> <path d="M30,30L50,30L50,50L30,50" id="path-2"></path> </defs> </svg>
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
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.
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