SVGs with gradients and patterns are broken when using symbol strategy

[astronomersiva]

SVGs with gradients and patterns do not work if they are placed within the symbol. Firefox seems to be the most affected - https://bugzilla.mozilla.org/show_bug.cgi?id=353575, https://stackoverflow.com/questions/12867704/svg-linear-gradient-does-not-work-in-firefox.

When I tried this strategy in one of my apps, there were breakages in other browsers like Chrome and Edge as well. The gradients were displayed differently across each browser.

To fix this, moving the defss blocks out of the symbol seems to do the trick. I found this PR from another repo that deals with svg sprites that can be used for ideas to implement this here. Here is another detailed issue with many relevant discussions.

I have also gone ahead and created a repo with a reproduction. If you serve this app, Firefox will display an empty page but Chrome will display an SVG with a radial gradient.

[voltidev]

That's interesting. Thanks for the detailed issue message, I'll take a look soon.

[voltidev]

Looks like it's possible to fix it by moving linear gradients outside symbol elements. It requires some changes in broccoli-symbolizer but I don't have any time for that at the moment. I'll get back to it when I have a chance.

[summerisgone]

@astronomersiva I also figured out alternative solution for gradients: You should

1. include icons with gradients with inline strategy
2. set up svgo to prefix references:

optimizer: {
        plugins: [
          { prefixIds: true }
        ]
      }