Inkscape gradients not rendering #97
Comments
|
It's because the gradients have references to each other, which isn't supported (yet). See #68 |
|
Is there a workaround for this? Even the simplest gradients made in Inkscape with two stops have this issue, so it would be hard to manually change everything for the bigger SVG files. |
|
I can look at supporting this - for now, unfortunately, it'd require manually updating the SVG. I'm not sure if Inkscape has a setting control this - I have a feeling it doesn't though. |
|
FYI - your compressed version would go from: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 94.4 94.4">
<defs>
<linearGradient id="a">
<stop offset="0" stop-color="#ff02ce"/>
<stop offset="1" stop-color="#ffef3a"/>
</linearGradient>
<linearGradient id="b" x1="-157.994" x2="-9.071" y1="122.753" y2="122.753" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
</defs>
<circle cx="-83.533" cy="122.753" r="74.461" fill="url(#b)" transform="matrix(.63388 0 0 .63388 100.15 -30.611)"/>
</svg>to <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 94.4 94.4">
<defs>
<linearGradient id="a" x1="-157.994" x2="-9.071" y1="122.753" y2="122.753" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ff02ce"/>
<stop offset="1" stop-color="#ffef3a"/>
</linearGradient>
</defs>
<circle cx="-83.533" cy="122.753" r="74.461" fill="url(#a)" transform="matrix(.63388 0 0 .63388 100.15 -30.611)"/>
</svg> |
|
Thank you - I have quite a few Inkscape SVGs, so a fix in the code would be good. |
|
Implemented in dd44ee7 - can you try that revision and make sure it's working for you? |
|
Tried it on the more complex SVGs which haven't been working. This is the error I'm getting Will try and find a SVG I can share with the same issue to repro |
|
Thanks for the update. Started off with the SVG from https://github.com/googlei18n/noto-emoji/blob/master/svg/emoji_u1f366.svg then added a gradient in Inkscape, then checked for errors in Flutter. Gradient rendering when the gradient is made in Inkscape is still spotty, but some gradients render perfectly with your update. Source SVG: Adding radial gradient to center of ice-cream in Inkscape
Error: Actual: Does not render SVG at all in Flutter Adding gradient to bottom of ice-cream in Inkscape
Error: Actual: Simple radial gradient
Error Actual: Does not render SVG at all in Flutter Edit: Tested using 94790ea |
|
Thanks for all the examples! I'll take a look. |
|
That last one is very fixable. The other two are bad news. I've improved the error message for those cases, but this library expects references to be defined before they're used - otherwise we have to start keeping more things around in memory. I have an idea about how I could maybe tolerate that for this case, but for now I've improved the error message. If you move the element up towards the top of the document, Inkscape shouldn't move it again on you. |
|
Thanks for the radial gradient fix. Manually ordering defs fixes the issue for the first two cases as well. |
|
I'm going to publish this for now, and I'll open a new issue for tracking whether we can get some support for out-of-order definitions. |
|
published as v0.10.1 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Gradients made in Inkscape don't always render properly with flutter_svg.
Here is what the SVG looks like with version 0.9.0+1 of flutter_svg:
Here is what it should look like (verified in web browser, Inkscape and Android Studio's SVG preview):
Inkscape version:
Compressed version (without any Inkscape metadata):
Both versions don't work with the current build but can't figure out why some other SVGs with gradients work fine.
Issue related to #49 and #4
The text was updated successfully, but these errors were encountered: