Drop shadow with rgb color not working

razzeee commented 8 months ago

Hey, I'm trying to use a drop shadow in a style element like

filter: "drop-shadow(0 2px 2px rgb(0 0 0))",

or even better

filter: "drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))",

But when converting from svg to png via resvg the shadows are lost

It should be reproduceable with

https://github.com/yisibl/resvg-js/issues/317

RazrFalcon commented 8 months ago

The first one works just fine with the latest resvg. The second doesn't, because of / before the alpha. We do not support such notation yet. Prefer rgba(0 0 0 0.07) and it will work fine. Most of the stuff from CSS Color Module Level 4 isn't supported. We target Level 3 for now.

razzeee commented 8 months ago

I guess https://github.com/yisibl/resvg-js using 0.34 is a problem then. I at least can't get it to work with rgba(0 0 0 0.07)

But my source image also fails to generate a shadow in the svg version, unless I add the commas for rgba "drop-shadow(0 4px 3px rgba(0, 0, 0, 1)) drop-shadow(0 2px 2px rgba(0, 0, 0, 1))",

RazrFalcon commented 8 months ago

Commas are optional. It should work without them. If resvg CLI renders your SVG fine - then it's resvg-js bug. And resvg-js is an independent project. I have no affiliation with it.

razzeee commented 8 months ago

Tested with latest version of the cli and it fails with

Warning (in usvg::parser::filter:93): Failed to parse a filter value cause unexpected end of stream. Skipping.

With this svg

<svg width="258" height="258" viewBox="0 0 258 258" xmlns="http://www.w3.org/2000/svg"><mask id="satori_om-id"><rect x="0" y="0" width="258" height="258" fill="#fff"/></mask><rect x="0" y="0" width="258" height="258" fill="#E8F8FF"/><mask id="satori_om-id-0"><rect x="0" y="0" width="258" height="232" fill="#fff"/></mask><mask id="satori_om-id-0-0"><rect x="-21" y="-12" width="300" height="256" fill="#fff"/></mask><clipPath id="satori_cp-id-0-0-0"><path x="1" y="-12" width="256" height="256" d="M17,-12 h224 a16,16 0 0 1 16,16 v224 a16,16 0 0 1 -16,16 h-224 a16,16 0 0 1 -16,-16 v-224 a16,16 0 0 1 16,-16"/></clipPath><mask id="satori_om-id-0-0-0"><rect x="1" y="-12" width="256" height="256" fill="#fff"/></mask><image x="1" y="-12" width="256" height="256" href="data:image/png;base64,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" preserveAspectRatio="none" style="filter:drop-shadow(0 4px 3px rgba(0, 0, 0, 0.5))" clip-path="url(#satori_cp-id-0-0-0)" mask="url(#satori_om-id-0-0-0)"/></svg>

LaurenzV commented 8 months ago

Definitely a bug in resvg. For some reason the double closing quote trips up the value parser. If you replace it with something like "black" it works. The value of the filter attribute gets parsed as "drop-shadow(0 4px 3px rgba(0, 0, 0, 0.5)", even though in the original SVG there are two closing brackets.

LaurenzV commented 8 months ago

Seems to be a bug in simplecss if I'm not wrong.

LaurenzV commented 8 months ago

Here is the culprit: https://github.com/RazrFalcon/simplecss/blob/37ddffef48bd8597347284c94e219bd69263f316/src/lib.rs#L510-L514

We simply iterate until we find the first closing bracket, which won't work if they are nested...

yisibl commented 8 months ago

I guess https://github.com/yisibl/resvg-js using 0.34 is a problem then. I at least can't get it to work with rgba(0 0 0 0.07)

But my source image also fails to generate a shadow in the svg version, unless I add the commas for rgba "drop-shadow(0 4px 3px rgba(0, 0, 0, 1)) drop-shadow(0 2px 2px rgba(0, 0, 0, 1))",

Please note that even in CSS Color Level 4, rgba(0 0 0 0.07) is incorrect syntax. When using an alpha value, it needs to be separated by a /, like this: rgba(0 0 0 / 0.07).

However, when submitting an issue to resvg, please use the color syntax from CSS Color Level 3. I even recommend always prioritizing Color Level 3 syntax in SVG because it has better compatibility.

RazrFalcon commented 8 months ago

@LaurenzV Yeah... it's a CSS2 parser for a reason. Will see how to fix it.

RazrFalcon commented 7 months ago

As a hotfix you can use #rrggbbaa notation. It should work fine.

linebender / resvg

Drop shadow with rgb color not working #727