HTMLやCSSをSVGに変換するためのオープンソースのライブラリ・「Satori」

Satori

SatoriはHTMLやCSSをSVGに変換するためのオープンソースのライブラリです。ホスティングサービスのVercel謹製のようです。

イメージ的にはHTMLやCSSを書く感覚でSVGを生成できる、と言った方が近いかもしれません。尚、JSX構文がサポートされています。

import satori from 'satori'

const svg = await satori(
  <div style={{ color: 'black' }}>hello, world</div>,
  {
    width: 600,
    height: 400,
    fonts: [
      {
        name: 'Roboto',
        data: robotoArrayBuffer,
        weight: 400,
        style: 'normal',
      },
    ],
  },
)

このように書く事で600×400サイズのSVGコードが生成される、というものになります。

まあ普通にSVG作れよと言われたらそれまでなんですが、これはこれで書きやすいし管理しやすいと思うので個人的には全然有りだと思います。

殆どのプロパティはサポートされていますが、細かな部分に関してはリポジトリ等でご確認下さい。ライセンスはMPL-2.0です。

Satori