Vercel Satori HTML 转 SVG 图像生成器

要解决的问题

服务端渲染动态分享卡片时，常见的做法是套用 Puppeteer 之类的无头浏览器，把 HTML 截图成图片。这条路代价很高：需要维护一个浏览器运行时，冷启动慢，容器里还得处理一堆系统依赖。Satori 换了个思路——不做浏览器，而是直接把 HTML/CSS 标记解析成 SVG。

它的典型场景是 Open Graph 图片、博客预览缩略图、品牌素材这类结构固定但内容动态的位图替代需求。

这个技能如何工作

核心能力可以拆成三层：

• 标记解析：用一套类 JSX 的 API 描述要渲染的结构，而不是手写 SVG 标签。
• 布局引擎：完整支持 Flexbox 布局，这是 Satori 与简单模板拼接方案的关键差异。
• 字体渲染：文字必须通过指定的字体渲染，字体数据以 ArrayBuffer 形式传入。

关键步骤大致是：准备字体数据（从 fs 读取或 fetch 获取，转成 Buffer/ArrayBuffer）→ 用 JSX 描述布局 → 调用渲染接口 → 拿到 SVG 字符串。

运行时方面，Satori 可以直接跑在浏览器、Node.js（>= 16）和 Web Workers 中。底层 WASM 依赖被打包成 base64 字符串，在运行时加载，所以不需要额外的本地编译步骤。

适用边界与注意点

这是最需要提前想清楚的部分：

• 字体是硬性要求。只要画面中出现文字，就必须显式指定字体并传入字体数据。不传字体就无法渲染文本。
• 格式限制：目前只支持 TTF、OTF、WOFF 三种字体格式，WOFF2 暂不支持。如果你的字体库以 WOFF2 为主，需要提前转换。
• CSS 子集：并非所有 CSS 特性都被考虑，例如 cursor 属性不在渲染范围内。
• 资源加载：不支持通过标签引用外部资源，也不会去抓取网络图片，所有素材需要内联或提前处理。

换句话说，Satori 适合布局可控、内容可控的生成式图片场景。如果你需要完整的 CSS 支持、外部资源加载或复杂的客户端交互，它不是合适的选择。