Gradients not working for inline SVG on webpage

Question

I have an SVG sprite which is embedded inline in a web page which contains several images as symbols, and some of these images have gradient fills defined in the <defs> section of the SVG. However when I try to use any of the images on the page by using a <use> tag the image displays, but doesn't have any of the gradients. e.g.

<html>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <defs>
                <linearGradient id="foo" />
            </defs>
            <symbol id="bar">
                <path fill="url(#foo)">
            <symbol>
        </svg>

        <!-- This displays the image contained in the symbol #bar but doesn't show the gradient defined in #foo -->
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <use xlink:href="#bar" />
        </svg>
    </body>
</html>

I believe this is the correct way to include the gradients, with the defs section defined outside the symbol. However it doesn't work in chrome, firefox or IE11 / Edge (actually in IE / Edge it doesn't show the image properly either, but for now I'm tempted to blame IE for that) so since it doesn't work in any modern browser I'm guessing it is a mistake on my part.

This is of course a very simplified example, the SVG sprite is a composite of several images generated with grunt SVG-store, but an individual image does display fine if I try displaying it on the page like so:

<img src="bar.svg" />

So the SVG itself seems to be correct. I have also tried placing just one image from the sprite inline on the page (modified slightly so it is a symbol as above) and referenced it with <use> and it displays OK. I have tried comparing the XML of an individual image and its symbol in the sprite and as far as I can see they are identical (including the parts of the <defs> section relevant to the image).

@RobertLongson That is just a very minified sample to show where the gradient is — Anduril, Apr 22 '16 at 09:57
That makes it rather hard for the rest of us to determine where your bugs are doesn't it? — Robert Longson, Apr 22 '16 at 10:06
@RobertLongson I only included it to show the structure of the image I was referencing, as mentioned in the question, the image itself seemed to display fine if included on its own, only when it was referenced as a symbol was it causing a problem. I thought the issue was caused by referencing with a ``. As it happens it was nothing to do with that, Sorry if I wasn't very clear — Anduril, Apr 22 '16 at 10:18

score 0 · Accepted Answer · answered Apr 22 '16 at 09:59

0

The issue was because the sprite was hidden with display: none in the css because otherwise the browser includes it in the flow and allocates space for it because it is at the top of the body. Removed display:none and changed it to position:absolute; left: 9999px;

answered Apr 22 '16 at 09:59

Anduril

1,236
1
9
33

You should remove your question since it has absolutely nothing to do with SVG gradients. – Brandon Hill Mar 24 '21 at 14:45
@BrandonHill The information may not be limited to gradients specifically, but the issue was that if an SVG sprite was hidden with `display: none`, then the gradients in the defs don't work. This may be true for other things in the defs, I don't know, but I think that is useful information – Anduril Mar 24 '21 at 14:57

Gradients not working for inline SVG on webpage

1 Answers1