anup-a/svgwave

Gradient does not work in Inkscape

achimmihca opened this issue · 4 comments

This nice little tool generated the following SVG for me:

<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 400" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150"><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#002bdcff"></stop><stop offset="95%" stop-color="#32ded4ff"></stop></linearGradient></defs><path d="M 0,400 C 0,400 0,200 0,200 C 173.86666666666667,204.93333333333334 347.73333333333335,209.86666666666665 492,197 C 636.2666666666667,184.13333333333335 750.9333333333334,153.46666666666667 904,151 C 1057.0666666666666,148.53333333333333 1248.5333333333333,174.26666666666665 1440,200 C 1440,200 1440,400 1440,400 Z" stroke="none" stroke-width="0" fill="url(#gradient)" class="transition-all duration-300 ease-in-out delay-150 path-0"></path></svg>

This is rendered nice in the browser.
But the gradient does not work in Inkscape.
Neither does the gradient work in my other desktop image viewer (nomacs), nor the SVG extension for Windows Explorer

Thus, I assume that the generated SVG does something unusual.
Would be nice if the gradient could be created compatible to Inkscape SVG.

The SVG with plain color (no gradient) does not work either in Inkscape.

The issue seems to be that there is an alpha value for the color.

This does not work in Inkscape:

  • fill="#9900efff"

But this does work:

  • fill="#9900ef"

I guess an alpha value is not expected here. SVG has dedicated attributes for opacity, fill-opacity, stroke-opacity.

@achimmihca Yes, I just checked it doesn't work on some desktop viewers.

You are correct alpha value with hex code doesn't work well with svgs https://stackoverflow.com/questions/6042550/svg-fill-color-transparency-alpha.

Thank you. This PR should fix it #73 .

@achimmihca Can you test with this link and confirm ?

Thanks for the quick fix. It works for me.