Drop shadow with rgb color not working

[razzeee]

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

thx/resvg-js#317

[RazrFalcon]

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]

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]

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]

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]

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]

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

[LaurenzV]

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]

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]

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

[RazrFalcon]

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