ハクソク

世界を動かす技術を、日本語で。

SVGを使ってGitHubのREADME.mdファイルに「GIF」を作成できることを知っていましたか？

321日前原文(koaning.io)

概要

SVGアニメーションを使った高解像度・軽量な動画像の活用方法を解説。 GitHubのREADME.mdで動くSVGを表示可能。 asciinemaとsvg-term-cliの組み合わせによる実装手順。 SVGのアニメーション機能の基本説明。 bespokenプロジェクトでの実用例紹介。

READMEで動くSVGアニメーションの活用

  • 49Kbと非常に軽量 な高解像度の動画像利用
  • GIFに似ているが、SVGアニメーション を使用
  • GitHubのREADME.md で直接動作するメリット
  • asciinema と svg-term-cli を用いたワークフロー
    • asciinemaでターミナル操作を録画
    • svg-term-cliでSVGアニメーションを生成
    • 生成したSVGファイルをREADME.mdへドラッグ&ドロップで挿入
  • bespokenプロジェクト での活用実績

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

  • SVG仕様にアニメーション機能 が標準搭載
  • 代表的なアニメーション要素
    • <animate> ：個別属性の時間的変化
    • <animateTransform> ：回転・拡大縮小・移動などの変形
    • <animateMotion> ：パスに沿った移動
  • svg-term-cli はこれらのSVGアニメーション機能を活用
  • 高解像度・軽量・柔軟な表現 が可能
  • 画像と違いテキストベースのため編集や拡大縮小が容易

まとめと応用例

  • README.mdでのデモやチュートリアル に最適
  • 容量制限のあるリポジトリでも利用しやすい
  • SVGの知識があればカスタマイズも簡単
  • asciinemaとsvg-term-cliの組み合わせ による新しい表現手法
  • bespokenなどのプロジェクトで積極的に活用中

Hackerたちの意見

「SVGは元々アニメーションができる」って初めて知った！これからバスの中で、その可能性について考えちゃうな。無限ループに対応してるの？

└

無限ループに対応してるの？ うん、対応してるよ。https://www.w3schools.com/graphics/svg_animation.asp - いくつかの例があるから、ページをスクロールしながら見てみて。リフレッシュしないと、繰り返さないやつは動いてるのが見れないかも。

└

そうだよ。https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...

└

無限ループに対応してる？うん、タグのrepeatCountかrepeatDur属性を「indefinite」に設定すればいいよ。特に、タグは個々の属性に影響を与えるから、画像全体じゃなくて、画像の異なる部分がそれぞれ別のアニメーションサイクルにあっても大丈夫なんだ。

└

SVGはEcmascript（他の国ではJavaScriptとして知られている）を埋め込んでるんだよね。だから、属性からのアニメーションサポートだけじゃなくて、スクリプトから必要なものを何でも追加できるんだ。

ターゲットがGitHubのreadmeなら、動画を直接埋め込むことができるよ。例えば、https://github.com/paulirish/git-recent#readme それにしても、OPのSVGテクニックは、ターミナルキャプチャの内容には賢い選択かもね。

└

もしそのまま動画を追加する方向で行くなら（悪くないけど！）、GitHub上でreadmeを直接編集するのがいいよ。そうすれば、githubusercontentにアップロードされて、リポジトリのスペースを取らないからね。

└

動画のいいところは、再生/一時停止/スライダーのUIだよね。一部のプラットフォームでは、GIFに再生/一時停止を明示的に追加してるけど、私が知る限り（君の方が詳しいだろうけど）、まだブラウザには組み込まれてないんだ。それが、私が動画を使うことが多い理由の一つだよ。自分がRevealJSのプレゼンテーション用にSVGをアニメーションさせたときは、JSで制御できるCSSアニメーションを使うことが多いかな。

「Githubがこれをサポートしている」ってどういう意味？サポートするのはブラウザじゃないの？

└

GitHubはreadmeに含まれるHTMLのサニタイズを（すべき）やってるかもしれないから、SVGがサポートしてる厄介なものを取り除くこともできるはずだよ。

SVGを使うと、すごいことがたくさんできるよ。Wikipediaからのいくつかの例（JSなし） https://upload.wikimedia.org/wikipedia/commons/9/9b/SMIL_mis... ミサイルコマンドのクローン https://upload.wikimedia.org/wikipedia/commons/1/13/London_U... 地下鉄の地図 https://upload.wikimedia.org/wikipedia/commons/4/49/Rolling_... ローリングシャッターアニメーション

└

私はこれが好きだな。https://upload.wikimedia.org/wikipedia/commons/1/13/London_U.... 車椅子ユーザーのための段差のないエリアを示してるんだ。私にはすごく役立ってるよ。最初のリンクについては、すぐに弾頭をプログラムでクリックする方法を考えなきゃいけなかった。世界を救った！ :D

└

SVGはShockwave/Flash Playerのオープンな競争相手として始まったし、PDA用のアプリケーションフォーマットでもあったんだ。ネットワークサポートが一度だけあったこともあるよ。

└

チューブマップのチェックボックス機能はすごいね。SVGのスキルを上げなきゃ。ブックマークしたよ！

アニメーションからテキストをそのままコピーできるのは、ちょっと直感的じゃないけど、それがこの機能の一番面白いところだね！

└

マウスオーバーでアニメーションが一時停止するのは面白いね。ターミナルがスクロールしてるときにコピー＆ペーストが便利になるのはかなりの挑戦だよ。

└

まさにSFだね。

これはクールだね。READMEに書いてあるようなエフェクトがどう扱われるか見てみないと。https://github.com/ChrisBuilds/terminaltexteffects SVGについてはあまり詳しくないけど、テキストを実際に保存しようとすると、かなりのデータ量が必要になるだろうね。楽しみで試してみるよ。

なんか変な理由で、SVGのアーキテクチャ図をアニメのバトルスタイルでノードをドラマチックに見せる映画に変換したくなってきた。ズームインとか、フリーズフレーム、脈打つラインとか、そういう感じで。

注意してほしいことがあるんだけど、ページをフリーズさせるSVGがあるから、サードパーティのSVGにはリンクしない方がいいよ。これは知られているバグなんだけど、Google ChromeとMozillaのチームは修正したくないみたい。デモ用の悪質なSVGの例があるから、これをクリックしない方がいいよ！ブラウザがクラッシュするリスクがあるからね！ https://asdf10.com/danger.svg

└

一つのページやブラウザ全体がクラッシュするのは、実際にはセキュリティの問題じゃないんだよね。実際、組み込み機能を使って、タブやブラウザのUIをフリーズさせる方法はたくさんあるし、やりすぎるとそうなるよ。（例えば、長いブラーのフィルターのチェーンを使うと、ChromeのUIが反応しなくなるから、レンダリング時間が急上昇するんだ。）ただ、影響範囲がタブを超えると、その問題は優先度が高くなるけどね。ユーザーにとっては迷惑だから。

SVGが大好きなんだ。いつかブラウザの標準ができてほしいな。* プラグイン可能な実行エンジン/メモリモデル（WASM、JVM、CLRなど） * SVG出力（バイナリまたはテキスト） そこから、開発者は「ページ」を表示するために好きなモデルを選べるようになるといいな。もうDocument Object Modelに制限されることはないから。

興味がある人のために、俺のアニメーション付きGitHubのREADMEを紹介するよ！ https://github.com/edwinm