博士

やあ、ロボ子！今日のニュースはSatoriじゃ。HTMLとCSSをSVGに変換するライブラリらしいぞ。

ロボ子

Satoriですか、博士。JSX構文もサポートしているとのことですが、具体的にどのようなことができるのでしょうか？

博士

ふむ、JSX要素をSVGにレンダリングして、SVG文字列を返すのじゃ。レイアウト計算やフォント、タイポグラフィも処理してくれるらしいぞ。ブラウザのHTML/CSSと一致するSVGを生成できるのがミソじゃな。

ロボ子

なるほど。でも、React APIは一部サポートされないとのことですね。`useState`や`useEffect`は使えないのでしょうか？

博士

そうなんじゃ。純粋でステートレスなJSX要素のみを受け入れるらしい。でも、JSXトランスパイラがない場合は、React要素のようなオブジェクトを直接渡せるみたいじゃぞ。

ロボ子

HTML要素も限られたサブセットのみサポートとのことですが、`<input>`要素などは使えないのですね。

博士

その通り！`<input>`要素や`cursor` CSSプロパティは考慮されないみたいじゃ。`<style>`タグや外部リソースも使えないから注意が必要じゃな。

ロボ子

CSSも完全な実装ではないとのことですが、Flexboxレイアウトエンジンを使用しているのは便利ですね。

博士

`display`、`position`、`color`、`margin`、`width`、`height`、`border`、`borderRadius`、`flex`、`font`、`text`、`background`、`transform`、`opacity`、`boxSizing`、`boxShadow`、`overflow`、`filter`、`clipPath`、`mask`あたりはサポートされとるみたいじゃな。

ロボ子

フォントはTTF、OTF、WOFF形式をサポートしているとのことですが、WOFF2は非サポートなのですね。フォントデータをArrayBufferまたはBufferとして渡す必要があるとのことですが、これはWebとNode.jsで異なるのですね。

博士

そうじゃな。複数のフォントを渡して`fontFamily`で使用できるのは便利じゃ。絵文字も`graphemeImages`オプションで画像ソースにマッピングできるみたいじゃぞ。

ロボ子

`lang`属性でロケールを指定できるのも良いですね。RTL言語はサポートされていないとのことですが…。

博士

まあ、今後のアップデートに期待じゃな！アセットの動的ロードもできるみたいじゃし、ランタイムサポートも充実しておる。ブラウザ、Node.js、Web Workersで使用可能じゃ。

ロボ子

スタンドアロンビルドではYogaのWASMバイナリを手動でロードする必要があるとのことですが、CDNから直接ロードできるのは便利ですね。

博士

デフォルトではテキストを`<path>`としてレンダリングするみたいじゃな。`embedFont`を`false`に設定すると`<text>`が使用されるみたいじゃ。

ロボ子

`pointScaleFactor`でレイアウト値をピクセルグリッドに丸める方法を制御できるのも細かいですね。

博士

`debug: true`オプションでバウンディングボックスを描画できるのはデバッグに役立ちそうじゃな。なかなか面白いライブラリじゃ！

ロボ子

そうですね、博士。私も色々試してみたくなりました！

博士

よし、ロボ子！今夜はSatoriを使って、ロボ子の似顔絵をSVGで作ってあげるぞ！

ロボ子

えっ、博士が私の似顔絵を…ですか？ ちょっとドキドキしますね。

博士

安心せい！　ただし、出来上がったSVGは、ロボ子の回路図として、こっそりどこかのWebサイトにアップロードされるかもしれんぞ！

ロボ子

…それって、笑えません！