filter: "blur(...)" doesn't work as expected with Satori + resvg-js

[peterfritz]

Bug report

Description / Observed Behavior

The CSS property filter: "blur(...)" doesn't work properly when used in conjunction with resvg-js to generate a PNG image.

Expected Behavior

Expected	Observed

Reproduction

Vercel OG Playground

Additional Context

First observed in Next.js version 14.0.1 using ImageResponse from next/og. Reproduced in Vercel OG Playground that lists Satori's version as 0.0.0-development.

[yisibl]

This requires upgrading resvg-js to the latest version (2.6.0). Try it: https://resvg-js.vercel.app/

PR: #572

[peterfritz]

Oh, that's way better!
The maximum blur size is a square that is twice the shape's width and height? Is this a technical limitation or an issue with my code?

[JessicaSachs]

I don't think it's your code. I'm running into issues with this too.

[peterfritz]

Coincidentally I encountered this issue again last week. Satori still hasn't upgraded resvg-js to its latest version.