GIFのように感じられるSVG

 (koaning.io)
33 ポイント 投稿者 GN⁺ 2025-07-09 | 1件のコメント | WhatsAppで共有
  • 動くSVG画像は、高解像度を保ちながらもファイルサイズが非常に小さい（49KB）
  • 従来のGIFに似た視覚効果を与えるが、実際にはSVGアニメーション機能を活用
  • GitHub README.md ファイルでも直接使える
  • asciinema と svg-term-cli ツールを使ってターミナルセッションを録画し、SVGアニメーションに変換可能
  • SVGのアニメーション要素（<animate>, <animateTransform>, <animateMotion>）を活用

動くSVGの特徴

  • SVGで作られた動く画像は従来のGIFのように見えるが、実際にはSVGのベクターベースのアニメーション機能を使っている
  • この方式はファイルサイズが非常に小さく、画質を損なわずにサイズ変更や拡大・縮小が可能
  • GitHubのREADME.md のような場所にもそのまま活用できるのが大きな利点
  • 例として、49KBサイズの高解像度で動く parrot SVG が紹介されている

作り方

  • asciinema を通じてターミナルセッションを録画する
  • 録画した asciinema ファイルを svg-term-cli ツールで変換し、SVGアニメーションファイルを作成する
  • 生成されたSVGファイルは README.md に簡単に追加できる
  • 筆者は bespoken など複数のプロジェクトでこの方法を積極的に活用している

SVGアニメーションの仕組み

  • SVG仕様にはすでにアニメーション機能が組み込まれている
    • <animate>: 個別の属性を時間に応じてアニメーション化する
    • <animateTransform>: 回転、拡大縮小、移動などの変換アニメーションを適用できる
    • <animateMotion>: パスに沿ってオブジェクトを動かす
  • svg-term-cli は、このようなSVGの組み込みアニメーション機能を活用して動作する

関連記事

