search

vercel / satori

Enlightened library to convert HTML and CSS to SVG
https://og-playground.vercel.app
Mozilla Public License 2.0
11.03k stars 242 forks source link

Open graph image. Failed to parse linear-gradient with oklch values. #637

Open samcx opened 1 month ago

samcx commented 1 month ago

Discussed in https://github.com/vercel/satori/discussions/636

Originally posted by **firmart** September 16, 2024 ### Link to the code that reproduces this issue [codesandbox](https://codesandbox.io/p/devbox/still-feather-9cvjk5) ### To Reproduce 1. Start the app `npm run dev` 2. Go to `/test` ### Current vs. Expected behavior `ImageResponse` failed to parse `background: linear-gradient(15deg, oklch(65.69% 0.196 275.75), oklch(74.8% 0.26 342.55), oklch(74.51% 0.167 183.61))` which resulted in the following error : `(65.69% 0.196 275.75), oklch(74.8% 0.26 342.55), oklch(74.51% 0.167 183.61)): Missing )`. ### Provide environment information ```bash Operating System: Platform: linux Arch: x64 Version: #111-Ubuntu SMP Tue Mar 5 20:16:58 UTC 2024 Available memory (MB): 15888 Available CPU cores: 4 Binaries: Node: 21.6.2 npm: 10.2.4 Yarn: 1.22.10 pnpm: 8.15.4 Relevant Packages: next: 14.2.11 // Latest available version is detected (14.2.11). eslint-config-next: 14.1.0 react: 18.3.1 react-dom: 18.3.1 typescript: 5.6.2 Next.js Config: output: N/A ``` ### Which area(s) are affected? (Select all that apply) Image (next/image) ### Which stage(s) are affected? (Select all that apply) next dev (local) ### Additional context According to the error message, I believe that there is an issue parsing `oklch` values. It might also be a `resvg-js` issue as `satori` render the image correctly in the [OG image playground](https://og-playground.vercel.app/?share=tVbBbqMwEP0VZKlKI6UEKJAUdVdaVSvtSntrpVxyqMETcGswArNJNsq_ryckatNikkrtOyTC87A9z_PGbEgiGZCIWK9wy_jfefF6BFGrtYBvm837CILxuhR0HVmDhYDVYNTNyoCnmdIk13EuTKQlZyo7waGCp8VvBXmtiQkUCioT9ampFV-s76QmFbh2P12A0tH7kia8SDX7ynY8yE3shZ51tk9q4jgGVkyT57SSTcEi61HwAmh1lVaUcb2TSzdgkI4s-SyS7DIM7PDmwnJs9ya0vElgT4LhITbx7SmGvNC69j07OIoE7u6tcGK502s7dIfDx47NbLfHY9_fU7oPH9FfAK12C62D7xlkQChZnmCUsuaKy0JrT-NaikaBSX3EeYWH-EDNvNUJ0aEV4rYuaWFe9LRoiH3Je37P9hEH_5wkvlTcnRSyiqw5iYUem5OeF7uyRoy_MvWcVikv_uwqZ3oiK3TbPf8HWgCT1RCmPAxpIGBF81KAncjckOsYk-3yy1gb5pN9dH5NY3xWUe2pwVL_9VE_2AcRJWWs7YKeU66sQP_00duj1GxHO7yf-nKSft9JHq4C2ijZv_Jq1lKDoG8-BSv1A9vAWekfte2dfbp66gFJa7TBMuP9HQsvgF97I7u2ycnnt6AHrgScV5jtGBkRWWKLrUm0ITuNSTTVtxdp-wuJfHxgEDcpiRZU1DAikMsn_rAu8WNBLXdPeh48x595DIxEqmpgOyKKxpqRgRByKSvByPY_), but `resvg-js` fails to convert it in png.
Jackie1210 commented 1 month ago

this latest satori can convert it to svg and has that same effect with browser, but resvg-js cannot convert our svg to png. So I am afraid there are 2 issues:

  1. next/image haven't use latest satori
  2. resvg cannot handle oklch
naaa760 commented 1 month ago

Hello @samcx

While satori works, the problem seems to come from resvg-js, which might not fully support oklch. To resolve this, check your syntax and consider using a fallback color format like rgb or hsl, or update resvg-js if needed.