Satori网页转 SVG 库

Satori 是由 Vercel 团队开源的使用 HTML 和 CSS 代码生成 SVG 图像的库，能够将 HTML 和 CSS 转换为 SVG、PNG、PDF 的在线工具，可以用来生成 Open Graph 图片。

Satori 支持 JSX 语法，下面是基本用法的概述：

// api.jsx

import satori from 'satori'



const svg = await satori(

  <div style={{ color: 'black' }}>hello, world</div>,

  {

    width: 600,

    height: 400,

    fonts: [

      {

        name: 'Roboto',

        // Use `fs` (Node.js only) or `fetch` to read the font as Buffer/ArrayBuffer and provide `data` here.

        data: robotoArrayBuffer,

        weight: 400,

        style: 'normal',

      },

    ],

  },

)

Satori 会将元素渲染成 600×400 的 SVG，并返回 SVG 字符串：

'<svg ...><path d="..." fill="black"></path></svg>'

在引擎盖下，它处理布局计算、字体、排版等，以生成与浏览器中完全相同的 HTML 和 CSS 匹配的 SVG。