1件のコメント

 
GN⁺ 2025-07-09
Hacker News のコメント

  • SVGだけでも本当に多様で印象的なものが作れることに感嘆している。Wikipediaで見つけた例としては、Missile Commandクローンのアニメーション、ロンドン地下鉄路線図、ローリングシャッターアニメーション などが目を引く

    • SVGはもともとShockwave/Flash Playerのオープンな対抗馬であり、PDA向けアプリ形式として始まったという歴史がある。ネットワーク対応の追加も実際に検討されたことがあったとのこと

    • ロンドン地下鉄路線図 がとても印象的なのは、車椅子利用者のような移動に配慮が必要な人向けに「階段なしの駅」の表示があるから。最初のミサイルの例を見てすぐに弾頭をプログラムでクリックする方法を思いつき、世界を救った気分になったという感想も共有

    • 最初のMissile CommandのリンクがSafariでは正しく動かないのが気になる。ボタンのクリックはできるが、弾頭へのクリック反応がない。Firefoxでは照準カーソルまで出るのに、Safariだけ何かが動いていない

    • 路線図のチェックボックス機能はとても素晴らしい。SVGスキルをもっと磨かなければと刺激を受けた。ブックマーク済み

    • 記事タイトルだけ見て、READMEファイルのハッシュを視覚的に見せるツールかと勘違いしたが、そうした可視化機能があればTOSやEULAがこっそり変更されたときにユーザーが簡単に気づけるようになることを期待したい

  • READMEにアニメーションSVGを埋め込み、このSVGが天気と曜日の情報を1日1回更新するようにしたことがあるという開発体験の共有。参照。実際には数年前、陪審員召集の期間中に作ったプロジェクトとのこと

  • ターゲットがGitHub READMEなら、動画を直接埋め込むこともできる。例として git-recent README のリンクを紹介。ただし、単なるターミナルキャプチャなら、OPのSVG方式を使うほうがより賢い選択かもしれないという意見

    • 動画のよい点は、再生/一時停止/スライダーUIがあること。一部のプラットフォームではGIFにもJavaScriptで制御UIを追加しているが、ブラウザの標準機能ではないのが限界。なので動画を好むことが多いという立場。RevealJS向けのSVGアニメーションを作るときは、必要に応じてCSS/JSで操作する

    • 動画ファイルを追加する場合、GitHub上で直接READMEを編集してアップロードしたファイルをgithubusercontentに保存するのは、リポジトリ容量の面でも有利な選択

    • SVGはライト/ダークのユーザー設定に応じて色を変えられる点で動画と異なる。サイズのレスポンシブ対応も可能で、動画にはそれができない。関連デモ を紹介。ただしこの機能もFirefox/Chromeではうまく動く一方で、Safariでは依然として実装が難しい部分があり残念だという声

    • Paulの活動に久しぶりに触れ、以前のEcho NestやRdio APIの仕事への愛着を表明

    • 私見では、ターミナルキャプチャならSVG方式は操作機能が足りず実用性は低い。ソフトウェアのデモ用途として5秒前後の短い動きで説明するにはよいと思うが、状況によっては動画のほうが向いていることもある

  • アニメーションの中からそのままテキストをコピーできる点が、思った以上に直感的ではないが最もクールな特徴に見える

    • アニメーションがマウスオーバーで一時停止できるなら面白さはさらに増す。ただ、ターミナルがスクロールするとコピー/貼り付け機能は有用性が下がるという難しい面もある

  • 注意点として、一部のSVGファイルにはページを停止させるバグがある。そのため、サードパーティ製SVGへのリンク埋め込みは避けるべきだという警告。Google ChromeとFirefoxの両方でこのバグを修正する予定はないとのこと。テスト用の危険なSVG例 も添付されているが、クリックするとブラウザがクラッシュする危険がある

    • ページやブラウザが固まる問題は、セキュリティ問題というよりも、さまざまな組み込み機能の乱用でも起こりうる一般的な現象だという意見。たとえばブラーのフィルターチェーンを長く使うと、レンダリング負荷でChrome自体が固まることがある。もし影響がタブを越えるならさらに問題だが、基本的にはUIの使い勝手の問題と判断

    • こうしたSVG関連の脆弱性（例: XXE攻撃）が、GitHub READMEのような制限された環境でも可能なのか気になる。もし可能なら、どう防いでいるのだろうという疑問

  • 「SVGは本質的にアニメーションである」という事実がとても新鮮で、いろいろなアイデアが浮かんでくる。無限ループに対応しているのか気になる

    • <animate> タグの repeatCount や repeatDur 属性を indefinite に設定すれば無限ループが可能。個々の属性ごとの繰り返しなので、画像内の各要素がそれぞれ異なる周期で動くこともできる

    • SVGアニメーションの公式ドキュメント で確認できるサンプルコードを共有

    • SVGは属性ベースのアニメーションだけでなく、Ecmascript(JavaScript)を埋め込めるので、必要に応じてスクリプトでどんな機能でも実装できる点にも言及。W3Cのスクリプト文書 を参照

    • SVGアニメーションのサンプルコードと例 も共有。一部はページをリロードすると確認できる

  • いつかブラウザ標準として、WASM、JVM、CLRなど任意の実行エンジンを差し込めて、出力がSVG（テキスト/バイナリ）になるシステムを夢見ている。開発者が実行モデルとビューの組み合わせを自由に選べる方向で、DOMに縛られない未来の革新を望んでいる

    • AutoCAD Web、Photopea、Figma、Google Docs、Google Earth Web、Flutter for Web(CanvasKit) のようなアプリは、すでにこうした方式に近く、DOMを迂回したり別のレンダリングエンジンを選んで使っている。つまり、DOMだけが強制される時代ではないという意見

    • 昔はFlash、Java、Silverlight、ActiveXのようなサードパーティ製ランタイムがWebを支配していたが、今は共通の言語/プラットフォーム環境であることが利点だという考え。セキュリティ脅威の大きい環境では、昔のそうした追加技術はもはや生き残りにくい点も強調

    • DOM(HTML)の利点は、さまざまな表示環境に対してレスポンシブに設計されていること。SVGはその自由度が不足しているという違いがある

  • かなり突飛に聞こえるかもしれないが、SVGのアーキテクチャ図をアニメーション化し、ノードがドラマチックな演出（たとえばバトルアニメのような拡大、静止フレーム、光るライン効果など）で動く映像を作ってみたいという欲求が湧いた

  • こういうTILスタイルの投稿は、新しい道具の体験を直接共有し、GitHub Markdownの制約を乗り越える方法まで示してくれるので、創造力の刺激に大きく貢献する。SVGの成果物（例）を見ると、インラインSVGの中にさらにインラインSVGが入れ子になっている構造は初めて見た体験で、新鮮さに感謝したい

    • 理論上は、自分自身のソースコードをエディタに入力している様子をアニメーションするクワインSVGも作れるのでは、というアイデア

  • 本当に素晴らしいアイデアで、READMEで terminaltexteffects の実装した効果とどう対応するか試してみたくなる。SVGにはそれほど詳しくないが、実際のテキストを保存するなら大きなデータファイルになる可能性があることは理解している。それでも遊びとして挑戦してみたい