tag to load svg from external url

Question

I want to load svg from external URL by using tag so that I can have some more control on my svg instead of tag. But when I am using svg on the same page and loading using tag it is working perfect. But as I am uploading svg to external URL and putting URL in then it is not working.

Working example code




  Photo Gallery

But I want something like this (Not Working). I have upload the same svg image on external URL but it is not showing up on the page.


  Photo Gallery

user_15015675 · Answer

As @Robert Longson already has pointed out:
You might not be able to embed external svg symbol/defs references due to security settings.

Provided the external host permits cross origin access for svg files, you can use these polyfills:

CDNs dedicated to script libraries like jsdelivr will usually add suitable CORS headers (or provide some options to allow cross origin access).

On the other hand: svg sharing sites like svgshare don't allow remote access (but it works fine for elements, but you won't be able to fetch and parse the svg DOM).

Example 1: using @thasmo's external-svg-polyfill

For some reasons this polyfill doesn't work in SO snippets on iOs safari

window.document.addEventListener('DOMContentLoaded', function() {
  new ExternalSvgPolyfill();
});

svg {
  display: inline-block;
  width: 25%;
  border: 1px solid #ccc
}

Example 2: using svgxuse by @Keyamoon

svg{
  display:inline-block;
  width:25%;
  border: 1px solid #ccc
}

Both polyfills fetch the external svg contents and append it as a hidden inlined element to the DOM.

<use> tag to load svg from external url

1 Answers

Example 1: using @thasmo's external-svg-polyfill

Example 2: using svgxuse by @Keyamoon