Add SVG `use` with external reference

[alejandroiglesias]

It would be good to add this feature since the browser support is variable (no IE or old Safari). How it looks like:

<!-- Reference IN THIS SAME DOCUMENT -->
<svg>
  <use xlink:href="#icon-1"></use>
</svg>

<!-- EXTERNAL reference -->
<svg>
  <use xlink:href="sprite.svg#icon-1"></use>
</svg>

More info:

• https://css-tricks.com/svg-use-with-external-reference-take-2/
• https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263916-svg-external-content?tracking_code=85a4cffafffac0497bb5074ed03d43f5

[Ugoku]

+1

Edge 12 also doesn't support this, according to the svg4everybody polyfill

[kfbow]

Also xlink deprecation: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href.

[Herst]

+1

[mehulkar]

+1. I just tried to look this up because of the xlink:href deprecation :)

[GPHemsley]

Looks like this is now covered by MDN data: https://caniuse.com/mdn-svg_elements_use_xlink_href https://caniuse.com/mdn-svg_elements_use_href

(via mdn/browser-compat-data#1419)

[Fyrd]

I think the MDN data is just for support xlink:href, not specific to external references

[GPHemsley]

I think the MDN data is just for support xlink:href, not specific to external references

I thought <use xlink:href> and <use href> was all this issue was about. I'm not seeing any examples of other forms of external references.

[Zearin]

MDN’s content for SVG is woefully incomplete. Don’t expect it to be as comprehensive or up-to-date for SVG as it is for HTML, CSS, and JS.