Html + Css -> SVG. Satori
https://github.com/vercel/satori
// api.jsx
import satori from 'satori'
const svg = await satori(
<div style=>hello, world</div>,
{
width: 600,
height: 400,
fonts: [
{
name: 'Roboto',
data: robotoArrayBuffer,
weight: 400,
style: 'normal',
},
],
},
)
'<svg ...><path d="..." fill="black"></path></svg>'
Html + Css -> Png
https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation
import { ImageResponse } from '@vercel/og';
export const config = {
runtime: 'experimental-edge',
};
export default function () {
return new ImageResponse(
(
<div
style=
>
Hello world!
</div>
),
{
width: 1200,
height: 600,
},
);
}