Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
peterfritz opened this issue Nov 9, 2023 · 2 comments
Open

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

peterfritz opened this issue Nov 9, 2023 · 2 comments

Comments

@peterfritz
Copy link

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.
@peterfritz peterfritz changed the title filter: "blur(...)" doesn't work as expected with "Satori + resvg-js" filter: "blur(...)" doesn't work as expected with Satori + resvg-js Nov 9, 2023
@yisibl
Copy link
Contributor

yisibl commented Nov 10, 2023 •
edited

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

PR: #572

image

@peterfritz
Copy link
Author

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?

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@yisibl @peterfritz