2022/12/02 に公開1086 views
Vercelがリリースした新しいOG画像生成ライブラリ @vercel/og (Satori) の実装について、@potato4dと@spring-rainingが話しました。
@vercel/og について
- https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images
- @vercel/ogでのSVG生成を試せるサイト https://og-playground.vercel.app/
- 元々 @vercel/og-image というライブラリがあったが、Serverless Chromeを使うことに起因する問題を解消するため、別のアプローチで生成するようにした
- どうやって？ → HTML と CSS (のサブセット) からブラウザを介さずに SVG に変換するレイアウトエンジンを実装した
- JSXでの入力に加えて、
twpropertyでTailwind風のスタイル指定ができることも特長
レイアウトエンジンの詳細
- @vercel/og の実体は @vercel/satori で実装されている
- yoga
- react-nativeなどで使われている、クロスプラットフォームのレイアウトエンジン
- CSS Flex layoutにインスパイアされた設計
- C++で書かれているライブラリをemccでWASMに変換して使用している
- opentype.js
- OpenTypeを読み込むライブラリ
- SVG自体はフォントデータを持たないため、テキストをSVGに埋め込む必要がある
- resvg-js
- Rustで書かれたSVGレンダリングライブラリresvgをWASMで提供
- ラスター画像 (PNG) を生成するために使われる
サポートするHTML/CSS
- HTML: input, table などブラウザ固有っぽいタグはサポートしない
- CSS: Flex layoutに加えて、SVGで実現できる装飾は大体対応されている
- https://github.com/vercel/satori#css
- Grid layoutはサポートしない
- Flex gapは対応している？
- 収録時点でYogaでは対応しているが、satoriにはまだ入っていないっぽい https://github.com/vercel/satori/pull/262