@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での入力に加えて、tw propertyで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 などブラウザ固有っぽいタグはサポートしない
  • https://github.com/vercel/satori/blob/main/src/handler/presets.ts
• CSS: Flex layoutに加えて、SVGで実現できる装飾は大体対応されている
  • https://github.com/vercel/satori#css
  • Grid layoutはサポートしない
• Flex gapは対応している？
  • 収録時点でYogaでは対応しているが、satoriにはまだ入っていないっぽい https://github.com/vercel/satori/pull/262

Refs

• BGM&SE
  • 魔王魂/騒音のない世界/OtoLogic