Geek Answers Handbook

Use SVG tag with external link in IE 11

I want to enable embedded svg in an html5 page that includes "use" tags that refer to elements in another svg file that the URL refers to. This is part of the SVG specification and works (as I tried) in Chrome 33 and FireFox 27. In IE 11, it does not work.

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

In the actual use case, the definitions are static, large and shared across multiple pages and among several embedded svg on each page. I want the definitions to be loaded once and cached, and then used everywhere.

I understand that this can be done using javascript, but since this usage paradigm is a supposed part of the SVG specification and is supported by Chrome and FF, I hope that I can do it this way and that I just lack some details of how IE wants HTML or SVG.

Here is my HTML example:

<!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 mentioned 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>
+7
html5 internet-explorer svg
source share
2 answers

svg4everybody uses requestAnimationFrame, which causes too many calls. I wrote a simple and lightweight polyfill for the very purpose of supporting <use> elements with external links when the browser itself fails. This polyfill uses function detection, not browser sniffing. This is on github: https://github.com/Keyamoon/svgxuse

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

+15
source share

The question is old, but I stumbled upon it and want to give a basic hint of this:

As https://developer.mozilla.org/de/docs/Web/SVG/Element/use describes that using the "use" svg tag to load from an external URI is not supported in IE 11.

I would suggest using additional libraries, for example. https://github.com/jonathantneal/svg4everybody , https://github.com/iconic/SVGInjector

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

  • You are checking the browser / looking for function support (modernizr -> Example 1 , Example 2
  • In IE11, than getting the link from the "use" tag, change it with the path tag from the svg sprite
+1
source share

More articles:


All Articles