SVGなのにGIFみたい！驚きの表現力
引用元：https://news.ycombinator.com/item?id=44498133
SVGってJSなしでも色々すごいことできるんだね！Wikipediaにある例だと、ミサイルコマンドとか地下鉄マップ、ローリングシャッターアニメとかがあるよ。
https://upload.wikimedia.org/wikipedia/commons/9/9b/SMIL_missile_command_clone.svg
https://upload.wikimedia.org/wikipedia/commons/1/13/London_Underground_Diagram_2012_SMIL.svg
https://upload.wikimedia.org/wikipedia/commons/4/49/Rolling_shutter_animation_with_SVG_and_SMIL.svg
SVGって元々Shockwave/Flash Playerに対抗して出てきたみたい。PDAのアプリ形式でもあったんだって。ネットワーキングサポートも検討されたらしいよ。
SWF形式を置き換えるものが出てこないのは残念だね。ゲームとか動画とか、色々詰め込めてすごかったのに。SWFは素晴らしい形式だったと思うよ。
そうそう、昔はロスレス品質の音楽ビデオが数MBでダウンロードできたのにね。AdobeがFlashを何でもかんでもに使わせたりせず、ウェブ標準がもっと早く進んでたら、Flashってもっと良いイメージだったかもね。
「ネットワーキングサポートが検討された」ってコメントあったけど、SVGはJavaScriptをフルで使えるからネットワーキングもできるよ。ブラウザの＼＜img＞タグだと一部機能制限あるけど、iframeなら全部使えるんだ。
SVGにネットワーキングサポートがつかなくて本当に良かった！ついてたら絶対広告業界がヤバい押し付け広告を大量に生み出してたと思うとゾッとするね。
あの地下鉄マップのチェックボックス機能、超すごいじゃん。もっとSVGのこと勉強しないとな。これはブックマークだね！
“HDミュージックビデオ”ってどういう意味？もし普通の動画のことなら、今のビデオ・オーディオコーデックの方がFlashより効率いいよ。もし小さかったなら品質が低かったはず。Flashのベクターアニメなら話は別だけど、それは普通のMVじゃないでしょ。
みんなFlashゲームは大好きだったけど、サイトごとに違うし、ロード長いし、ちょっと不安定なカスタムメニューは嫌いだったんだよね。
どういう意味？音や動画入りのロスレスアニメのこと？これは570kでwebassemblyで動く例→https://archive.org/details/flash_badger
SVGでも同じことできるよ。ちょこっとJavaScriptとaudioタグでね→http://xn–dahlstrm-t4a.net/svg/audio/html5-audio-in-svg.svg
私はこれ好きだな→https://upload.wikimedia.org/wikipedia/commons/1/13/London_U…
車椅子の人が段差なしで行けるとこ表示してて、私には結構便利なんだ。
最初のリンクの話だけど、速攻で核弾頭をプログラムでクリックする方法考えたよ。世界救ったぜ！:D
凡例の路線名をクリックしてみて。すっごくよくできた地図だよ。
正直、それは今だってできるよ。Flashの本当のすごさは統合開発環境だったんだ。
僕の初めてのプログラミング経験の一つで、Flash MXと本一冊でヤバいものが作れたもんだよ。
上のコメントは、SVG 1.2（出なかったけど）の生ネットワークソケットを開くAPIの提案のことだと思う→https://www.w3.org/TR/2004/WD-SVG12-20040510/#rawsocket
これ、セキュリティやばいって言われてたけど、結局どう解決するか決まらず実装されなかったんだ。
Hixieがこれについて面白いこと言ってた気がするけど見つからないや。
AdobeはFlashをもっと真剣に扱うべきだった。なのに放置してクラッシュやセキュリティ問題の代名詞にして、開発者から搾り取ったんだ。
一度Flash買って、クラッシュバグ見つけて報告したけど、一年後に修正されたか確認するのに800ドル払えだって。二度と金なんかやらねーよ。
iPhone前は9割超えの普及率だったのに、それを無駄にしたAdobeは、Flashを大事にしてたみんなにとって本当に恥さらしだ。
HIGsなんてなかった時代ね…
Penny ArcadeのFlashの漫画はこちら→https://www.penny-arcade.com/comic/1999/03/03/macromedia-fla…
うん、ベクターのことだよ。まあ、あの数値出すにはちょっとズルしてるけどね ;）
昔、初めてプログラミングしたのがDreamweaverだったんだ。
もしFlashだったら今頃どうなってたかなってたまに考えるよ。
最近はみんな回線速度が速いから、動画も高画質になったんだよ。
H.264みたいな新しいコーデックを使えば、数MBでも結構キレイに見えるんだ。
Flash Playerがめちゃくちゃ小さかったのはマジすごかったよね。
56Kでもすぐ落ちてきて、IEなら一瞬で入ったんだ。
今思うとセキュリティ甘かったけど、Macromediaの技術力はすごい。
Javaアプレットより普及したのはその手軽さのおかげ。
Steve Jobsがぶっ壊すまではね。
まあ、今はやってないって言ってるわけじゃないけど、一つリスクが減ったのは嬉しいね。
badger.swfとかIOSYSの動画のことね。
ああいうのはSVGでもJS使えば技術的にはできるよ。
でも、Flashみたいに簡単に作れるツールはSVGにはまだ無いと思う。
Inkscapeとテキストエディタじゃちょっと違うし。
機能的にはSWFとかFlashと似たようなことできるよ。
アニメーションもできるし（記事見てみて）、JavaScriptでインタラクティブにもできるんだ。
Steve JobsがHTML5とかCSS3がオープンだって言ってた頃ね。
AdobeはFlashもPDFみたいにオープンにしてれば生き残れたかも。
誰でもツール作れて、Playerもいろいろあって。
今でもAcrobat Proでお金取れてるの見ると、オープンにするのもビジネスとしてアリなんだよね。
あと、それはOracle Corporationの登録商標だから気をつけな。
芝刈り機にやられるぞ。（これはJavaのことかな？）
普通の動画コーデックでもアニメーション圧縮するのは得意だよ。
前に数分のアニメ作ったら、H.264で数百KBになったもん。
俺のREADMEには毎日更新されるアニメーションSVGがあってさ、天気とか曜日を表示してるんだ。数年前の陪審員義務の時に作ったんだぜP https://github.com/jasonlong
これ、めっちゃクールじゃん！
見た目、すごい良いね！
GitHubのREADMEなら動画を直接埋め込めるよ。例えばここ→https://github.com/paulirish/git-recent#readme
でも、投稿者のSVG技はターミナル画面のキャプチャには賢い選択かもね。
もっとコメントを表示（1）
動画の良いとこは再生/一時停止とかのUIがあることだよね。GIFにJSでUI付けるサイトもあるけど、ブラウザに最初から付いてるわけじゃない。だから俺は動画を使うことが多いかな。
RevealJSでSVGアニメーション作った時は、CSSアニメーションでJSで制御できるようにしたよ。
アニメーションGIFってのは、動画の一種なんだけど、制限が多くて圧縮率も悪いんだ。だからサイト側でアニメーションGIFを動画に変換することが多いよ。そうすると結果的にサイズが小さくなるし、上手く動くんだ。
もしこのSVGアニメーションが流行ったらさ、きっとブラウザも対応してきて、5〜10年後には一時停止ボタンとかできるようになるんじゃない！？楽しみだね！
（コメント5で出てた）動画をREADMEに直で載せるって方法を選ぶならさ、GitHubで直接編集するのが良いよ。そうすれば、リポジトリの容量を使わずにgithubusercontentとかいうところにアップロードされるからね。
みんな、もう一つの選択肢（動画）やってたの？PRでリポジトリに動画をコミットするなんておかしいでしょ。PRごとに新しい動画がコードベースに追加されるの？たまに整理するためにPR出すの？って思ったよ。
”Every PR adds a new video to the codebase”
Gitは前のコミットとの差分だけをコミットするんだよ、リポジトリ全体じゃない。だから、動画が変わらなければ一度しかコミットされないんだよ。
SVGはカラー設定（ユーザーのダーク／ライト設定）に合わせて色を変えたり、サイズ設定（最大幅やアスペクト比）に合わせてサイズを変えたりできるんだ。でも動画はできないんだよね。
https://jsbin.com/nohamuguze/edit?html,css,output
追記：あーあ…FirefoxとChromeでは動くけど、Safariだと問題あるな。もっといじればどこでも動くようにできると思うけど、残念だね。
SVGのトリックは、コントロールがないから画面キャプチャにはあんまり向かない気がするな。ソフトウェアの機能デモを埋め込むのには最適だと思う、5秒以下でね。それでも、動画オプションが役に立つ人もいるかもしれないけどね。
アニメーションからテキストをそのままコピーできるって、すごく直感的じゃないけど、これが一番すごいところだね！
マウスオーバーでアニメーションが一時停止したらすごいことになりそう。ターミナルがスクロールしてると、コピペが役に立つようにするのは結構大変だよね。
同感だよ、再生／停止／進む／戻るサポートが欲しいね。あのGitHubのGIFはいいんだけど、特定のプロジェクトで実行されたコマンドを見る／コピーするために、たまにダウンロードしてフレームごとに開かないといけないのが嫌なんだよね。
注意喚起：ページをフリーズさせることがあるSVGもあるから、サードパーティ製のSVGにはリンクしないようにね。これは既知のバグだけど、Google ChromeチームもMozillaチームも修正したがらないんだ。
これがデモンストレーション用の邪悪な例のSVGだよ。
ブラウザをクラッシュさせるリスクを冒したくないなら、このリンクをクリックしないで！
https://asdf10.com/danger.svg
ページのクラッシュとかブラウザ全体が落ちるだけなら、実はそんなセキュリティ問題じゃないんだよね。だって、たくさんの組み込み機能でも、やりすぎればタブ全体やブラウザのUIをフリーズさせる方法はいくらでもあるんだもん。（例えば、何個もblurフィルターを重ねると、レンダリング時間が爆上がりしてChromeのUIが固まったりね。）
もし影響範囲がタブを飛び越えるなら、ユーザーにとってすごくウザいから、それはもっと優先度が高くなるだろうけど。
えっ、じゃあ（たぶん）これみたいな再帰的なXXE攻撃って、GitHubのREADMEでも可能なの？それとも、彼らがなんとか対策したのかな？
これは再帰的なんだけど、XXEじゃないんだ。これは20層のSVGグループがネストされてて、最初のグループに青い円が10個入ってる。で、それ以降のグループには、その前のグループが10個ずつ入ってるんだ。これでだいたい10の20乗個くらいの青い円を描画しようとするわけ。
SVGはXMLベースなんだよ。HTMLはSGMLっていう仕様だけどね。
悪意のあるページをcurlで引っ張ってきても、こう見えるよ。
＜？xml version=”1.0” encoding=”UTF-8”？＞
＜svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” width=”1000” height=”1000”＞
そうそう、SVGはXMLベースだから、XML外部エンティティ（XXE）とか、指数エンティティ展開攻撃みたいな一般的なXMLベースの脆弱性には弱い可能性があるんだ。でも、今回の悪意のあるSVGは、SVG特有の機能を使ってリソースを使い果たさせようとしてるんだ。
外部エンティティって、完全に無効にできるんじゃないかな？まあ、誰にも分からないけど、GitHubがここでどんな対策をしたかチェックするのは価値があるかもね。
ターミナルの記録からアニメーションSVGを作るツールがあるよ。
asciinema2svg: https://github.com/thenets/asciinema2svg
termsvg: https://github.com/MrMarble/termsvg/
terminal svg: https://hn.algolia.com/?q=terminal+svg/
svg animation: https://hn.algolia.com/?dateRange=all&page=0&prefix=false&qu…
「SVGは本質的にアニメーションできる」ってのは初めて知ったな。バスの中でそれを使って何ができるか考えちゃいそうだよ。無限ループってサポートしてるの？
＞無限ループってサポートしてるの？
うん、してるよ！＜animate＞タグのrepeatCountとかrepeatDur属性を”indefinite”に設定するだけ。
特に、＜animation＞タグは画像全体じゃなくて個別の属性に影響するから、画像の部分ごとに違うアニメーションサイクルを設定できるし、小さい公倍数に合わせる必要もないんだ。
明日のHacker Newsでは、「純粋なSVGでGPT-2を実現！」って記事が見られるかもね、って冗談だよ。
そうだよ、SVGにはアニメーション要素があるんだ。具体例を載せておくね。
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E…
SVGはEcmascript（みんながJavaScriptって呼んでるやつ）を埋め込めるんだよ。
https://www.w3.org/TR/SVG11/script.html
だから属性でのアニメーションに加えて、スクリプトで必要なものは何でも実装できるんだ。
無限ループをサポートしてるかって？うん、してるよ。
https://www.w3schools.com/graphics/svg_animation.asp
ここにいくつか例があるけど、ページをスクロールして見る場合は、リフレッシュしないと（繰り返さないやつは）動きが見えないかもしれないね。
こういうちょっとしたTIL記事、つまり新しいツールを紹介して体験談を共有してくれるのが好きなんだ。制限（GitHub Markdownでのアニメーションとか）を回避しようとするのが、こういうクリエイティブな発想につながるんだよね。
結果のSVG https://koaning.io/posts/svg-gifs/parrot.svg を見たら、インラインSVGの中にさらにインラインSVGが使われててびっくりしたよ。初めて見たな。共有してくれて本当にありがとう！
じゃあQuine（自分のソースコードを表示するプログラム）も作れるかもね。テキストエディタにソースコードが打ち込まれていくアニメーションSVGとか。
SVGが大好きすぎる。いつかブラウザ標準がこうならないかなって願ってるんだ。
＊プラグ可能な実行エンジン/メモリモデル（WASM, JVM, CLRとか）
＊SVG出力（バイナリでもテキストでも）
そうすれば開発者はページを表示するのに好きなモデルを選べるようになって、Document Object Modelに縛られなくなるんだ。
昔はFlash, Java, Silverlight, ActiveXとかがWebを支配してたよね。
共通言語とプラットフォームがある今の世界の方が断然良くなったと思うな。今日の脅威環境だと、ああいう大きなサードパーティのランタイムはブラウザ内では生き残れなかっただろうし。
残念ながら、「共通」ってのはGoogleが望むものになるってことでしょ。Googleは市場での地位を悪用して何でも推し進めてくるし（HTMLクライアントでの広告サポートとか、何考えてるんだか）。
もっとコメントを表示（2）
「開発者はDOMに縛られず、好きなモデルでページを表示できる」って言ってたけど、AutoCAD Web, Photopea, Figma, Google Docs, Google Earth Webとか、Flutter for Webアプリ（CanvasKit）って、あなたが求めてることとどう違うの？私が見る限り、DOMが最適な選択肢じゃないアプリケーションで、開発者がDOMを使うのを強制されてるわけじゃないと思うんだけど。
DOM（HTML）は色んな画面サイズにレスポンシブ対応しやすいように設計されてるのが強みだけど、SVGはそうじゃないんだよね。
なんか病的な理由で、SVGのアーキテクチャ図を、アニメのバトルみたいにドラマチックにノードが現れて、ズームとかフリーズフレーム、線が点滅するような動画にめっちゃ変換したくなったわ。
へぇ、これいいね。俺のREADME、https://github.com/ChrisBuilds/terminaltexteffects
で紹介してるようなエフェクトがどう動くか見てみなきゃ。SVGはあんま詳しくないけど、テキストをそのまま持とうとするとデータ量がヤバくなりそうね。まあ、面白そうだし試してみるか。
興味ある人はこれどうぞ。俺のアニメーション付きGitHub READMEだよ。
https://github.com/edwinm
俺はRiveとかLottieが普通になるずっと前からSVGアニメーション（https://www.svgator.com/みたいなサイトも）使ってたんだよね。SVGアニメーションはマジ最高だよ。
SVGが出来るヤバいことに興味あるなら、Sarah Drasnerのトークは絶対見なきゃダメだよ。https://www.youtube.com/watch?v=4laPOtTRteI
ここで言う”GitHubがこれをサポートしてる”って、どういう意味？サポートするのはブラウザの方じゃないの？
GitHubはREADMEに含まれるHTMLをサニタイズ（無害化）すべき（ってかやれよ）だから、SVGがサポートしてるヤバいものを絶対取り除けるはずだよ。
でも、それって単なるSVGファイルへの画像リンクなだけじゃん。HTMLは含まれてないよ。GitHubがHTMLの＜img src=”…”＞要素として表示するMarkdownの画像リンクなだけ。実際にリンクされてるSVGファイルは、別にGitHubがホストしてるわけでもないしね。
もしリンク先のSVGがGitHubにホストされてるなら、GitHubはブラウザに出す前に好きなように変更できるんだよ。
確か、俺がGitHubのコメントにSVGアップロードしたら、結果の画像はインタラクティブな機能がいくつか削除されてた気がする。まあ、それはコメントでアップロードしたケースで、Gitリポジトリの一部じゃないから状況はちょっと違うけど…それでも、って感じ。
URL先のファイルはいつでも変わる可能性があるから、そんなシステムは自分でファイルを提供してないと無理だよ。URLだけ見て特定の形式のファイルをGitHubがサポートしないなんて心配するのはナンセンスだね。
GitHubって、Markdownファイルを表示する時に外部の画像をキャッシュした自社バージョンに置き換えてなかったっけ？
GitHubは間違いなく画像をミラーリングしてるよ。READMEで見る画像は全部githubusercontent.comから読み込まれてるはず。
面白い話！SVGってコードだから、LLMでも書けちゃうんだよ！Claude Sonnet 4で試したら、7分で希望通りのアニメーションロゴのSVGを作ってくれたんだ。README.mdに埋め込むのもできたよ。
これはコメントしにくいんだけど、Chromium系ブラウザだとSVGアニメーションはGIFとかWAAPIよりCPU使うんだよね。アニメによってはメインスレッドをブロックすることもあるし。
それはよくあることだよ。SVGの各要素は操作可能なプロパティを持つオブジェクトだからね。色々なことには向いてるけど、GIFみたいにピクセルを置くだけとか、HTML canvasみたいに描画コマンドを実行するだけよりリソースを使うんだ。
デモにSVGを使うのは、GIFや動画より軽いから断然いいね。うちはCLIツールのデモを録画・共有するツールを作ったよ→https://github.com/DeepGuide-Ai/dg 。
dg captureって呼ぶだけでSVGとREADMEに貼れる内容を生成してくれるんだ。
CI検証にも使えるのが良いところ。
termsvgを使ってるよ。
コメントもらえると嬉しいな。
これはすごくクールでREADMEにめっちゃ便利だね！
シェアありがとう！
他のどんな応用ができるか気になるなー。
少なくとも全てのCLI/ターミナルツールはこれを使ってアプリを紹介できそうだね。
Gitlabでもサポートされてるっぽいよ！
marinerリポジトリの例→https://gitlab.com/radek-sprta/mariner/blob/master/README.md
すぐにGoogleで探して見つけたリンクだよ。
