SVGさえあれば十分

 (jon.recoil.org)
2 ポイント 投稿者 GN⁺ 2025-12-13 | 1件のコメント | WhatsAppで共有
  • SVG はシンプルな XML ベースのベクターグラフィック形式で、ほぼすべてのプラットフォームでサポートされており、スクリプトを埋め込んでインタラクティブな可視化を実現できる
  • 過去の 菌糸ネットワーク研究 で作られた SVG 可視化ツールが、20年を経た現在でも最新ブラウザで完全に動作することから、形式の耐久性 が実証されている
  • 1つの 自己完結型 SVG ファイル だけで、データの読み込み、処理、可視化、インタラクションをすべてクライアント側で実行できる
  • Anil の「4つのP」(Permanence, Provenance, Permission, Placement) の考え方との関連の中で、SVG の永続性、バージョン管理との互換性、権限分離、空間表現力が強調されている
  • 現代ブラウザの計算能力向上により、データ分析パイプライン全体を SVG 内で実装できる可能性 が開かれ、研究共有と再現性を高めるツールとして重要になっている

SVG の潜在力と科学出版の理想

  • SVG はシンプルな XML 形式のベクターグラフィックで、あらゆるデバイスで鮮明に表示され、スクリプトを埋め込んでインタラクティブなコンテンツ を作成できる
    • 多くのユーザーが気づいていない 強力な機能 を備えており、これをもっと積極的に活用できる
  • 科学論文 が、データ探索と実験の再現を支援する 完全なインタラクティブ環境 を提供すべきだという理想を提示
    • 一部の実験はコストや時間の制約から即座の再現が難しいが、コンピューターサイエンス分野の論文 では十分に実現可能

20年前の SVG 可視化ツールの再発見

  • ケンブリッジ大学植物科学部での博士研究員時代、菌糸ネットワークの相乗研究 のために SVG ベースの可視化ツールを制作
    • 実際のシャーレ内で成長した菌糸ネットワークのデータを探索できるよう設計された
  • 最近この SVG を再び実行してみたところ、Firefox 1.5 や Adobe SVG プラグインを要求していた時代のコードが、最新ブラウザでも完全に動作 した
    • これは SVG 形式の 長期的な互換性と安定性 を示す事例

完全自己完結型 SVG の構造

  • 1つの SVG ファイル だけで、データの読み込み、処理、可視化、インタラクションをすべて実行できる
    • データは外部のバージョン保存領域から取得することも、ファイル内部に直接含めることも可能
    • すべての演算は クライアント側ブラウザ で実行され、サーバー側ロジックは不要
    • 静的 Web サーバーで簡単に配布・共有できる

Anil の「4つのP」との関係

  • Permanence(永続性) : SVG には論文やデータセットのように DOI を付与可能 であり、20年前に作られたファイルが今も動作することがそれを裏付けている
  • Provenance(来歴追跡) : SVG は テキストベース なので Git などのバージョン管理システムと互換性があり、外部データを使う場合にも同じ追跡戦略を適用できる
  • Permission(権限管理) : データと処理ロジックが分離されているため、通常のデータと同じ 権限モデル を適用できる
  • Placement(空間性) : SVG は 本質的に空間的な表現 を持ち、例として 世界地図の可視化 を作りやすい

ブラウザ計算能力の向上と新たな可能性

  • 20年前に作られた SVG は単純な可視化ツールだったが、現代ブラウザの計算能力向上 により、今では データ分析パイプライン全体 を SVG 内部で実装できる
    • ノートPCのファンが回らない程度の軽い計算でも十分に処理できる

研究共有エコシステムにおける SVG

  • Jupyter ノートブック、Marimo botebooks、slipshow/x-ocaml の組み合わせ、Forester、個人ノートブックプロジェクト などと並んで
    • SVG は 研究成果の容易な共有と再構成を支援するツール として加わる
  • これらのツールは 協業と再現可能な研究環境の構築 に向けた継続的な試みの一部である

関連記事

