Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SVGs with gradients and patterns are broken when using symbol strategy #103

Open
astronomersiva opened this issue Sep 27, 2018 · 3 comments

Comments

@astronomersiva
Copy link
Contributor

astronomersiva commented Sep 27, 2018

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
Copy link
Collaborator

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

@voltidev
Copy link
Collaborator

voltidev commented Oct 9, 2018

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
Copy link
Contributor

summerisgone commented Oct 13, 2019

@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 }
        ]
      }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants