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。