SVG - Display svg using 'use' and an external link

I have a plunker here

https://plnkr.co/edit/EjS1tsvsdmCUTf7IAebF?p=preview

I’m trying to use ‘use’ to display a svg that comes from an external url.

If I use the url in a browser

http://www.ttmt.org.uk/sprite.svg#rectangle

I don’t see the svg but if I inspect the page I can at least see the svg structure.

On the plunker I can’t get the svg to display.

The current HTTP header is “text/xml”

https://css-tricks.com/snippets/htaccess/serve-svg-correct-content-type/

If you are trying to use SVG like <img src="image.svg"> or as a CSS background-image, and the file is linked to correctly and everything seems right, but the browser isn’t displaying it, it might be because your server is serving it with an incorrect content-type.

Another thing to consider

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

xlink:href

Deprecated since SVG 2
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.