vercel / satori

Enlightened library to convert HTML and CSS to SVG

https://og-playground.vercel.app

Mozilla Public License 2.0

11.04k stars 242 forks source link

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

Open peterfritz opened 11 months ago

peterfritz commented 11 months ago

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 commented 11 months ago

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

PR: https://github.com/vercel/satori/pull/572

peterfritz commented 11 months ago

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