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.

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: