10

Please have a look at this Pen:

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

What I'm doing here is:

  • defining an SVG symbol (<symbol>)
  • defining an SVG linear gradient (<linearGradient>)
  • using the <use> element to reference the SVG symbol I've created
  • in the CSS, defining two classes:
    • external, which references the linear gradient defined in this external .svg file (right click and view source)
    • internal, which references the linear gradient defined in the local HTML (which is, I believe, effectively identical to the one in the external file)

Because I've applied the internal class to the <svg> element at the bottom of the HTML example, the gradient is applied, rendering a blue gradient checkmark. That's what I'm after.

But, if you switch the internal class to external in the HTML example, the checkmark is no longer visible:

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

When I watch Chrome Inspector's "Network" tab, I don't see the browser trying to load the SVG file at all. Is there a problem with my syntax, or is something else going on here?

It at least looks like I'm doing this right, based on a few references I've found:

But, nothing I've tried so far has allowed me to reference a linear gradient defined in an external .svg file.

Thanks for any help!

2 Answers 2

14

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

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...

3
  • 4
    Here from 2016 and it's still a problem. Wanted to generate swatches SVG and reference it for fills in other SVG files but it doesn't work in Chrome/Safari/Webkit. Commented May 10, 2016 at 21:28
  • Any progress in 2021? Commented Feb 14, 2021 at 10:45
  • 1
    2023, still a problem... Commented Mar 5, 2023 at 14:14
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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.