SVG External Content
Allows referencing external content in SVG. A common use case for this would be <use xlink:href="lib.svg#template" fill="#000000"></use>.

SVG external content shipped in EdgeHTML 13 as part of the Microsoft Edge version included in Windows 10 build 10586 (November 2015).
12 comments
-
Louis commented
Please make SVG External Content work in Edge!
-
Anonymous commented
SVG External Content -is needed for Microsoft Edge -
Why does Microsoft always have to go their own way??? -
David Storey [MSFT] commented
@Anonymous: It is in the current Insider Preview (build 10547: https://dev.modern.ie/platform/changelog/desktop/10547/). No release date to report.
-
Anonymous commented
@Microsoft Edge: In which public release will the "external svg use method" <use xlink:href="mysite.com/#icon-edge"></use> be supported? Release date?
-
@bill Delaney. SVGforeverybody needs to browser sniff and doesn't detect Edge. I believe the author has updated the shim, so if you update to the latest version, it should work.
-
Bill Delaney commented
My shim (svgforeverybody) does not work in Edge. Sites I have developed using SVG are completely graphic-less in Edge. Ugh.
-
George Connor commented
Oh yes please,
-
Anonymous commented
+1
Here is the icon system that I built and use: http://mcraiganthony.github.io/svg-icons/
External SVG is a must. The key is that it allows the use of inline SVGs. Inline SVGs can be sized using font size (and inherits font size from parent). The old SVG background image method requires that you set specific sizes = lame.
-
David Storey [MSFT] commented
@chris, thanks, I’ll update the link.
-
fvsch commented
We’re using external SVG sprites for most new projects at work. Right now we’re including svg4everybody, a small JS polyfill, for IE 9-11. I hope this feature will make the cut in Edge!
A demonstration, without any JS polyfilling (compare Edge and any other browser, including Opera Mini):
http://fvsch.com/code/svg-sprite/ -
Anonymous commented
A even better or useful scenario is via CSS background image, consider this line:
background: url('path/to/sprites.svg#symbol-id') no-repeat;
this solves a number of problems:
1. even though you are still loading a sprite file, you don't have to build it in a visual grid, so you don't have to calculate the position of each sprite, just reference each via id. and if you are doing responsive design, you don't need to maintain multiple background-sizing and positions for each icon.
2. since symbols are not drawn until used, it could potentially save a lot of system memory, by not loading a whole symbol library. this is especially important for mobile and xbox apps.
-
Chris Lilley commented
A better link would be the SVG2 <use> element
http://www.w3.org/TR/SVG2/struct.html#UseElement