なぜ SVG 形式なのか

console2svg は、端末の画面状態を記録する主たる保存形式として SVG（Scalable Vector Graphics：XML 準拠の 2 次元ベクター画像標準規格）を採用しています。 一般的なスクリーンショットツールが用いる PNG などのラスタ画像（ピクセル集合の画像）や GIF アニメーションと比較して、文字と罫線が中心となるターミナル画面の記録にはベクター形式が最適だからです。

解像度に依存しない鮮明な描画

SVG は画像をピクセルの格子ではなく、文字の位置や線分の座標といった幾何情報として記録します。

Terminal

fastfetch

SVG によるベクター描画

PNG によるラスタ描画

PNG などのラスタ画像では、高解像度の Retina ディスプレイで表示したり画像を拡大したりした際に、文字の輪郭や細い罫線が滲んで不鮮明になります。 一方、SVG は表示サイズに応じてブラウザやビューアが文字の輪郭を都度計算して再描画するため、画面拡大や高解像度ディスプレイ、印刷物であっても常に輪郭のくっきりとした高品質な表示を維持します。

文字情報の集約による極小のファイルサイズ

ターミナル画面の大半は、広範囲な単色背景と離散的な文字列で構成されています。

画面全体の全ピクセル（数万〜数十万ピクセル）を走査して色情報を圧縮するラスタ画像形式に比べ、背景を 1 つの矩形（<rect>）にまとめ、文字列を <text> として保持する SVG は、データ構造の無駄がありません。

• output.png (60,717 bytes)
• output.svg (8,455 bytes)

上図のように、同一の画面内容を記録した場合でも、SVG 形式のファイルサイズは PNG 形式の約 7 分の 1 に収まります。 ドキュメントサイトや Git リポジトリへ大量の画像を配置する場合でも、ストレージ消費やページの読み込み遅延を最小限に抑えられます。

Web 標準環境での高い可搬性

SVG は W3C によって標準化されたオープン規格であり、現代のすべての主要な Web ブラウザがネイティブに表示をサポートしています。

asciinema などの端末録画ツールと異なり、再生用の重厚な JavaScript ランタイムや専用の CSS プレイヤーをページに組み込む必要がありません。 Markdown の標準的な画像記法で記述するだけで、GitHub の README やブログ記事、各種静的サイトジェネレーターに即座に表示されます。

README.md

![ターミナルの実行結果](./output.svg)

テキストの透過性とアクセシビリティ

SVG ファイルの内部には、ターミナル上に表示されていた文字列がプレーンテキストとして保持されています。

ピクセルに焼き固められたラスタ画像とは異なり、SVG はエディタで開いて内容を直接確認したり、grep などのツールでファイル内のテキストを検索したりできます。 また、視覚支援技術（スクリーンリーダー）による読み上げへの対応や、将来的なテキスト選択・コピーの活用など、画像でありながらテキスト本来の可搬性とアクセシビリティを兼ね備えています。