Sharp: Opacity on SVG's is rendered inconsistently

[HMilbradt]

Hey there, I'm not sure if this the place to open this, but I thought I'd start here!

Are you using the latest version? Is the version currently in use as reported by npm ls sharp the same as the latest version as reported by npm view sharp dist-tags.latest?
Yes

What are the steps to reproduce?

• Create an SVG element with opacity="0.5"
• Mask the SVG element with another element that has fill="white"
• Convert the image to PNG using sharp
• Observe that the output image will have no transparency

What is the expected behaviour?
Browsers, as well as Macs Preview, are able to render the transparency without any issue when viewed as an SVG. I would expect that after being rendered by sharp, the resulting PNG would also maintain the same transparency, but it does not.

In the example repo I've attached below, I also include a working version. The fix in this case is to move the opacity from the element being masked to the masker. Or in other words, the element inside the <mask> tag should contain the opacity.

Are you able to provide a minimal, standalone code sample, without other dependencies, that demonstrates this problem?

I've created a Github repo here with a reproducible example. To run it, do the following:

• npm install
• node ./index.js

Are you able to provide a sample image that helps explain the problem?
Sample images are in the repo!

I wasn't able to find any reference to this online, so I'm not sure if this is just undefined SVG spec behaviour, or if there is something wrong. Thanks!

[lovell]

Hi, thank you for the detailed question and examples.

The fill-opacity attribute might be more appropriate to control the opacity of the fill.

- <circle r="99.575" opacity="0.12" cx="200" cy="200" fill="#ffffff" ...
+ <circle r="99.575" fill-opacity="0.12" cx="200" cy="200" fill="#ffffff" ...

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity

https://stackoverflow.com/a/37760013/4625124

sharp/libvips uses librsvg to render SVGs, so you might wish to experiment with its rsvg-convert command line tool and if it still doesn't render as you'd expect, ask a question upstream at https://gitlab.gnome.org/GNOME/librsvg

[HMilbradt]

Thanks for the reply @lovell, I'm going to give this a try in our system and let you know if it's working!

[HMilbradt]

@lovell I just tested and it's working perfectly. Thank you so much for your time, both on this issue and on the project!