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.

My question is: is there a way to do this (while still maintaining the external svg and not using javascript) that works in all three browsers?

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.

I understand that it is possible to do this with javascript, but as this usage paradigm is an intended part of the SVG spec and supported by Chrome and FF, I am hoping that I can do it this way and that I'm just missing some detail of how IE wants the HTML or SVG.

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>

Answers


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.

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

Need Your Help

Android - Wait for volley response to return

java android wait android-volley

I need execute a Volley request and wait for the response to parse it and return it, but have no idea on how to achieve this. Can someone help?

Algorithm for neatly indenting SQL statements (Python implementation would be nice)

python sql coding-style indentation pretty-print

I'd like to reformat some SQL statements that are a single string with newlines in to something that's much easier to read.