Gradients not rendering

[rctneil]

Hey,

Been testing out gulp-svgstore for my new site. I have got it working on quite a few SVG's and it's great.

However, any svg's that contain gradients do not render them. On;y the solid fill areas show up. I have read everything I can find to locate a solution but can't seem to get anything to work. I tried moving a linearGradient blog out of the and this allows it to display in Firefox but still nothing in Chrome.

I also have a lot of SVG's and quite a few have a lot of gradients so it's a big issue for me here. Is there a solution to this and if so, is there an automated way that can be done as part of the gulp workflow and svgstore task?

[w0rm]

@rctneil hi, I think this issue is the same as #55
wrap gradients definitions inside defs and check if this works for you

[rctneil]

@w0rm I did read that but it doesn't make sense to me. Also, I am using externally referenced SVG so unsure if that makes a difference.

[w0rm]

@rctneil can you provide a source of an example svg that is broken when used from a combined file?

[rctneil]

@w0rm Ok, This SVG has a gradient and the gradient part doesn't show in Chrome. If I move the gradient out of the symbol then the gradient parts shows in Firefox but still not in Chrome:

https://gist.github.com/rctneil/a69743e09be0d44ac309?short_path=f99ea3c

[w0rm]

@rctneil I was able to reproduce the issue, wrapping gradient inside defs fixes the issue in Firefox, but not in Chrome.

I'm really not sure why its not working.

[rctneil]

@w0rm It's odd. How are other people using this plugin solving the issue? Surely they must be encountering it?

This is happening for every SVG that I have with some form of gradient.

[w0rm]

Maybe they inline combined svg into the page. I'm not using svgstore for complex svgs, but rather for monochrome icons.

[w0rm]

I'd like to see this issue tracked down to an explanation of why its broken or maybe even a Chrome bug report.

[rctneil]

@w0rm I've just reverted to an inline option and all the gradients display. Weird.

[w0rm]

@rctneil I was able to find this question on stackoverflow with a links to chromium and webkit bugs. Not sure if its the same issue we're having here.

[daviddarnes]

@w0rm I don't think it's quite the same as the question refers to an external file. I've just used svgstore on this project and the gradients are missing, all of the SVGs are inline. The first icon in the grid should be shown like this.

Edit: I managed to solve my issue partly by removing visibility: hidden; from my SVG defs wrapping div, and partly by tweaking the names of the linearGradient elements. 3 of them were named linearGradient-1 which was causing conflicts.

[w0rm]

@daviddarnes yes, your issue is different from this one. I'm closing this one because thats how Chrome works, if you use symbols from external svg and they link to gradients or other objects from within that external svg — then the linked objects don't render.

Regarding two gradients with the same id, svgstore simply merges all svgs together, you need to ensure this yourself that ids do not clash. This can be done with gulp-svgmin, check the very first example from the readme https://github.com/w0rm/gulp-svgstore#usage

[daviddarnes]

@w0rm thanks for the reply. Upon further investigation it appears that Sketch is quite poor when it comes to naming and managing gradients, it merely numbers them. So when combining SVGs with gradients it will almost always clash. At some point I should probably use cheerio in the gulp task to name the gradients.

Sorry for pointing the blame in the wrong direction. Thanks for open sourcing!

[w0rm]

@daviddarnes why isn't the proposed solution working for you? It ensures unique ids automatically and also minifies svgs

[daviddarnes]

@w0rm I wasn't using svgmin at the time, thought it was causing another issue. I changed the IDs myself and everything works fine. Despite svgmin solving the gradient issue, it would still be nice if Sketch didn't just number gradients like that.