1件のコメント

 
GN⁺ 2025-12-13
Hacker Newsの意見
  • 可視化の話が主なテーマだが、以前 舞踊の振付ソフトウェア を作ったことがある
    UI全体をSVGでレンダリングしたが、思った以上にうまく動作した
    プロジェクト名は StageKeep で、もともとはReact Three Fiberで作っていたが、SVGへリファクタリングした
    Signed Distance Function の概念に着想を得ており、入力を受け取ってSVGを出力する 原子的関数 というアイデアが気に入っていた
    • 昔、SVGが Flashの代替 として注目されていた時期があった
      SVG + CSS + JavaScriptでFlashでやっていたことのほとんどを実装できたが、Flashのような優れた オーサリングツール がなかった
      結局Flashは消えたが、その座を完全に置き換えたものはない
    • サイト下部に “Start free tiral” と書いてあるが、たぶん “trial” のタイプミスだと思う :)
    • 舞台演出家として振付を扱っているが、こういうツールで 舞台動線 を事前に計画できたら本当にすばらしいと思う
    • 本当にすばらしいプロジェクトだ。もしかして AIで動画から振付を自動抽出 する機能も可能だろうか
      たとえばProject21やAvantgardeyの動画から振付を分析して取り込むような感じ
    • もしかして本人も踊る人なのか気になる
  • SVGの欠点を整理してみた
    • テキストの折り返し不可
    • フォントグリフの埋め込み不可 — ユーザーの環境にそのフォントがなければ読めない
    • ブラウザごとに対応バージョンや機能が異なる
    • JSや外部リソースを含められるため、セキュリティ分離環境 では表示しにくい
      解決策としては、Inkscape用の元SVGと、テキストをアウトライン化した 配布用SVG の2バージョンを用意する方法がある
    • ほかにも問題は多い
      ブラウザごとにレンダリングが異なるため一貫した結果を得にくく、複雑なSVGでは メモリリーク や レンダリング速度低下 が深刻になる
      Inkscape以外ではLinuxで使えるまともなエディタもほとんどない
      それでも代替がないので今もSVGを使っているが、できる限り単純に保つようにしている
    • <foreignObject> でHTMLを埋め込めば テキストの折り返し は可能になる
      SVG 2では inline-size 属性で解決予定だ
      フォント埋め込みは <font> 要素や WOFF をdata URIとして含める方式がすでに存在する
      ただしテキストのベースラインやスケーリング制御のような部分は、いまだに 未完成の仕様 だ
      関連文書: SVG2 InlineSizeProperty, SVG11 Fonts
    • Safariでは <style> 内の @font-face で base64エンコードされたフォント を埋め込める
      ただしファイルサイズが大きくなるので勧めない
    • テキストをアウトライン化すると 選択不可 の問題が生じる
      Safariでは <text> 要素で選択可能なので、どちらにしても完全な解決策ではない
  • 科学論文が インタラクティブな環境 とともに提供され、読者がデータを直接操作して実験を再現できるというビジョンが好きだ
    NVIDIAの Illustrated Evo2ブログ も印象的だった
    • 同僚たちが出した CloudSpecs論文 を思い出す
      すべての図がWebサイトと接続されており、DuckDB + WebR + ggplot でブラウザ内で再現可能だ
      例: Figure 1デモ
    • 実験をブラウザで再実行するのは、たぶん モデリングベース研究 でしか可能ではないだろう
      ただしデータをさまざまな視点で探索できるようにするのは興味深いアイデアだ
    • SVGの代わりに使える適切なフォーマットがない
      PDFはインタラクティブ機能が限られており、WordもPDFも マルチメディア埋め込み に弱い
    • GIFや動画だけでも挿入できれば大きな価値がありそうだ
    • SVGは複雑なレンダリングに時間がかかるため、インタラクティブ性とは相性がよくない
      ベクターグラフィックスだけが必要ならPostScriptも代替になりうる
  • 2年前に “Spurious Correlations” プロジェクトをリニューアルした際、Pythonで直接SVGチャート生成器 を作った
    既存のJS/PHPチャートツール（pCharts、HighChartsなど）が気に入らず自分で実装したが、意外とうまく動いた
    数学だけでクリーンなSVGを作れて、無限の拡張性 はおまけだった
    • JSチャートフレームワークを探しているなら Observable Plot を勧める
      D3の作者が作ったツールで、簡潔で APIの使い勝手 が非常に良い
      アニメーションはないが論文用チャートには十分だ
    • Postscriptがもっと広く使われなかったのは残念だ
      別の世界線ではHTMLやSVGの代わりにPostscriptが標準になっていたかもしれない
    • そのサイトのおかげで、統計の授業初日に 見せかけの相関の例 として活用した
    • 「自分で作ると失敗する」という恐れを業界は捨てるべきだと思う
  • Distillの最初の論文 Augmented RNNs が印象的だった
    SVGの上にD3.jsで最小限のインタラクション を載せた事例で、Shan Carterのスタイルを初めて見て彼のチームに入りたいと思った
  • 15年前に バーベキューコントローラー を作ったが、温度センサー4つとPID制御アルゴリズムを使っていた
    組み込みHTTPサーバーを通じて SVGベースのWeb UI で温度グラフとダイヤルを表示していたが、JSとともにうまく動作した
    • 本当にすばらしいプロジェクトだ。もしかして動作映像を撮っていたりするだろうか
  • 筆者として、今回記事を修正しながら強調したいのは 20年前のSVGが今もなお動くという事実 だ
    当時書いたほかのコードの大半は直す必要があるが、SVGはそのままだ
    • 初期のころはブラウザ間の SVG互換性 が低くて使いにくかったが、
      今では20年前のSVGでもほとんどのブラウザで問題なく動作する
  • SVGは好きだが、速度の問題 は依然としてある
    QRコードや複雑な地図のようにDOM要素が100個を超えると遅くなり、アニメーションもcanvasやLottieより遅い
    • チェス盤SVGの中に チェスエンジンを埋め込み 自動で指すようにしたことがある
      プロジェクトリンク
      友人のアートインスタレーションで数十個のチェスSVGを同時に投影したが、ブラウザが耐えられる限界はかなり低かった
    • 自分も SVG+JSで地図ビューア を作ってゲームに使ったが、オブジェクト密度が高くなると遅すぎて結局canvasに切り替えた
      ただしその過程でSVGの一部機能は失った
  • 3D向けのSVGに似た軽量フォーマット があるのか気になる
    CADモデルを可視化するとき、.stepファイル全体を出力せず 部分的な変更だけを反映 できる方法を探している
  • 以前 Shapeoko v2 CNCの組み立て説明書 を作ったとき、ユーザーが部品をクリックすると 図面内の該当部品が強調表示 されるようSVGを使った
    例のリンク
    Inkscapeで作成し、ブラウザ上でそのまま動作した
    • 本当にすばらしい実装だ