SVGの可能性が無限大！？知っておくと得する活用事例まとめ
引用元：https://news.ycombinator.com/item?id=43666439
8年前の記事だけど、Sarah Drasnerの「SVG Can Do That？」って講演はマジで目からウロコだよ。CSSは当時からめっちゃ進化してるけど（SVGは知らん…）、まじおすすめ。
スライド：https://slides.com/sdrasner/svg-can-do-that
動画：https://youtu.be/ADXX4fmWHbo?si=6YPZkopyEDc8PSte
彼女の本も好きだけど、おすすめされてるツールは今でも使えるか分からん。
どの本のこと言ってるの？
たぶんO’Reillyから出てる「SVG Animations」のことだね。2017年のやつ。フレームワークは結構変わっちゃったけど、基本的な考え方は変わってないと思う。セールで買えるならおすすめ。定価はちょっと高いかな。
本の紹介ありがとー！他にもSVGの本あるよね。
SVG Essentials：https://www.oreilly.com/library/view/svg-essentials-2nd/9781…
SVG Text Layout：https://www.oreilly.com/library/view/svg-text-layout/9781491…
テキストレイアウトだけの本があるってことは、SVGって奥が深いんだなって思った。
目次見ると、GreenSockの宣伝本っぽいね。タイトル詐欺じゃん。SMILは「おすすめしない」って書いてあるみたいだし。
GreenSockは使えるし良いんだけど、ゴリ押ししてくる製品は怪しいと思っちゃう。良いものなら勝手に広まるっしょ。
SVGファイルで面白いことができるよ。DTDで定数を定義して、いろんな場所で使い回せるんだ。David Ellsworthの「Squares in Squares」ってページに良い例があるよ。
https://kingbird.myphotos.cc/packing/squares_in_squares.html
主要なブラウザは問題ないけど、InkscapeとかはDTDを解析できないかも。
エンティティじゃなくて、refでしょ？SVGでshapesとかpathsを定義して、idで参照するやつ。リンク先のページもそうしてるじゃん（個別のSVGをembedで読み込んでる）。SVG作った人はなんでエンティティみたいな仕組みを実装したんだろう？レンダリングのプロパティを上書きできるからかな？
エンティティはパース時に解決されるから、プリプロセッサみたいなもん。
＞それってリンク先のページでも使われてるよね
違う目的で両方使ってるんだよ。例えばhttps://kingbird.myphotos.cc/packing/square-11.svgみたいなファイルには＜use＞要素と＜!ENTITY＞宣言がある。
数値属性には＜use＞は使えないから、CSS変数を使うのが一番近いかな。
＜use＞があるのは、オリジナルの要素と＜use＞で作られたクローンがDOMでリンクされるから。DTDエンティティはテキストとして組み込まれるのと違う。
XML嫌いな人が多いから、内部DTDも嫌われるんじゃないかな。XML標準以外に情報が少ないしね。
ブラウザ開発者は攻撃対象を減らしたいから、DTDとかXMLスタイルシートがまだ動くのが不思議。もし悪用されたらすぐに削除すると思うよ。
何か見落としてるかもだけど、DTDを表す＜!doctype＞や＜!element＞が見当たらないんだけど。単にSVGのdefsとuseの話なら、それはDTDじゃないよ。
全部スタンドアロンファイルにあるよ。例えばhttps://kingbird.myphotos.cc/packing/square-11.svgのソースを見てみて。いろんな長さや角度を表すエンティティが定義されてる。これは＜use＞できないよね。CSS変数なら代替できるけど、librsvgみたいなブラウザ以外のツールじゃ扱いにくいかも。
ああ、ありがとう。Chromeの開発者ツールじゃもう置換されてるから表示されないんだね。
既存のSVGから一部を抜き出して、ページの別の場所でuse（クローン）することもできるよ。
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E…
昔、Wikimedia Commonsでシェルピンスキー・カーペットを定義した時に使ったよ。
https://commons.wikimedia.org/wiki/File:Sierpinski_carpet_6…
当時、ほとんどのSVGレンダラーがロックするかクラッシュしたんだ。
ブラウザでは動くかもしれないけど、多くのSVGツールはDTDを無視するよ。DOS攻撃のリスクがあるからね。例えばBillion laughs attack。
https://en.wikipedia.org/wiki/Billion_laughs_attack
そのページ、2022年のiPhone SEでレンダリングするのに5秒もかかったよ。
Nanda Syahrasyadの「A Deep Dive Into SVG Path Commands」は、SVGパスの構成を理解するのにすごく役立つよ。2年前の記事だけど、SVGでできることとか、その仕組みがよくわかった。
[0] https://www.nan.fyi/svg-paths
SVGで面白いことをするプロジェクトに参加してたよ。Reactで作られてて、アニメーション要素のある静止画があって、色はCMSでコントロールされてた。
フロントエンドはAPIを叩いて、正しい色が割り当てられたSVGイメージを返して、SVG要素の表示・非表示でアニメーションを実現してた。
例：https://web.archive.org/web/20221020133516im_/https://uncrow…
Macromedia Flashがマジで懐かしいなー。Flashみたいに、あんなにインディーズゲームとかアニメが手軽に作れて、しかもFlash Playerだけで見れる技術って他にないじゃん？ 参入障壁がめっちゃ低かったんだよね。 Adobe Animateとしてまだあるよ。HTMLに書き出せるし。 Adobe AnimateはFlashの抜け殻だよ。2Dしかサポートしてないし。昔のFlashは20年も前に3Dに対応してたのに。もうほとんど死んだ製品だね。Flashの魂の一部はAfter Effectsに残ってるけど、あれはビデオ編集ツールだし。 WebAssemblyなら比較できるんじゃない？ 例えば、UnityとかUnrealとかGodotとかって、結構簡単にブラウザ向けにコンパイルできるし。 これって、起業のチャンスじゃね？ Flashみたいなの作り直すの。 複雑なアニメーションSVGは楽しいけど、SMILの細かいところに入り込むと、Safariがfloatの先頭の0がないとかでスマホを破壊してくるみたいな、意味不明なことが起こるんだよね。 スラングだよ。文字通りのレンガ（岩とか石みたいな）を想像して。デバイスが「bricked」って言うのは、何かのせいで使い物にならなくなった状態のこと。 たぶんGPは、GGPがiPhoneをbrickするSVGに出会ったっていうのは（特に悪用目的で作られたペイロードじゃなくて）、並外れた証拠が必要な並外れた主張だって言ってるんだと思うよ。 誇張表現だって解釈することも簡単だよね。 GPの言う通りだったね。君の解釈で間違いないと思ってたけど、これまで色んな事を見てきたから、本当に文鎮化する時の詳細についてもっと詳しく知りたかったんだ。 「bricked」って言葉は、スマホをただの useless brick（役に立たないレンガ）に変えちゃうみたいなイメージで捉えてたな。 JSを使ってクリエイティブにSVGを動的に生成してる人で仕事を探してる人がいたら、DMしてね！ 線の濃淡を表現できるSVGの拡張機能ってないかな？ペンを上げ下げできるプロッタを持ってて、SVGファイルから制御してるんだ。手書きみたいに、線を描いてる途中でペンを下げられたら最高なんだけど。 プレーンなSVGファイルにカスタム命令を仕込んで、リーダーで解釈するのは結構簡単だよ。例えば、レーザーカッターとプロッター両方に使える機械を持ってて、レーザーのパワーにopacity、移動速度にストロークの太さ、パスの回数にgreen channel、Z軸の高さにblue channel、ペンの上げ下げやレーザーのオンオフにred channelを使ってるよ。 それならG-codeを使うのが良いんじゃないかな？ 最近、CSSアニメーションのSVGタイルを使って、ちょっとしたおふざけゲームを作ったんだ：https://pipeline-panic.vercel.app/ いいね。70年代のボードゲームWaterworksを思い出すよ。 ソースコードはこちら：https://github.com/danielstocks/pipeline-panic これ、マジですげーミニゲームじゃん！ソースまで公開してくれてありがとねー。めっちゃ良くできてるわ。 これ、ちょー楽しいミニゲームだね！シェアしてくれてマジ感謝！ いいね！ SVGのtransformsって、最初は「なんでこんなのいるの？」って思ってたけど、自分でアイコンとかロゴ作ってみて納得したわ。曲線ってマジ難しいんだよね。2個目のロゴできた時、なんかペタッとしてる気がして10°傾けたくなったんだ。 SVGって、マジでまだ開拓されてない分野って感じだよね。いろいろできるのにさ。想像力次第だけど、結構「ゴリ押し」しなきゃいけない部分もあるかも。結局はユースケース次第かな。 手軽に作れるフォーマットだけど、凝ったことしようとすると「あー、なるほどね」ってなるよね。 ＞エディタがInkscapeくらいしかない。 InkscapeはSVGをネイティブファイル形式としてる唯一の主要ベクターグラフィックスエディタだよね。他のアプリはSVGのimport/exportができるだけだから、rasterizeされることが多い。SVGatorはアニメーションに特化してるから高いし。webベースならBoxy SVGがいいかも（作ったのは俺だけど）。 面白い使い方としては、 すぐ限界が来る感じだよねー。groupとかlayerがないと管理しづらくなるし、performanceも良くない気がする。 グループとかレイヤーなしってことかな？ 全部SVGとJSでできててHTMLが一切ないサイトを見てみたいな。できるはずだけど、まだ見たことないんだよね。 CSSの配置の限界を回避するためにSVGを使ったことがあるよ（新しいレイアウトが登場する前はね）。CSSの書き方を忘れちゃうんだけど、Inkscapeで絵に文字を加えるのは簡単だったから。 それって本当に可能だってどうやってわかるの？ ブラウザはSVGファイルを表示できるし、SVGファイルは別のSVGファイルにリンクできるよ。サーバーの設定でSVGをデフォルトで提供するようにすればOK。ほとんどのサーバーはそうじゃないけど、設定変更は簡単だよ。 stack overflowの古い投稿で見つけたよ。３ページのテストだけど、ポイントは示してるね。https://svg.nicubunu.ro でもこれにはjavascriptがないね。 そうだね。制約はあると思うけど、SVGはCSSよりもWebデザインのwysiwygって感じがする。 SVG+CSSはすごく強力だよ。ダーク/ライトモードに対応した図をjavascriptなしで作れるのが好き。例えばここの図を見てみて：https://blog.davidv.dev/posts/ipvs-lb/ ＞Unkeyのランディングページがいい例だね。 最新のChrome、MBP i7 2019だけど、マジでめっちゃラグいんだけど。 めっちゃ高性能なM1 Proのラップトップでもラグいってマジか。 Chromeだけど、最初のフルスクロールの後、ページはまあまあだったよ。でも、最初のスクロールはかなりラグかった。ちなみに、こういうのには敏感なんだ。 それってAppleの実装の問題じゃね？ 古い9世代i5のFirefoxでは問題ないけど。 少数派かもしれないけど、SVGよりずっと機能が少ない、同じくらい人気のあるベクター描画フォーマットがあればいいのにって思うんだよね。プロジェクトでベクター描画をサポートしたいとき、SVGをサポートするのが一番簡単な方法だけど…それって実質的にブラウザを持ち込むのと同じことじゃん。最小限の代替案って何？ SVGはHTMLによく似ている気がする。特にアニメーションが絡むとね。最初はすごく良くてシンプルで、ちゃんと仕事をして、基本的なビューア（コンバーターやエディターも）で扱えて、簡単に生成できる。CSSやJSを使えばさらに機能が増えるけど、それも良さそうに見える。でも、シンプルさがなくなり、完全な機能の幅広いサポートや互換性（部分的なサポートや、さまざまな状況での予期しない動作が原因）も失われる。アニメーションが必要な場合はまだ良い選択肢に見えるけど、不必要な場合はSVGでアニメーションを使うのは避けたい。 最高の記事だね。サイトのデザインも最高。 SVGの良いところは、DOMに接続できること、CSSを使えること、canvasよりデバッグが簡単なこと。パフォーマンスだけが、プロットやマッピングのチャート用の宣言的なコードを作るのを妨げている。 どんなパフォーマンスの問題に遭遇した？ 10年前はフィルターを避ければそこそこ良かったけど、それも改善されたよね。 その時は、パスが多いSVGはアプリを遅くすると思ってた。d3とgeojsonをいじってた頃の話。 SVGとCSSアニメーションを一緒に使いたかったんだね。 SVGで作ったもの。 これいいね！SVGって過小評価されてると思うんだよね。特にdiffusionベースの画像生成の時代には。 すごいねー。影響されちゃった。もっと勉強しなきゃ！SVGアニメーションに興味があったら、Adobe Illustratorからアニメーションを作るプログラムを書いたから見てみて。 昔、JavaScriptでSVGを使ってテトリスを作ったことがあるんだ。グラフィックもきれいで、アニメーションもスムーズだった。他にSVGを使ってる人を知らなかったんだよね。 Avaraを思い出すね。あれもMacDrawをレベルエディタとして使ってたんだ。めっちゃクール！ 知られていない機能をうまく使うことで、境界線を押し広げたり、壊したりできるのを見るのは面白いね。とは言え、今はCSSの方がいいかもしれないけど。 SVGってCSSでアニメーションできるんだね。へー！ バックエンドにいた時にブックマークしてた動画。 canvasを使った方がパフォーマンスはいいけど、SVGでやるのも面白いかもね。 SVGってa11yしやすいんだよね。しかも、ariaとの相乗効果でテスト自動化も楽になるってのが見落とされがち。画面読み上げしにくいコードって、E2Eテストとかも正確にやりにくいもんね。 最近は全然やってないけど、SVGマジで好き。2017年に蓄電池の会社で面白いプロジェクトやったんだよね。バッテリーの状態とかをグラフでレポートするやつ。Sql Serverの.Net拡張機能使って、データベースからグラフィック生成してたんだ。もっとコメントを表示（1）
今のSVGは、Flashで出来たこと全部できるポテンシャル秘めてるのに、Flashみたいなエディタもないし、ActionScriptみたいなシーン/オブジェクトベースのコーディングもできない。しかもブラウザごとに癖があるから、簡単なSVGしかどこでも表示されないんだよねー。
それに、SVGとFlashを比べるのは、リンゴとミカンを比べるようなもんじゃない？ SVGはFlashの全部をやる必要はなくて、ブラウザの他の技術に頼ればいいんだから。
ただ問題は、どれも結構容量が大きくて、数十MBとかになるんだよね。普通は数MBなのに。
特に、他のブラウザでは問題ないのに、Safariだとタブがクラッシュするようなことをうっかりやっちゃうのがどれだけ簡単か知ってれば。
実際にデバイスがbrickするわけじゃないけど、ブラウザが結構ハードに落ちる。
あー、Evil Mad Scientist LabsのAxidrawだよ。素晴らしいデバイスだし、人も最高。
こんなのを作ってるよ：https://github.com/WillAdams/gcodepreview
https://boardgamegeek.com/boardgame/333/waterworksもっとコメントを表示（2）
全部書き直すとかありえないからrotationにしたらマジ最高だった。しかもtestの横に置くと変だったから、カーニングがうまくいくまで何度も角度変えちゃった。
使われない理由はね…
・複雑な図形はブラウザによって表示が違う
・レンダラーによって実装範囲が違うから、安全な部分がどこかわからない
・複雑な図形は表示が遅い
・エディタがInkscapeくらいしかない。しかもInkscapeの挙動がChromeとかFirefoxと違うんだよね。例えばInkscapeで線に矢印つけてもFirefoxで表示されないとか。
制限も多いし。SVGの中にSVGを埋め込むのは一段までしかできないし。webでinlineで書くかlinkで書くかで挙動違うし。
オープンソースのベクターエディタって意味？SVGの編集機能があるツールなら、Adobe IllustratorとかSketchとかAffinity Photo/Designerとか色々あるじゃん。webアプリもあるし（SVGatorとか）。Inkscapeは、Affinityみたいに独自のXML名前空間を追加するけど、矢印はmarker要素を使うと思うよ。
SVGって柔軟性高いけど、ブラウザ間の挙動の違いとかバグとかで、表示を揃えるのが大変になるよね。でも、マジで好きなフォーマット。
・toolpath情報を追加してFlashをComputer Aided Manufacturingツールのエンジンとして使う。
https://github.com/Jack000/PartKAM
・（Edward R. Fordとのプロジェクト）部品リストにハイパーリンクを追加してassembly diagramで部品をハイライトする。
https://github.com/shapeoko/Docs
— もう動かないみたいだけど。<g>とは違うってこと？
そのページ、めっちゃ高性能なM1 Proのラップトップでもラグくて気持ち悪くなるし、ロードも遅い。ただの派手な線のためだけに？開発者としては中身を重視した製品を選ぶな。見た目も大事だけど、これはトレードオフがうまくできてないと思うな。
AppleのMシリーズチップって、そんなにパワフルじゃないけど、電力効率は良いんだよね。もっと速いラップトップはたくさんあるけど、電力消費が激しいんだよね。俺のAMDのラップトップはM1 Proよりずっと性能良いけど、電気めっちゃ食うし。Unkeyのウェブサイトを見るのに問題なかったよ。Safari使ってるなら、それが問題かも。Safariマジでクソだし。もっとコメントを表示（3）
＞AppleのMシリーズチップは、そんなにパワフルじゃないけど、電力効率はとても良い。
＞シングルスレッドの性能に関しては、両方ともそうなんだよね。特にIPCはすごい。例えばhttps://github.com/Voultapher/sort-research-rs/blob/main/wri…を見てみて。
＞同じinstructions per cycle (IPC)で、命令からサイクルへのマッピングが同じだと仮定すると、Zen 3はクロック周波数によってFirestormより約1.53倍速いはずだ。しかし、Zen 3と同じ年にリリースされたマイクロアーキテクチャは、分岐予測の誤りの影響が最小限に抑えられた場合、絶対的なスループットの点でZen 3を上回ることから、ほぼそれに匹敵するまでになっている。
最新世代のPコアは、STパフォーマンスにおいて単純に比類なき性能を発揮している。M4コアはGeekbench STで4kポイントを達成できるが、AMDの最高のデスクトップ製品は、はるかに高いクロック周波数で約3.5kポイントを達成する。ウェブブラウジングではSTパフォーマンスが重要なんだ。
SVGがこれほど長い間存在しているのに、その潜在能力はまだ十分に引き出されていないように感じる。機能的なHTML、CSS、JS（基本的にまったく異なるHTMLドキュメント）をこんなに簡単にカプセル化できる要素は他に思いつかない。
Sun Clock: https://sunclock.net
Degrees What?: https://degreeswhat.com
https://rorads.github.io/technical/quick-ai-reflection-on-sv… で軽く書いたよ。
https://svija.com/en/animation
SteamでPro Office Calculatorっていうゲームも作ったんだけど、Doomみたいな3Dエンジンが入っててInkscapeをマップエディタとして使ったんだ。マップの例はここにあるよ。
https://github.com/robjinman/pro_office_calc/blob/develop/da…
SVGでインジェクション攻撃ができるってペンテスターが見つけたんだよね。クライアントがSVGを使いたいって言い出した頃だったから対応したよ。
AsteroidsみたいなベクターグラフィックスのゲームをSVGとアニメーションで再現した人っているのかな？JSで小惑星の形とか方向を変える必要はあるけど。
https://youtube.com/watch?v=wc8ovZZ78SY
The Secret of Kellsを子供に見せた直後にこれを見つけて、過度に華やかなウェブサイトについての恐ろしいアイデアを思いついたんだよね。ほとんど思いとどまったけど。
