2022/12/02 に公開 299 views

このエピソードについて

Vercelがリリースした新しいOG画像生成ライブラリ @vercel/og (Satori) の実装について、@potato4dと@spring-rainingが話しました。

@vercel/og について

レイアウトエンジンの詳細

  • @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

Refs