Why can't I reference an SVG linear gradient defined in an external file (paint server)?

Question

Please have a look at this Pen:

http://codepen.io/troywarr/pen/VYmbaa

What I\'m doing here is:

• defining an SVG symbol (

Answer 1

You can use svg4everybody with polyfill: true option, it will insert all external symbols instead of use tags. But it will cause the second svg loading.

So you can download svg using an ajax request and then insert it on the page hiding with the styles.

<script>var ajax=new XMLHttpRequest;ajax.open("GET","/img/svg-sprite.svg",!0),ajax.send(),ajax.onload=function(a){var b=document.createElement("div");b.classList.add("hidden"),b.innerHTML=ajax.responseText,document.body.insertBefore(b,document.body.childNodes[0])};</script>

In this case:

/img/svg-sprite.svg — is your svg path.

.hidden class styles:

.hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

And your code might look like this:

<svg><use xlink:href="#logo"></use></svg>

Answer 2

After more research, it looks like this is a browser support issue. See:

• https://code.google.com/p/chromium/issues/detail?id=109212
• https://bugs.webkit.org/show_bug.cgi?id=105904

Sadly, I'd come across this question before posting mine, and had thought that surely, in 5-1/2 years, browser support would have caught up - but that doesn't appear to be the case.

As of 2015, apparently Firefox and Opera are the only two browsers to support this in any substantial way.

Back to the drawing board...