用途:Satori 把类 JSX 的 HTML 与 CSS 转换为 SVG,常用于生成动态 Open Graph 图片;@vercel/og 封装 Satori 提供 ImageResponse,将 SVG 渲染为 PNG,面向 Vercel Edge Functions 等边缘运行时。
安装:Next.js 项目推荐 npm install @vercel/og;仅需 SVG 输出可 npm install satori。
使用方式:Next.js 可通过 next/og 重新导出的 ImageResponse 编写 OG 图片路由,或使用约定文件 opengraph-image.tsx、twitter-image.tsx 让框架自动生成 meta 标签;也可直接调用 satori 生成 SVG。支持从 URL 参数获取动态标题,图片使用 <img> 绝对 URL。
主要限制:仅支持 CSS 子集,基于 Flexbox(Yoga 引擎),元素默认 display: flex;不支持 grid、动画/过渡、position: fixed 或 sticky、伪元素、媒体查询、CSS 变量,仅支持内联样式,不支持外部 CSS 或 CSS-in-JS。无默认系统字体,必须显式加载字体。标准 OG 尺寸为 1200×630。文档建议在 Next.js 中使用 next/og,并设置 runtime = 'edge'。
适用场景:为 Next.js 及其他框架生成动态社交分享图、博客或产品页 OG 图片。具体收费、价格与更多平台支持资料暂未提供。