序章：なぜ今、SVGなのか
――「拡大しても荒れない画像」の話では、もう足りない
SVGの話をすると、だいたい最初に出てくるのがこの定番です。
「拡大しても荒れない」「ロゴに向いてる」「軽い」「Retinaでも綺麗」。
全部、正しい。けれど今あらためてSVGを語る理由は、そこじゃない。
いま起きている反転は、“画質”の問題ではない。
もっと根っこのところで、「画像とは何か」「図とは何か」という前提が揺れている。
そしてその揺れの中心に、なぜか昔からそこに居たSVGが、しれっと立っている。
SVGは新技術ではない
SVGは新顔ではない。
むしろ、古参だ。Webが“文書”として整備され、標準という言葉にまだ夢があった頃から、SVGはいた。
だから、SVGを持ち上げるために「最近流行ってきました！」みたいな顔をする必要はない。
流行ってるのはSVGではなく、こちら側の事情のほうだ。
こっちの世界が変質してきたせいで、SVGの価値が再発見された。正確には、価値が“見えるようになった”。
しばらくの間、SVGは中途半端な立ち位置にいた。
デザイナーの現場ではPDFやAI（Illustrator）やEPSが強い。
Webの現場ではPNGやJPEGで回る。
アニメーションならFlashが全盛で、後にCSSやCanvas、そしてWebGLが台頭する。
SVGは、ずっと「便利だけど、決定打ではない」枠に押し込まれてきた。
この“地味さ”こそが、後の反転の伏線になる。
一時はセキュリティ懸念で“触ると危ない形式”扱いされた
SVGは「画像ファイル」の顔をしているのに、中身はテキストで、タグで、構造でできている。
この性質は、SVGの強さであると同時に、長いこと“疑われる理由”にもなった。
実際、SVGは過去に何度も嫌われた。
特にCMSやユーザー投稿、アップロード機能のあるサイト運営者にとっては、SVGは怖い。
「画像だと思って通したら、なんか動く」「意図しない挙動をする」「フィルタが面倒」。
結果として、SVGはいつの間にか“危険な形式”というラベルを貼られたことがある。
ここで面白いのは、SVGそのものが悪だったわけじゃない点だ。
HTMLだって同じように危険になれるし、JavaScriptは言うまでもない。
危険なのは“形式”ではなく、境界を曖昧にして、扱いを雑にしたときの運用だ。
なのに、当時の空気はシンプルだった。
「SVG？あー、それ危ないやつでしょ。PNGでいいじゃん」
この一言で片づけられてしまう時期があった。
だからこそ、いまの反転には少しドラマがある。
一度“危険物”扱いされたものが、再評価されるには理由がいる。
正確に言えば、SVGそのものが危険だった時代はない。
問題になったのは、サニタイズされていないSVGを“画像扱い”で通してしまう実装だった。
それでも今、再び評価が反転している理由
反転の理由は、ざっくり言うと「画像が賢くなりすぎた」からだ。
いや、正確には「画像の扱い方が、雑に賢くなりすぎた」。
AI以降、ラスター画像は魔法みたいに補正される。
拡大もできる。ノイズも取れる。ぼやけた写真も整う。
“画質”という一点だけを見れば、人類はかなりの領域を獲得した。
つまり、画質という“結果”の価値が下がり、
その代わりに「どう作られているか」という“構造”が評価されるようになった。
すると何が起きるか。
「綺麗に見える」は、もはや差別化にならない。
画像はとりあえずAIで整えれば、それっぽくなる。
つまり、見た目の品質だけでは、価値が語れなくなる。
この瞬間に、SVGの本領が顔を出す。
SVGは“綺麗に見える画像”ではなく、“意味が残る図”だからだ。
AI時代において「意味を持った図形」が復権したという事実
AIの時代は、情報が増える時代ではなく、“情報の粒度が粗くなる時代”でもある。
生成できるものが増えるほど、似たようなものが溢れる。
すると人間側が欲しくなるのは、「これは何でできているのか」「どこを変えれば意図通りになるのか」という、構造の手がかりだ。
ラスター画像は、基本的に“結果”だ。
完成品の見た目は持っているけれど、そこに至る意図や構造は埋もれる。
AIがいくら賢く補間しても、画像は画像のまま、点の集合として存在する。
一方でSVGは、図形が図形として存在する。
線が線で、円が円で、文字が文字のまま残る。
これは単なる形式の違いではない。
「意味が保存される」という、別種の強さだ。
いまは、意味が保存されるものが強い。
なぜなら、意味が保存されていないものは、AIに飲み込まれて“ただの素材”になりやすいからだ。
SVGは、素材である前に、設計図に近い。
後から意図を読み取り、修正し、再利用できるという意味で。
画像というより、図形と言語の中間にいる。
そしてAIは、皮肉なことに、このSVGの“言語性”をさらに強く照らし出した。
AIは画像を生成できる。でも、画像の中身の意味を“編集できる状態”で残すのは難しい。
だからこそ、編集可能な意味を持つ表現が、再び欲しくなる。
復権というのは、たぶんこういう現象だ。
新しい技術が古い技術を殺すのではなく、新しい時代が古い技術に“役割”を与え直す。
この記事は “What’s SVG?” ではない、という宣言
ここまで読んで、「で、SVGって何？」と言いたくなる人もいるかもしれない。
もちろん説明はできる。
SVGはScalable Vector Graphicsで、XMLで、ベクターで…と。
もし「SVGとは何か」を丁寧に知りたいなら、
Adobe が公開している解説は、今でも最も無難で信頼できる入口だ。
本記事は、その先に立っている。
ただ、ここでやりたいのはそれではない。
この文章でやりたいのは、SVGを“便利な画像形式”として紹介することではなく、
SVGがなぜいま、妙に強いのか。
なぜ「またSVGの話をしてもいい空気」が戻ってきたのか。
その空気の正体を、ちゃんと掴みにいくことだ。
SVGは、昔からあった。
ただ、昔はこの価値が読み取られなかった。
あるいは、価値があっても運用の側が追いついていなかった。
その結果、SVGは「便利だけど面倒」「触ると危ない」として棚に戻された。
いま、棚が揺れている。
AIが画像を量産し、編集し、補完し、拡大し、整え、誰でもそれっぽいものを作れるようになった。
その世界で、最後に差が出るのは何か。
「意味が保たれているか」
「構造が残っているか」
「意図を変換できるか」
そういうところに視線が戻ってきた。
SVGは、そこに刺さる。
刺さり方が、古い技術のそれではない。
むしろ、AI以後の言語的な世界に馴染んでしまう。
この序章は、その違和感と高揚感のための助走だ。
SVGを“拡大しても荒れない画像”として終わらせない。
なぜなら、いまのSVGは、そこに収まる器ではないからだ。
第1章：SVGの誕生とWebの思想
――Flashと分かれた運命、そして「記述」という選択
SVGという言葉を聞くと、多くの人は「軽い」「拡大しても荒れない」「アイコンに向いてる」みたいな実用面から入る。もちろん、それは正しい。だが、この章ではそこを一旦どける。SVGの“正体”は、便利な画像フォーマットではない。もっと根っこの、Webという世界の「思想の分岐点」に生まれた技術だ。
SVGは、見た目の技術というより、態度の技術である。
Webは何を信じるべきなのか。誰が解釈するべきなのか。何を公開し、何を閉じるのか。
SVGは、その問いに対して、最初から答えを出してしまっている。
その答えが「記述（declarative）」だ。
SVGが生まれた時代背景（W3C／Web標準）
Webは最初から統一された世界ではなかった。ブラウザごとに挙動が違い、HTMLもCSSも発展途上で、動画やアニメーションは手段が乏しい。静的なページから、動的でリッチな体験へ──そういう欲望が爆発していた時代がある。
そこで登場したのが、ブラウザの外側に別の世界を持ち込むアプローチだ。プラグイン。つまり「Webの上に、別のOSを載せる」みたいな乱暴な方法が、当時は最強だった。音も出る。動画も出る。アニメーションもできる。しかも制作ツールが整っていて、デザイナーが触れる。Flashは、まさにその王だった。
一方でW3Cという存在は、「Webを誰のものにするか」という戦いをしていた。
特定企業や特定環境に依存しない、誰でも実装できて、誰でも読めて、誰でも配布できる仕様。要するに“公共インフラとしてのWeb”を守るための設計思想。
SVGは、その文脈のど真ん中に生まれた。
実装や普及は決して一直線ではなかったが、
少なくとも設計思想のレベルでは、SVGは最初からW3C的だった。
「画像をXMLで書く」という発想自体が、思想の塊みたいなものだ。普通は「画像はバイナリでしょ」で終わる。だがSVGは「画像も文章として書ける」「構造として記述できる」と言い切った。それがW3C的だった。
つまりSVGは、Flashの対抗馬として生まれたというより、Webが“公共物であるための部品”として生まれた、と言ったほうが近い。
なぜSVGは「実行」ではなく「記述」を選んだのか
ここが本題だ。
Flashは「実行」だった。
内部に仮想マシンがあり、命令を走らせ、時間軸を制御し、音や入力を扱い、演出を作る。アプリケーションに近い。だから強い。自由度がある。作りたいものを作れる。
SVGは違う。SVGは「描写の宣言」だ。
ここに円がある。座標はこれ。色はこれ。線はこう。テキストはこれ。グラデーションはこれ。
やっていることは「世界の定義」なんだ。実行ではなく、定義。
この違いは、単に技術の設計方針ではない。哲学だ。
- 実行は「作者の意図を強制する」
- 記述は「受け取り手が解釈する余地を残す」
もちろん現実の技術はもっと混ざり合っているが、
設計思想の重心は、明確にこちら側にあった。
Webは基本的に後者を愛している。
HTMLもそうだ。見た目を絶対に固定しない。タグが意味を持ち、ブラウザが解釈し、環境に合わせて表示する。CSSも「こう描いてね」という指定であって、ピクセル単位での確定ではない（もちろん現実は泥臭いが、思想としてはそう）。
SVGはその系譜にいる。
画像なのに、Webの言語側にいる。これは地味にヤバい特徴だ。画像という“黙った物体”が、突然しゃべり始める。
だからSVGは「記述」を選んだ。
Webの住民として生まれるために。プラグインの王国ではなく、ブラウザの憲法の中に居場所を作るために。
Flashが担った役割と、その終焉
Flashの話を避けてSVGを語るのは、戦国時代の話をしないで江戸幕府を語るようなものだ。Flashは、役割を担った。それは事実だし、功績も大きい。
Flashが強かった理由は、単純に「当時のWebが弱すぎた」からだ。
動画再生も貧弱。アニメーションも表現が限られる。音も扱いづらい。フォントも怪しい。UIコンポーネントもない。つまり、やりたいことが全部“Webの外側”にあった。
そこでFlashは「全部入りの宇宙船」を提供した。
制作環境、配信、実行環境。表現が統一される。制作者は安心する。ユーザーは感動する。企業は儲かる。完璧だ。少なくとも当時は。
でも、その完璧さは同時に“閉じている”ということでもある。
Flashの内部は、Flashの世界だ。検索エンジンは理解しづらい。アクセシビリティも難しい。環境依存が強い。何より、Web標準の進化の外側にいる。
そして決定的だったのがモバイルだ。
スマホが台頭し、電力やバッテリーやセキュリティが最重要になると、プラグインという存在自体が“構造的に厳しい”立場に追い込まれる。プラグインは、ブラウザの外から深く入り込む。便利だけど危うい。スマホ時代の思想に合わない。
Flashは負けた。だがこれは「表現力が足りなかった」からではない。
むしろ表現力は過剰だった。
負けた理由は「WebがFlashを必要としなくなった」こと、そして「Webが公共インフラとして整備されていく流れに、Flashが合流できなかった」ことだ。
Flashの終焉は、敗北というより役割の終了に近い。
そして、その役割が終わった後に“空いた椅子”に座っていたのがSVGだった。
ただしそれは、Flashと同じ役割を引き継いだという意味ではない。
表現力ではなく「思想」で分かれた決定的な違い
FlashとSVGを比べる時、多くの人が「どっちが表現できるか」で見てしまう。
でも、その比較は本質を外す。なぜなら、最初からゲームのルールが違うからだ。
Flashは「作品を届ける技術」
SVGは「構造を伝える技術」
Flashは作者が主役だ。観客は受け取るだけでいい。
SVGは受け取り手（ブラウザ、検索エンジン、支援技術、編集ツール、変換器）が主役になれる。作者は“定義”を置いていく。
この差は、未来に効く。
表現力は時間とともに陳腐化する。
しかし思想は、時間とともに強度を増すことがある。
Webは、後者のタイプの世界だ。
HTMLが生き残っているのは“最強の表現力”があるからではない。むしろ不便だ。制約だらけだ。だが、意味を伝えるから生き残る。機械が読めるから生き残る。環境が変わっても解釈できるから生き残る。
SVGも同じだ。
SVGの勝ち筋は、アニメーションがすごいとか、描画が速いとか、そういう話ではない。
「意味がある」ことだ。Webの言語として扱えることだ。
この時点で、FlashとSVGは別の宇宙の住人だ。
SVGは“負けた技術”ではなく、“待っていた技術”だった
SVGは長い間、地味だった。
存在はしていた。ブラウザサポートも進んでいた。だが、主役にはなれなかった。
理由は単純で、当時の世界がSVGの価値を必要としていなかったからだ。
当時は「派手さ」「リッチさ」「動き」「驚き」が優先された。しかも制作現場は、デザイナーがすぐ使えるツールが強い。Flashにはその環境があった。SVGは“思想”は正しくても、“現場の武器”として整っていなかった。
でも時代が変わる。
- Webがアプリ化する
- UIがコンポーネント化する
- デザインシステムが必要になる
- レスポンシブが前提になる
- 多言語化・アクセシビリティが重要になる
- 検索が“文字”と“意味”を拾うようになる
- そしてAIが「構造」を読んで書き換える時代になる
この流れの中で、SVGは突然“主役の条件”を満たし始めた。
SVGは最初から「構造」でできていたからだ。
つまりSVGは、勝ったのではない。
待っていた。
時代がSVGの価値に追いつくのを、ずっと。
昔の技術が復権する時、それは懐古趣味ではない。
「当時は早すぎた思想」が、世界の側の変化で現実になる瞬間だ。
SVGは、まさにそれだ。
Flashが派手さを担い、Web標準が整備され、スマホ時代が到来し、セキュリティが成熟し、そしてAIが現れて「構造を扱う」ことに意味が生まれた。
その全部が積み重なって、ようやくSVGが“当然の選択”になる。
この章で言いたいのは、SVGが便利だから使おう、ではない。
SVGが生き残ったのは、Webが「記述」を信じたからだ、という話だ。
SVGは画像ファイルの皮をかぶった、Webの思想の化身だ。
そして思想は、流行よりもしぶとい。
しぶといどころか、時代が進むほど、じわじわ強くなる。
SVGは、そういう種類の技術だった。
第2章：ラスターとベクターの違いを、もう一度ちゃんと語る
――ピクセルではなく、意味で描くということ
「SVGって、拡大しても荒れないやつでしょ？」
この理解は間違っていない。けれど、それだけだと、SVGの本当の価値に触れないまま終わってしまう。
拡大しても荒れないのは結果であって、理由ではない。
SVGが強いのは、画像が“きれい”だからではなく、画像が“意味を持っている”からだ。
JPEGやPNGが「点の集合」であるのに対して、SVGは「構造の記述」だ。
この差は、見た目以上に深い。というか、見た目の次元を超えている。
ここでは、ラスターとベクターの違いを、いちどちゃんと語る。
懐かしい話をするようでいて、たぶん今こそ一番ホットな話になる。
JPEG / PNG が「点の集合」である理由
JPEGやPNGは、最終的には“ピクセルの色の集合”として画像を持つ。
つまり、1枚の画像は、縦×横のマス目がびっしり並んでいて、それぞれのマスに色が塗られている。
当たり前すぎて意識しないけど、ここがすべての起点だ。
ラスター画像の思想はこうだ。
「最終的に人間の目に見えるのは“色の面”なんだから、その色の情報を並べて保存しておこう」
めちゃくちゃ合理的だ。写真に強いのも当然だ。現実世界はピクセルでできていないけど、カメラのセンサーはピクセルで受け取る。
だからJPEG/PNGは、目に見えた結果を保存する。
撮った瞬間の“見た目”を、そのまま瓶詰めにして持ち運ぶ。
しかし瓶詰めは、瓶詰めだ。
後から“中身の意味”を取り出すのは難しい。
一度ピクセルとして固めた瞬間、そこに「これは文字だ」「これは線だ」「これは円だ」という情報は残らない。
残るのは、色の配置だけ。
人間はそれを見て「あ、文字だ」「あ、矢印だ」と理解するけれど、データとしてはただの色の集合だ。
ラスターは、世界を“結果”として保存する。
SVGが「数式と構造」でできているという事実
SVGの思想は真逆に近い。
SVGは、画像を「描画手順」あるいは「構造の宣言」として持つ。
ピクセルの色を並べるのではなく、「ここに円を描く」「ここからここまで線を引く」「この文字列をこの位置に置く」と書く。
言い換えると、SVGは“絵”というより、“設計図”だ。
線や図形や文字が、図形として存在している。
たとえば円なら、
- 中心座標があって
- 半径があって
- 塗り色や線の太さがあって
それが「円」として格納される。
だから拡大しても荒れない。
拡大しても、円は円のままだからだ。
大きくするときに「巨大なピクセル絵に引き延ばす」のではなく、「半径が大きい円を描き直す」だけだから、破綻しない。
でも、これはまだ入口だ。
本質は「描き直せる」ことではなく、
「何が描かれているかを、データが知っている」ことだ。
SVGは“座標と構造”でできている。
数式というより、図形を定義するルールの集合だ。
つまり、そこにあるのは「ピクセル」じゃなくて「意味」。
拡大縮小よりも重要な違いは「意味が残る」こと
ここから話が面白くなる。
ラスター画像には、「意味」が残らない。
ベクター画像には、「意味」が残る。
この違いは、技術的というより、思想に近い。
ラスターは、完成品。
ベクターは、構造体。
ラスターは、見た目の保存。
ベクターは、意図の保存。
この差は、拡大縮小みたいな“見栄え”の話より、ずっと大きい。
たとえば、PNGの中に「→」の矢印が描いてあったとしても、
コンピュータにとってはただの色の塊だ。
でもSVGなら、「これはパスで引いた矢印だ」と分かる。
だから、色だけ変える、線幅だけ変える、角丸だけ変える、位置だけずらす、そういう操作が“編集”として成立する。
つまりSVGは、「意味を持ったパーツの集合」になれる。
そして、パーツの集合になれるものは、再利用できる。差し替えできる。組み替えできる。
これが、AI時代において突然価値を取り戻した理由の核にある。
AIが強くなってきた領域は、ピクセルのノイズを増やして“それっぽく見せる”ことだけじゃない。
本当に得意なのは、「構造を操作する」ことだ。
“意味が残る”形式は、AIにとって扱いやすい。
そして人間にとっても、やり直しやすい。
テキストがテキストのまま存在する強さ
ここで、地味だけど決定打になる話をする。
SVGの中では、文字は文字のまま存在できる。
これが、静かにヤバい。
PNGに書かれた「売上 120%」は、画像だ。
拡大しても綺麗にはならないし、何よりコピーできない。検索にも引っかからない。読み上げもできない。
でもSVGなら、文字は <text> として存在する。
つまり「売上 120%」という文字列が、データとしてそこにいる。
これが何を意味するか。
- コピーできる
- 検索できる
- 翻訳の対象になる
- スクリーンリーダーが読める
- フォントを差し替えられる
- 数字だけ置き換えられる
そして一番大きいのは、
「情報として扱える」ということだ。
ラスターの文字は、見た目でしかない。
SVGの文字は、内容そのものだ。
これ、図解やスライドを作っている人ほど刺さる。
「あとで数字が変わったらどうしよう」
「部署名が変わったらどうしよう」
「色のトンマナを変えることになったらどうしよう」
ラスターは、そのたびに作り直す。
SVGは、差し替える。
ここに、制作コストの“次元の差”が出る。
検索・アクセシビリティ・Office連携に効く“副作用”
そして、この「意味が残る」という性質は、いろんな副作用を連れてくる。
副作用って言ったけど、実際は“本体に近い恩恵”だ。
検索に効く
SVGの中のテキストがテキストなら、検索エンジンにとっても「文章」だ。
ただし、インラインでDOMとして存在しているか、埋め込み方が適切かで結果は大きく変わる。
もちろん万能じゃないし、実装次第で左右されるけれど、少なくともPNGの文字よりは“世界に存在できる”。
画像に閉じ込められた言葉は、沈黙する。
SVGに入った言葉は、喋れる。
アクセシビリティに効く
スクリーンリーダーが読める。
図にタイトルや説明をつけられる。
意味が構造として残るので、「見えない人にも情報を渡す」設計が可能になる。
ラスターは、頑張れば代替テキストで補える。
SVGは、補うというより、そもそも“情報の器”になれる。
Office連携に効く
PowerPointやWordでSVGを扱うときに起きる、あの気持ち悪いくらいの便利さ。
貼ったあとに色を変えられる。（環境によって差はあるが）分解できる。パーツごとに編集できる。
これ、つまり「SVGがベクターの構造を持ったまま移動している」ということだ。
ラスター画像を貼るのは“画像を置く”行為だ。
SVGを貼るのは“部品を持ち込む”行為に近い。
この差が、地味に制作現場の空気を変える。
「作る」から「組む」へ移る。
ピクセルではなく、意味で描くということ
ここで一度、まとめっぽく言い切ってしまう。
ラスターは、「見た目」を保存する。
ベクターは、「意味」を保存する。
そしてSVGは、そのベクターをWebの文脈に乗せた。
つまり、画像が“Webの言語圏”に入ってきた。
画像は普通、沈黙している。
SVGは、画像に言葉を与える。
線は線として、円は円として、文字は文字として残る。
だから、操作できる。理解できる。流通できる。
ピクセルで描くというのは、完成品を作ることだ。
意味で描くというのは、世界の構造を渡すことだ。
そして今、AIはその「構造」を扱える。
だからSVGが復権する。
拡大縮小の話じゃない。
“編集可能である”という話でも、まだ浅い。
SVGは、画像が「意味を持ったまま生きる」ための形式だ。
そして意味を持ったものは、検索され、再利用され、翻訳され、再解釈され、連携される。
今の時代に必要なのは、きれいな絵より、
「あとから動かせる情報」なのかもしれない。
SVGは、そのための器になってしまった。
第3章：SVGアニメーションは、なぜ危なくないのか
――JavaScriptとCSSの決定的な違い
SVGの話をすると、だいたいどこかで空気が変わる瞬間がある。
「ああ、SVGね。……でもアレ、危ないんでしょ？」
この一言で、会話が終わる。
この“危ない”という感覚は、完全に捏造でもなければ、完全に正しくもない。
そして厄介なのは、危険の正体が「SVGそのもの」ではなく、「SVGに何を混ぜたか」「どこでどう扱ったか」によって決まるという点だ。
ここでは、いちばん大事な線引きをする。
「動く」と「実行する」は、まったく別物である。
そしてこの差が、SVGアニメーションの安全性の話を一気に分かりやすくする。
SVG＝危険、というイメージが生まれた経緯
まず“悪評”には理由がある。
SVGは画像フォーマットの顔をしているくせに、実は中身がテキストで、構造を持っている。
つまり「データ」でもあり「文書」でもある。
この性質が、昔のWebにおいては二つの意味で強烈だった。
1つ目。
SVGはHTMLと同じように、タグで構成される。
人間が読める。編集できる。差分が取れる。
この「便利さ」は、そのまま「仕込みやすさ」でもある。
2つ目。
当時のWebは、今よりずっと“混ぜ物”に寛容だった。
Flashが全盛期だった時代、Webは「動けば勝ち」「派手なら正義」みたいな空気があった。
SVGにも当然、「動かしたい」「触らせたい」「なんならアプリっぽくしたい」という欲望が流れ込む。
結果として、SVGは「画像なのに何かできる」→「何かできるなら悪さもできる」→「危ない」へと短絡した。
この短絡自体が間違いではない。
でも、その短絡のまま2025年の感覚でSVGを語ると、話が全部ズレる。
ここで大事なのは、危険だったのは「動くSVG」ではなく、「実行できるSVG」の方だということ。
「動く」と「実行する」はまったく別物
“動く”という言葉が、雑すぎる。
雑すぎて事故る。
- 動く：見た目が時間とともに変化する
- 実行する：コードが評価され、計算し、条件分岐し、外部に触る可能性がある
この二つは、別の宇宙に住んでいる。
CSSアニメーションやSVGの宣言的アニメーション（SMILなど）は、基本的に「見た目の変化」だ。
位置が変わる、透明度が変わる、線が伸びる、回転する、色が変わる。
それ以上でも、それ以下でもない。
一方、JavaScriptは“行為”を持てる。
DOMを触れる。
イベントを拾える。
外部通信もできる（できてしまう）。
ユーザー入力に応答できる。
状態を保存できる。
つまり、「見た目」から逸脱して、「やれること」が爆発する。
SVGに対する恐怖は、だいたいこの“爆発”が昔に何度か起きた記憶から来ている。
ただし、ここで冷静に言い直すとこうなる。
SVGが危ないのではない。
SVGの中に、実行を持ち込むと危ない。
この一文を飲み込むだけで、話が落ち着く。
CSSアニメーションは“状態遷移”でしかない
CSSアニメーションの本質は、めちゃくちゃ地味だ。
実はやっていることは単純で、「ある状態Aから状態Bへ、時間をかけて移る」だけ。
- transform: translate(…)
- opacity: 0 → 1
- stroke-dashoffset: 大 → 0
- fill: transparent → 色
- そして easing（緩急）
これは“汎用的な計算”ではなく、“限定された補間”だ。
コンピュータが賢いことをしているように見えるけど、やっていることは「途中の値をいい感じに埋める」くらい。
重要なのはここ。
CSSは、基本的に
「もし〇〇なら、このURLへアクセスしろ」とか
「このキー入力を盗んで送信しろ」とか
そういう命令が書けない。
（CSSにも過去に問題はあったが、それは“実行”というより“副作用”の領域だった）
できないことが多い。
つまり、できないから安全という種類の強さがある。
セキュリティの世界は、性能自慢の世界じゃない。
「できない」ことは、だいたい“守り”になる。
CSSアニメーションの安全性は、道具の思想そのものなんだと思っていい。
CSSは「見た目の世界」から出ないように作られている。
（完全に出ないとは言わないけど、少なくとも“命令を実行して外部へ行く”方向の危険とは距離がある）
だから、SVGをCSSだけで動かす場合、その動きはたいてい「見た目」の範囲に閉じる。
なぜCSSだけのSVGは、攻撃として成立しにくいのか
無害と言える理由は、精神論じゃなくて構造の話だ。
CSSだけのSVGは、だいたい次のような特徴を持つ。
- 動きが「宣言」になっている（こう変化する、という指定）
- 条件分岐がない（ユーザー入力で挙動を変えたりしにくい）
- 外部通信がない（データを送ったり拾ったりする世界から遠い）
- 触れる対象が“描画の属性”中心（座標、色、透明度、線、回転）
つまり、攻撃として成立するための「手足」がない。
セキュリティって、結局「何ができるか」のゲームだ。
刃物が危ないのは、刃物が“切れる”から。
CSSアニメーションは、だいぶ丸い。スポンジ包丁みたいなものだ。
ちょっと情けない例えだが、これは誉め言葉である。
もちろん、世の中に「絶対安全」なんてない。
でも、ここで言いたいのは“恐れ方”の話だ。
SVGアニメが怖いんじゃない。
実行が怖い。
CSSは、そこに踏み込みにくい。
この差を分けて語れるだけで、SVGの扱いは一段上手くなる。
SVGにJSを仕込む文化は本当に死んだのか（文脈の話）
じゃあ、JavaScript入りSVGは完全に消えたのか？
答えは、きれいに「Yes」とは言えない。
死んだというより、居場所が変わった。
昔は「SVGファイルそのものを実行単位にする」文化があった。
画像として配るのに、クリックで動いたら面白いじゃん、という発想。
でも今は、Webの作り方が変わった。
- インタラクションは、アプリ側（Webアプリ、SPA、フレームワーク）で管理する
- SVGは、その部品として扱う（アイコン、図形、チャート、UIパーツ）
つまり、動かすなら「SVGの外側で」動かす。
SVGにスクリプトを仕込むより、DOMとして読み込んで、JSで制御する方が自然になった。
この変化は、地味に大きい。
なぜなら、責任の境界が明確になるから。
- 「このSVGは素材」
- 「動かしているのはこのアプリ」
- 「安全性の管理はアプリ側のルールでやる」
境界があると、守れる。
境界が曖昧だと、怖い。
だから、SVGの“JS文化”は今でも存在するけれど、
「SVG単体を配る＝危険なことが起きる」みたいな時代の匂いは薄れている。
そして、ここが面白いところで。
SVGアニメーションの“気持ちよさ”は、
実はJSがなくても成立する。
線が描かれていく。
図形が組み上がる。
一度だけ、ふっと現れて終わる。
この演出は、宣言だけで作れる。
派手な操作やゲーム的な反応じゃない。
でも、視覚の説得力としてはむしろ強い。
「一度きりの線描画」が効く理由
ループは麻薬だ。
気持ちいいけど、すぐ“BGM化”する。
一度きりの線描画は、逆に「儀式」になる。
読者に、「今ここで起きた」感覚を渡せる。
そしてこの演出は、SVGの性質と相性が良すぎる。
- 線が“線として”存在している
- パスが“構造”として存在している
- stroke-dasharray / dashoffset で「描く」を作れる
- 画像のコマ送りじゃなく、“形が出現する”になる
これが、ラスターにはできない気持ちよさ。
動画にしてしまえばできるけど、動画にすると「意味」が死ぬ。
SVGは意味を保ったまま、演出できる。
そして、ここに第3章の核心がある。
動きは、危険の証拠じゃない。
宣言された動きは、むしろ“安全な強さ”だ。
読者が「SVGって危なくないの？」と感じたときに、
この線描画を見せると、体感で理解できる。
- これは“実行”じゃない
- これは“描画の変化”だ
- しかも中身は読める（＝透明性がある）
- しかも軽い
- しかも美しい
思想で勝つタイプの説得力。
一度きりで終わる、宣言的なSVGアニメーション
ループしない、一度きりの線描画。これは“実行”ではなく“遷移”のデモ。
第4章：セキュリティの現実
――SVGが「危険」だったのではなく、扱い方が未熟だった
SVGの話題になると、だいたい途中で誰かが言い出す。
「SVGって危ないんでしょ？」
この一言で、会議は黙る。設計は止まる。採用は流れる。
でも、この「危ない」は、たいてい主語がズレている。
危なかったのはSVGという形式そのものというより、「SVGをブラウザに食わせるまでの道のり」だ。
そしてもっと言えば、危なかったのは人間側の運用と実装の未熟さだ。
包丁は危ない。だけど包丁が悪いわけじゃない。
握り方と置き方と、子どもの手が届く場所に放置しないことが大事。SVGも同じだ。
ここでは、過去に実際に何が問題になったのかを、なるべく血の匂いのする現実として置いておく。
怖がらせるためじゃない。逆だ。怖さの正体が分かれば、人は落ち着いて扱える。
実際に問題になったSVG攻撃のパターン
SVGが「危ない」と言われた時代の主戦場は、だいたい次の2つだった。
1つ目は、ユーザー投稿。
アイコンアップロード、プロフィール画像、掲示板の添付、CMSのメディアライブラリ。
「画像をアップして表示する」という、最も日常的で最も無防備な入口。
2つ目は、インライン埋め込み。
HTMLの中に <svg>...</svg> を直書きして表示するケース。
ここはSVGというより、DOMの一部として動く。つまり「画像」じゃなくて「文書」になる。
攻撃の狙いは、結局のところいつも同じだ。
ブラウザ上で「意図しないスクリプト実行」や「意図しない外部通信」を起こして、情報を盗む、権限で何かをする、見た目をすり替える。
SVGは“画像っぽい顔”をしているのに、内部がXMLで、タグがあって、参照があって、イベントがあって、場合によってはスクリプトまで混ぜられる。
このギャップが、運用を油断させた。
現実の攻撃は、派手な必殺技というより「組み合わせ」と「隙」の芸だ。
- アップロードされたSVGをそのまま配信して、同一オリジンで開かせる
<img>で表示するつもりが、実装やブラウザ差で別の扱いになる- CSP（Content Security Policy）が無い/弱い
- サニタイズ（危険タグの除去）が中途半端
- そもそもSVGを「画像だから大丈夫」と誤認している
そして、攻撃が成立するときはだいたい「画像として扱っていない」瞬間が混じっている。
危ないのはSVGそのものではなく、SVGが“実行や外部参照の文脈”に乗ってしまう扱い方だ。
<script> / <foreignObject> / 外部参照の話
セキュリティの話を一気に現実へ引きずり戻す、代表的な“地雷”がある。<script>、<foreignObject>、そして外部参照だ。
（実務ではイベント属性や怪しい参照も、同じ系統として警戒される）
<script>
分かりやすい。混ぜると実行できる。
SVGは歴史的にスクリプトを許容してきた。理由は「インタラクティブな図形」という夢があったから。
ただ、ユーザー投稿でそれを許す理由は基本的にない。
投稿画像にスクリプトが要る場面は、ほぼ存在しない。存在するなら、それはもう画像ではない。
<foreignObject>
こいつが厄介だ。
SVGの中にHTMLを埋め込める。つまり、SVGの皮をかぶったHTMLが作れる。
HTMLが入るということは、ブラウザの解釈系に一気に接続されるということだ。
CSSもイベントも、場合によってはフォームも、画像のふりをして紛れ込める。
「SVGを表示しただけなのに、なぜかHTMLの攻撃が起きる」
その中心にいるのが、この <foreignObject> になりがちだ。
外部参照
SVGは外部リソースを参照できる。画像、フォント、フィルタ、パターン、マスク、あれこれ。
参照できるということは、外部へ通信できるということだ。
外部通信は、漏洩にもトラッキングにもなる。社内環境ならなおさら嫌われる。
さらにややこしいのは、「外部参照は必ずしも悪ではない」という点だ。
デザイン制作の現場では、外部参照を前提にした素材も存在する。
でも公開WebやCMSのユーザー投稿でそれを許すと、運用は地獄になる。
だから結論は単純で、実務の世界はだいたいこう落ち着く。
- ユーザー投稿のSVGでは
<script>と<foreignObject>は排除 - 外部参照は原則禁止（もしくは自分の管理下ドメインに限定）
- それができないなら、SVGアップロード自体を禁止
この「できないなら禁止」は、当時のCMSがよく選んだ道だ。
面倒なものは全部封印。現場としては合理的だった。
なぜCMSやユーザー投稿では嫌われたのか
嫌われた理由は、技術的な悪意というより「運用が割に合わない」からだ。
CMSというのは、雑に言えば「人間の想定を裏切る装置」だ。
善意の人も、悪意の人も、初心者も、プロも混ざる。
運用者は、その全員のミスをまとめて背負わされる。
JPEGやPNGは、多少壊れていようが、だいたい「表示できない」で終わる。
SVGは違う。文書だから、解釈されてしまう。
しかも、CMSの世界では「画像」は特別扱いされる。
CDNが勝手に最適化したり、サムネイルを生成したり、メタ情報を読んだり、プレビューしたり、エディタが中身を覗いたりする。
この途中工程のどこかで、「文書」として扱われる瞬間が混じると、途端に地雷が露出する。
さらに当時の空気も悪かった。
Flashが落ち、Javaアプレットが嫌われ、Silverlightが終わり、ブラウザは「実行する何か」に疲れ切っていた。
そこへ来てSVGが「スクリプトも入れられる」と聞けば、もう一括で悪者扱いされる。
結果として、多くのCMSはこう判断した。
「SVGは面倒。禁止で」
これは合理的だ。だけど同時に、雑でもある。
そしてこの雑さが、いま再び見直されている理由にもつながる。
「禁止」ではなく「制御」という現在の落としどころ
時代が進んだ今、現場はようやく分別を覚えた。
完全禁止か、無制限許可か、その二択ではない。
制御する。分離する。境界を引く。
現代の落としどころは、だいたいこの発想でできている。
- SVGを「信頼できる制作物」と「ユーザー投稿」に分ける
- 表示方法を分ける（インラインか、画像タグか、ダウンロード扱いか）
- サニタイズを通す（危険要素を除去してから配信する）
- CSPで縛る（仮に混ざっても動けないようにする）
- オリジンを分ける（ユーザー投稿は別ドメインで配信する）
このうち、効き目が強いのは「オリジン分離」だ。
ユーザー投稿のファイルは、メインサイトと同じドメインで配らない。
同一オリジンである限り、万が一の爆発が本体を巻き込む。
そして、サニタイズ。
SVGはXMLなので、危険タグや属性を落として「安全なサブセット」に変換できる。
ただしサニタイズは“やれば終わり”ではなく、実装と保守のコストがかかる。
だからこそ、多くの現場は実績あるサニタイザや分離設計とセットで運用する。
要は“SVGの方言”を作る。許す表現だけ残す。
ここで重要なのは、制御は「安全のため」だけではないということだ。
制御は、運用者の精神衛生のためでもある。
禁止は楽だ。だが、価値まで一緒に捨てる。
制御は面倒だ。だが、価値を救う。
いまSVGが復権しているのは、技術が進んだだけではない。
運用が成熟した。ここが大きい。
安全なSVGと、避けるべきSVGの見分け方
見分け方は、才能ではなくチェックリストだ。
そして、チェックリストは“人間の感覚”ではなく“機械的な条件”に落とすのが強い。
ここでは、感覚として覚えやすい形で置く。
だいたい安全寄りのSVG
- 図形要素が中心（
<path>,<rect>,<circle>,<polygon>,<line>など） - 塗りや線、グラデーション、クリップ、マスク、フィルタが主役
- テキストが入っていても、普通の
<text>で完結している - アニメーションがあっても、CSSやSVGアニメーション（宣言的）で完結している
- 外部リソース参照がない（または自分の管理下だけ）
要するに、「描画に必要なものしか入っていないSVG」だ。
絵を描く道具だけで完結している。
触ると面倒が起きるSVG
<script>が入っている<foreignObject>が入っているonloadなどイベント属性がある- 外部URL参照がある（
http(s)、data:、怪しい参照） - スタイルやフィルタの中で、外部URL参照（url(…)）が多い
- そもそも中身がやたら長い、難読化されている、意味が読めない
これは「絵の道具箱に、電動工具が混ざってる」状態。
描画の範囲を超えた力がある。運用者はそれを嫌う。正しい。
そして、最後にいちばん大事な判断軸。
「このSVGは、誰が作ったのか」
「どこから来たのか」
「どういう経路で配られるのか」
技術の安全性は、ファイル単体では完結しない。
配布の仕方、表示の仕方、混ざり方で危険度が変わる。
信頼できる制作物なら、厳しく制御しつつ使えばいい。
不特定多数の投稿なら、サニタイズできない限りSVGを許さない判断も現実的だ。
これは臆病ではない。境界の設計だ。
SVGが「危険」とされた時代は、境界が曖昧だった。
画像と文書の境界。表示と実行の境界。制作物とユーザー投稿の境界。
その曖昧さが、雑な禁止を生んだ。
いまの復権は、楽観ではない。
境界を引けるようになったことが、復権の土台だ。
SVGは本来、記述だ。
そしてセキュリティもまた、記述で勝てる世界だ。
禁止という乱暴な一刀ではなく、制御という設計で扱える。
それが「現実」の到達点だ。
第5章：著作権とSVG、そしてAI
――描けるようになった世界で、描いていいもの／ダメなもの
SVGは、やさしい顔をしている。
ファイルは軽い。表示は美しい。拡大しても崩れない。テキストも残る。色も構造も、あとから簡単に差し替えられる。
そして、その「あとから簡単に」が、著作権の話になると一気に牙をむく。
PNGやJPEGが「画像」だとしたら、SVGは「設計図」に近い。
設計図は便利だ。だが、設計図は危ない。
なぜなら、設計図は“再現”ができるからだ。しかも、かなり忠実に。
ここで一度、嫌な現実を置いておく。
著作権の争点は、たいてい「頑張ったかどうか」ではない。
「似てしまった」ことそのものが問題になる世界がある。
著作権の争点は「頑張ったかどうか」ではなく、表現の芯が似てしまったかに寄ることがある。
悪意がなくても、結果として“本質的特徴”を踏んでいると判断されれば、トラブルになり得る。
そしてAIの登場で、この“似る速度”が、異常に上がった。
SVGは“再利用しやすい”がゆえのリスク
SVGの強さは「再利用のしやすさ」にある。
色だけ変える、線幅だけ変える、角丸だけ変える、テキストだけ差し替える。
同じ構造をテンプレとして使い回して、いくらでも別バリエーションを作れる。
これ、制作現場では最高だ。
だが、権利の世界では、同じ特徴が“複製性”としてカウントされる。
たとえば、ロゴ。
ロゴは「ただの図形」に見えることがある。円、線、三角、文字。
でも、ロゴの本質は、図形の組み合わせに宿る“識別性”だ。
識別性は、まさに「その形だから、あの会社だ」と分かること。
SVGは、その識別性を“構造として保持したまま”運べる。
PNGだと、なんとなく潰れていたり、背景と混ざっていたり、細部が分からなかったりする。
ところがSVGは、輪郭が輪郭のまま残る。
線の比率、文字間、角度、余白、曲線の癖。
つまり「個性」が、劣化せずに残る。
この“個性が残る”は、著作権・商標の文脈では、普通に危険側に振れる。
そして恐ろしいのは、SVGが「編集できる」ことそのものが、言い訳になりにくい点だ。
編集できるということは、“原形が分かる”ということでもある。
編集の痕跡が残る。構造が残る。癖が残る。
丸パクリではなくても、「元の何か」を匂わせる証拠が残りやすい。
キャラクター・ロゴ・スタイルの境界線
ここが地獄のゾーン。
「キャラクターはダメ」っていうのは、たいていの人が分かる。
既存のキャラをトレースしてSVGにしたら、ほぼアウト。
顔の比率、目の配置、髪の形、シルエット——それ自体が“表現”だから。
ロゴも分かる。
企業ロゴを似せたら、著作権だけじゃなく商標も絡む。
ロゴは識別の塊なので、似せた時点で戦争が始まる。
問題は「スタイル」だ。
スタイルは境界が曖昧だ。
“〇〇風”という言葉が、ここで爆発する。
たとえば「線が太くて、丸っこくて、目が点で」みたいな特徴。
それはスタイルなのか、表現なのか。
あるいは「この曲線の癖」「この陰影の入れ方」「この余白の取り方」。
言語化しにくいが、見た瞬間に“誰の系統か”が分かるものがある。
SVGは、スタイルを「数値化」できてしまう。
線幅、角丸半径、ベジェ曲線のハンドル、パスの滑らかさ。
つまり、スタイルを再現しやすい。
再現できるということは、「似せられる」ということだ。
そして、似せたものが大量生産できる。
AIが参入すると、さらに加速する。
「それっぽい線」「それっぽい目」「それっぽいシルエット」が、秒で生成される。
ここで気持ち悪い逆転が起きる。
人間が手でやるときは、面倒だから“似せる量”に自然な上限がある。
AIは、その上限を消し飛ばす。
似たものを100個、1000個、飽きるまで出せる。
そして、その中に「やばいほど似てるやつ」が混ざる確率も上がる。
画風そのものは抽象度が高く、原則として保護対象になりにくいと言われる。
ただし、具体の形・比率・配置・癖まで寄せてしまうと、話は一気に別物になる。
つまり、AIは“悪意”より先に“事故率”を上げる。
AIがSVGを生成できるようになった意味
この変化は、単に便利になったという話じゃない。
絵を描けない人が描けるようになった、というだけでもない。
もっと根が深い。
SVG生成AIが出てくるというのは、
「表現が、言語化され、設計図化され、再利用可能な部品になった」
ということだ。
これまで、絵が描ける人が持っていた“暗黙知”があった。
線の強弱。バランス。間。抜き。
目立たせたいところと、沈めたいところ。
それは学習と経験と手癖で形成される、職人的な知識だった。
AIはそれを、雑に言えば「変換器」にした。
言葉→形。指示→構造。雰囲気→パス。
その変換ができるようになった瞬間、表現は“誰でも触れる素材”になった。
ここで、著作権の問題が二重になる。
1つは「似せてしまう問題」。
もう1つは「誰の成果を学んでいるのか問題」。
学習データの是非は、ここでは深追いしない。
ただ、現場感覚として確実に起きるのは、こういうことだ。
AIが出力したSVGに対して、
作った本人が「自分のものだ」と思いやすくなる。
なぜなら、手で描いてないから、参照元のイメージが薄い。
“生成された”という感覚が強く、元ネタが見えない。
だが第三者が見たときに、「あれ？これ、あの作品の癖に似てない？」が起きる。
このズレが、事故を生む。
さらに言うと、SVGは“検出されやすい”。
SVGは構造が残るぶん、場合によっては形状の特徴を比較しやすくなることがある。
画像の類似判定だけでなく、パスの特徴、形状の指紋。
技術的には、似ていることを証明しやすい方向に進む。
つまりAI×SVGは、便利になるほど「逃げ道が減る」。
「イラレ職人の血の結晶」が民主化された瞬間
ここ、少し熱くなる。
AIが奪った、と言う人がいる。
でも同時に、AIが解放した、とも言える。
“イラレ職人”という呼称が象徴しているのは、
単にツール操作が上手い人のことじゃない。
地味で、終わらない調整。
0.5pxのズレを直し続ける執念。
曲線の違和感を、理屈じゃなく身体で嗅ぎ取る感覚。
そして、見た人が「気持ちいい」と感じるバランスへ持っていく、無言の戦闘。
それは、血の結晶だ。
時間の結晶だ。
センスという言葉で片付けられがちだが、実際は労働と観察の蓄積だ。
AIがそれを民主化した。
ある意味では残酷だ。
「誰でもそれっぽいものを作れる」世界は、職人の価値を薄める。
だが同時に、表現の入り口を爆破して開ける。
ここで重要なのは、民主化が“正義”かどうかではない。
民主化は起きた。不可逆に。
だったら、次に問うべきはこうだ。
民主化された世界で、職人の価値はどこに宿るのか。
そして、職人の成果物をどう守るのか。
答えの一部は、たぶん「コピーの禁止」ではない。
コピー禁止は、現実的には勝てない。
AIが出力するものを、世界中の誰かが毎秒作る。
止められない。
守るべきは、創作者の生活であり、継続であり、次の作品だ。
つまり「作り続けられる仕組み」。
これは法だけじゃなく、文化と市場の話になる。
SVGは、ここを露骨に照らしてしまった。
なぜならSVGは、コピーが容易すぎるから。
でも同時に、オリジナルの価値を伝える道もある。
制作プロセス、意図、文脈。
単なる形ではなく、「なぜその形なのか」を語れること。
この“語れる表現”こそが、AI時代の職人の武器になる。
便利さと倫理のちょうどいい距離感
ここまで読んで、「じゃあAIでSVG作るのはやめよう」にはならない。
現実的じゃないし、面白くない。
だが「好きにやっていい」でもない。
その間に、ちょうどいい距離感がある。
距離感の要点は、シンプルだ。
- “特定の誰かの成果”に寄りかからない
- “識別性が強いもの”に近づきすぎない
- “それっぽさ”を狙うなら、要素を分解して一般化する
- 最後は人間の目で「これ、誰かを踏んでないか？」を確認する
特に、最後の一文が重要だ。
AIは、倫理を知らない。
知っているように喋っても、それは“らしさ”の模倣だ。
倫理は、結果に責任を持てる側が引き受けるしかない。
つまり人間の仕事だ。
そして、この距離感は“自分を守る”ためでもある。
炎上を避けるとか、訴訟リスクとか、そういう打算だけじゃない。
もっと根っこの話。
「自分が作ったと言えるもの」を作るための距離感だ。
AIの出力をそのまま使うと、作品は速い。
でも、作品は薄くなる。
自分の手触りが残らない。
AIが吐いた形を、ただ配置しただけになる。
逆に、AIを“下描き”や“発想の種”として使い、
そこから自分の意図で構造を組み直すと、作品が自分のものになる。
SVGはそれができる。
なぜならSVGは「構造」だから。
構造を組み直すことが、制作になる。
ここに、AI時代の面白い逆転がある。
ラスターだと、修正はペイントになる。塗りつぶしになる。
SVGだと、修正は設計になる。編集になる。構築になる。
つまり、AIで生成されたものを“考えて作り直す余地”が残る。
だから、SVGとAIは相性がいい。
だが相性がいいぶん、事故も起きる。
事故を避けるには、禁止ではなく「作り方の作法」が必要になる。
たぶんこれから、SVGは単なる画像形式ではなく、
“表現の作法”ごと共有される領域に入る。
テンプレ、コンポーネント、デザインシステム、再利用可能な図形言語。
その世界で、著作権と倫理は「脅し文句」じゃなく、
表現が長く生きるための“環境条件”になる。
描けるようになった世界で、描いていいもの／ダメなもの。
その線引きは、誰かが与えてくれる免許じゃない。
道具が強くなった分だけ、作る側が“自分の基準”を持たなきゃいけない。
そういう意味で、AI時代の著作権は、
創作者を縛る鎖である前に、
創作者が自分の足で立つための、地面でもある。
※本章は一般的な注意喚起であり、個別案件は状況により判断が変わり得ます。
第6章：AIがSVGを変えた
――「描く」から「指定する」への転換
「SVGは手で描くもの」そう信じていた時代は、いま静かに揺らいでいる。
もちろん、今でも“手で描く”価値は残っている。Inkscapeを開き、ペンツールで線を引き、曲線を整えて、余白を詰めて、バランスを取る。あれは職人芸だ。デザインは最終的に「目」と「指先」が勝つ領域がある。
ただし、AIの登場で、もう一つ別の入口が生まれてしまった。
それは――「言葉で指定して、SVGを出させる」という入口だ。
人類はここ数年で、画像を“描く”より先に「欲しい絵の説明をする能力」を急激に鍛え始めた。プロンプトという名の呪文。
そしてSVGは、画像の中でも特にこの呪文と相性が良い。
なぜならSVGは、もともと「絵」ではなく「構造」だからだ。
構造は言葉で説明できる。言葉で説明できるものは、AIが生成しやすい。
ここから話がややSFっぽくなるが、現実の足音が近い。
AIはSVGそのものを変えたというより、SVGへの“入口”と“制作工程”を変えた。
「描く技術」から「指定して組み直す技術」へ、重心が移った。
プロンプトでSVGが出てくる世界
ちょっと前まで、SVGを作るには工程が必要だった。
- 図形を設計する
- パスを引く
- 書き出す
- 必要なら最適化する（余計なメタデータを削る、パスを詰める）
- 使う場所に合わせて viewBox やサイズを整える
これが当たり前だった。
だが今は、こうなる。
「1200×630の横長、背景はゆるい幾何学、右側に余白を残して、左下に薄いグリッド。色は青系、線は細め。SVGで。」
……みたいな、雑な言い方をしても、最低限“それっぽい”ものが出てくる。
ここで重要なのは、AIが“完璧なSVGを出す”ことじゃない。
完璧じゃなくていい。むしろ、完璧じゃないことが価値になる。
人間がやるべき仕事が「ゼロから描く」ではなく、「出てきたものを整える」に変わるからだ。
これ、地味に革命だ。
ゼロから描くのは、精神力を食う。
整えるのは、判断力で済む。
判断力は疲れるが、精神力ほど重くない。たぶん。
AIがSVGを生成することで起きたのは、創作の“初期コスト”の暴落だ。
「とりあえず叩き台」を作るコストがほぼゼロになった。
叩き台がゼロ円なら、アイデアの試行回数が増える。試行回数が増えれば、当たりが出る確率が上がる。
量の暴力が、そのまま質に変換される。
SVGはここで、かなり得をする。
なぜなら、AIが出す“それっぽい”は、ラスター画像だと扱いづらいことが多い。
色を変えたい、文字を差し替えたい、余白を調整したい、線幅を揃えたい。
ラスターは、その瞬間に「編集」ではなく「加工」になる。
加工は劣化と戦う行為だ。ちょっとずつ壊れる。
SVGは違う。
そこにあるのは「要素」だ。塗り、線、座標、グループ。
壊すのではなく、組み替える。
AIはSVGを生成できるようになったことで、画像を“部品”として扱う未来を、急に手前に引き寄せた。
図形・構造・アニメーションを“言葉で指定”する感覚
SVGをAIに頼むとき、人間の脳内で起きる変化が面白い。
これまで「こういうの描きたい」と思ったら、手の動きに翻訳していた。
ペンツールをどこに置いて、どこで曲げて、どう整えるか。
これは職人の言語だ。
でもAI相手だと、「構造の言語」で喋り始める。
- “左にタイトルが入る余白”
- “視線誘導のための斜めの流れ”
- “背景に主張しないノイズ”
- “角は丸め、線は細く、情報は少なく”
- “中身を邪魔しないが、空気は作る”
これ、デザインを言葉にしているようで、実は「設計」を言葉にしている。
つまり、人間が絵を描いているのではなく、意図を描いている。
SVGは意図の入れ物として優秀だ。
「四角形を置ける」「線を引ける」「テキストを置ける」「グループ化できる」
全部、意図の表現に直結している。
さらに言えば、SVGは“文章みたいな画像”だ。
書けば現れる。消せば消える。置き換えれば置き換わる。
この性質が、AIの相手として強すぎる。
そしてここから、もう一段面白い話がある。
AIにSVGを作らせると、人間が「デザインを構造として理解する」方向へ引っ張られる。
たとえば、ただの背景パターンを作るだけでも、
- パターンの単位（tile）の設計
- 繰り返し（repeat）の周期
- 規則性と乱数の比率
- 余白の呼吸
- コントラストの制御
こういう“設計の変数”で考え始める。
結果として、SVGは「絵が描けない人」にも扉を開く。
そして同時に、「絵が描ける人」の仕事も進化させる。
手で描ける人は、設計を言葉にできる人でもあるからだ。
デザイナーの価値が消える、ではない。
価値の形が変わる。
“描ける”から、“設計できる”へ。
これ、静かに恐ろしくて、同時にワクワクする変化だ。
ラスター拡大が賢くなった今でも、SVGが残る理由
ここで一度、ありがちな反論が出る。
「でもさ、今のAIってラスターの拡大めちゃくちゃ綺麗じゃん。
小さい画像を大きくしても、昔みたいにドットドットにならない。
じゃあベクターの価値って薄いんじゃない？」
……確かに、拡大の問題は昔ほど深刻じゃない。
AIは補間が上手い。ノイズも誤魔化せる。質感も作れる。
“見た目”だけなら、ラスターが勝つ場面は増えている。
でもSVGが残る理由は、そこじゃない。
SVGは、拡大しても荒れないから強いのではなく、
「変更しても崩れないから」強い。
拡大は一回の勝負だ。
一度大きくしたら、基本それで終わる。
でも現実の制作は終わらない。
タイトルを変える。
色を変える。
レイアウトを変える。
要素を追加する。
ロゴを差し替える。
言語を変える。
版を作り分ける。
スマホ用に余白を増やす。
印刷用に線を太くする。
この“変更地獄”に耐えるのがSVGだ。
SVGは再レンダリングではなく、再構成ができる。
ここが本質的に違う。
ラスターは、完成品として美しい。
SVGは、設計図として強い。
AIがどれだけ賢くなっても、完成品を“後からいじる”のは苦手だ。
完成品は脆い。少し触ると破綻する。
それを修復するためにまたAIを呼ぶ。
呼ぶたびに微妙に変わる。
「同一性」が保てない。
SVGは保てる。
なぜなら同一性が“構造”として存在しているからだ。
これは地味だが、制作現場では致命的に重要になる。
ブランドは、同一性のゲームだ。
企業ロゴの色が毎回微妙に変わる世界は地獄だ。
UIのアイコンの線幅が揺れる世界も地獄だ。
SVGは、その地獄からの避難所になる。
ラスター拡大AIが賢くなるほど、
逆に「構造を保てるSVGの価値」が浮き彫りになる。
皮肉で美しい逆転現象だ。
テキスト差し替え・色変更・構造再利用の強さ
SVGの強さを一言で言うなら、こうだ。
「使い回しても劣化しない」
この性質は、AI時代において恐ろしく強い。
AIは生成を得意とする。
しかし、生成は“毎回新しいもの”を出す。
毎回新しいものは、統一感が壊れやすい。
統一感が壊れると、成果物が安っぽく見える。
一方、SVGは再利用が得意だ。
パターンを作って、色だけ変える。
アイコンセットを作って、線幅だけ揃える。
テンプレ背景を作って、テキストだけ変える。
同じ骨格で、量産できる。
これ、AIの量産と相性が良すぎる。
AIに任せるのは「骨格の提案」でもいいし、「装飾のバリエーション」でもいい。
でも最終的に“骨格を保つ”のはSVGが得意だ。
たとえばブログのアイキャッチ。
毎回違う画像をAIで作るのは簡単だ。
だがそれは、サイト全体のトーンを壊しがちだ。
「記事は増えたが、ブランドが育たない」というやつ。
SVGテンプレを持っていると、話が変わる。
- 背景の構造は同じ
- 色だけ記事カテゴリで変える
- タイトルはテキストとして差し替える
- サブ要素（アイコンやパターン）だけランダムにする
これで「量産」と「統一感」が両立する。
統一感がある量産は、ただの量産よりずっと強い。
読者が、視覚的に“同じ場所に戻ってきた”と感じるからだ。
そしてここが一番気持ちいいところだが、
SVGは“再利用を前提に設計できる”という思想を持っている。
最初から「あとで差し替える」ために作れる。
最初から「色を変える」ために作れる。
最初から「構造を残す」ために作れる。
AIはこの思想を、ようやく実務に落とし込んだ。
SVGは、テンプレ文化を持てる。
テンプレ文化を持てる技術は、強い。
強い技術は、生き残る。
GPTやGeminiで「試したくなる」瞬間をどう作るか
ここまでの話を、単なる技術論で終わらせたくない。
第6章の主題は「AIがSVGを変えた」だ。
つまり、“人間の行動”が変わった、という話でもある。
重要なのは、「SVGを学ぶべきだ」と説教することではない。
説教で人は動きにくい。動くのは、だいたい体験のほうだ。
人は説教で動かない。人は体験で動く。
じゃあ、どうやって体験させるか。
鍵は、「試したくなる瞬間」を作ることだ。
この瞬間は、理屈ではなく、気持ちのスイッチで起きる。
たとえば、こんな瞬間。
- 画像の色を変えたいのに、PNGだと面倒くさい
- タイトルだけ差し替えたいのに、Photoshopを開くのが億劫
- 背景に薄い模様が欲しいのに、素材サイト巡りがダルい
- “ちょっとだけかっこよくしたい”のに、時間がない
- アイコンが欲しいのに、探すより作った方が早い気がしてきた
この「小さなイラつき」と「小さな欲望」が混ざった場所に、AI × SVGが刺さる。
ここでAIに投げるのは、完璧な要求じゃない。
むしろ雑でいい。
「ブログの見出し用に、線が伸びるだけのシンプルなSVGアニメ。太さは2px、色は#333、3秒で描ききって止まる。余白は多め。」
こういう、雑だが意図がある命令。
するとAIは、とりあえず形にして返してくる。
その瞬間、ユーザーは“勝った”と感じる。
もちろん一発で綺麗に出ないことも多い。余計な要素が混ざったり、viewBoxが雑だったりする。
でも叩き台としては十分で、整える工程に回せる。
この勝利体験はデカい。
なぜなら、SVGは本来「ちょっと面倒」な技術だからだ。
viewBox？ path？ transform？
それが、よく分からなくても動くものが手に入る。
「よく分からんが勝った」という最高の入り口になる。
そして勝った人は、次にこう思う。
「じゃあ、色変えたらどうなる？」
「速度変えたら？」
「線を点線にしたら？」
「パスを増やしたら？」
「文字を入れたら？」
この瞬間から、学習が始まる。
学習は、必要に迫られたときにしか起きない。
AIは“必要”を量産できる。
SVGは“変更可能性”を提供できる。
この組み合わせが、試行錯誤の沼を作る。
そして沼は、悪ではない。
面白い沼は、人を育てる。
AI時代の学び方は、たぶんこうなる。
「理解してから作る」ではなく、
「作れてしまったものを理解しにいく」。
順序が逆転する。
だが、人間はもともとそうやって学んできた。
火を起こしてから、燃焼を理解した。
空を飛んでから、揚力を理解した。
とりあえず動いたコードを触ってから、プログラミングを理解した。
SVGも、同じ場所に来ただけだ。
AIがSVGを変えたとは、
SVGが“学ぶ対象”から、“使ってみる対象”になった、ということだ。
描けない人が触る。
触った人が増える。
増えた人の中に、職人が生まれる。
職人が増えれば、文化が育つ。
文化が育てば、技術は生き残る。
SVGは、AIによって「設計図の言語」として再起動した。
この再起動は、たぶん止まらない。
そして次に問われるのは、「この新しい入口を、どう運用に落とすか」だ。
第7章：ユースケース集（現実編）
――今すぐ使えるSVGの置き場所
SVGの話になると、どうしても「綺麗に拡大できます」や「アニメもできます」で終わりがちだ。
でも現場で効くのは、もっと俗っぽいところにある。
つまり、こうだ。
「今この瞬間、どこに置けば得をするのか」
「どこに置けば、壊れず、軽く、編集でき、再利用できるのか」
「そして、どこに置くと事故るのか」
ここでは“正しいSVG”の講義はしない。
ただし判断軸は一つだけ。「差し替えが発生する場所ほどSVGは強い」
単に、今すぐ使える置き場所を、現場の匂いがする順に並べる。
Web背景としてのSVG（軽量・解像度非依存）
Web背景でSVGが刺さるのは、デザイナーがこだわった時ではなく、運用が荒れた時だ。
更新が頻繁で、サイズがバラつき、画像の差し替えが当たり前で、しかも表示が遅いと怒られる。
この地獄で、SVGは急に「仕事ができる形式」になる。
たとえば、背景にうっすら入る幾何学パターン。
- 画像で作ると、解像度問題が出る（高解像度にすると重い）
- 圧縮すると、汚れが出る（特にグラデや細線）
- 端末幅が変わると、微妙に破綻する（トリミング地獄）
SVGだと、そのへんの苦悩が“なかったこと”になる。
線や面のパターンは、拡大縮小が前提の世界で生きている。
そもそも背景というのは、情報量が少なくてよく、反復や規則性と相性が良い。
SVGの得意領域だ。
さらに強いのは「色の差し替え」が楽なこと。
ブランドカラーの変更、季節キャンペーン、ダークモード対応。
画像だと毎回書き出し直しだが、SVGだとCSSや変数で色を切り替えられる。
ここで重要なのは、美術としての背景じゃない。
「運用が回る背景」だ。
背景は“目立たないこと”が役割なのに、制作コストと運用コストだけは目立つ。
その矛盾を、SVGは静かに解消する。
ただしユーザー投稿や外部由来のSVGを背景に直貼りするのは別の話。そこは第4章の領域だ。
図解・チャート・ダッシュボード
SVGが一番「AI時代っぽい顔」をするのは、実はこの領域だ。
図解、チャート、ダッシュボード。
ここではSVGは画像というより、UI部品や文章に近い。
図解の世界でSVGが強いのは、「テキスト」「構造」「イベント」が同居できるからだ。
図解をPNGで貼る文化は、たしかに楽だった。
でも現代は、図解が「更新されるもの」になった。
- 数値が変わる
- 項目が増える
- ラベルが差し替わる
- 色ルールが変わる
- レスポンシブ対応が必要になる
これをラスタ画像でやると、人間の手が死ぬ。
毎回書き出して、貼り直して、微調整して、また書き出して…という儀式が発生する。
SVGだと、図形とテキストが“生きている”。
ラベルがテキストで残るので、差し替えができる。
数値の更新も、コード側から可能になる。
チャート生成ライブラリがSVGを吐くのは、単に歴史の偶然じゃない。
「構造が必要な情報表現」に向いているからだ。
ダッシュボードで特に効くのは、次の一点。
表示されているものが、クリックできる。触れる。反応する。
つまり、視覚表現と操作が同じ空間にある。
Canvasでもできると言えばできる。
でもSVGは「触れることが標準装備」みたいな顔をしている。
要素ごとに意味が分かれていて、イベントも付けやすい。
デバッグも比較的やりやすい。
人間が読める。
ダッシュボードは、運用される。
運用されるものは、メンテされる。
メンテされるものは、人間が触れる必要がある。
ここでSVGの“意味が残る”性質が効いてくる。
Office（PowerPoint / Word）でのSVG活用
多くの人はここで驚く。
「え、SVGってOfficeに入るの？」
入る。しかも、かなり使える。
ただし挙動はOfficeのバージョンや環境差がある。だからこそ「ラスタよりマシ」という比較で語るのが安全だ。
Officeの現場は、だいたいこういう戦場だ。
- 社内テンプレがある
- 図形の統一感が欲しい
- でも毎回微妙に違う資料になる
- スクショや画像貼りだらけで、編集不能になる
- 最終的に「誰も直せないパワポ」だけが残る
SVGが効くのは、資料の“部品化”ができるからだ。
アイコン、矢印、フロー図のパーツ、ピクトグラム。
これらをSVGで持っておくと、サイズ変更しても破綻しないし、色も揃えられる。
さらに重要なのは、SVGは「編集可能な図形として扱える瞬間」があること。
環境やアプリによって差はあるが、少なくともラスタ画像より“資料の寿命”が伸びる。
Wordでも同じだ。
図版として貼ったSVGが、印刷でも崩れず、拡大しても荒れず、場合によってはテキストがコピーできる。
PDFに落としても、意味が残る場合がある。
資料は再利用される。
再利用されるものは、編集される。
編集されるものは、元データが必要になる。
でも現実には元データは消える。
だから、貼り込んだ瞬間から編集可能性が残る形式が価値を持つ。
SVGは、資料文化に対する“保険”になる。
そして地味に強いのが、アイキャッチや図版を「Webにも流用できる」点だ。
社内資料 → ブログ記事 → マニュアル → 採用資料。
同じ図が別の媒体に移植される時、SVGは破綻しにくい。
Officeの世界は、いつだって“最終工程”にいる。
その最終工程でSVGが効くというのは、つまり「現場で勝つ」ということだ。
印刷とWebをまたぐ素材としての可能性
印刷とWebをまたぐ素材は、いつも中途半端な立場になる。
印刷は解像度とカラープロファイルの世界。
Webは軽さとレスポンシブと互換性の世界。
この二つは似ているようで、仲が悪い。
SVGが生きるのは、その間で「同じ構造を持ったまま移動できる」場面だ。
たとえば、ロゴやシンプルなアイコン。
これをPNGで管理すると、サイズごとにファイルが増殖する。
印刷用にAIやPDFが別に必要になり、さらに管理が増える。
最終的に“正本”がどれなのか分からなくなる。
「形の正本を一つにする」だけで、現場の半分は救われる。
Webではそのまま使える。
印刷ではPDFに変換して運用できることも多い。
完璧ではないが、管理が破綻しにくい。
ここで大事なのは、SVGが万能だという話ではない。
万能じゃない。
グラデや写真表現は弱いし、印刷工程の都合もある。
でも、ロゴ・図形・線画・アイコン・簡易図解という“勝ち筋”では、両方に効く。
媒体を跨ぐ現場は、往々にして「人の引き継ぎが発生する」。
引き継ぎがある現場では、ファイル管理は崩壊する。
だからこそ、“一つの構造を持つ”形式は強い。
“賑やかし”と“意味を持つ図”の境界
SVGのユースケースには、二種類ある。
1つは、賑やかし。
背景、装飾、雰囲気づくり。
情報としては薄いが、印象として効く。
もう1つは、意味を持つ図。
図解、チャート、UI部品。
情報そのものを運ぶ。
現場で大事なのは、この二つを混ぜないことだ。
混ぜると事故る。
賑やかしは、運用者が触らない前提で作る。
賑やかしでも、最低限「後から色だけ変える」くらいの余地は残しておくと、運用の地獄が減る。
意味を持つ図は、触られる前提で作る。
触られるなら、テキストはテキストとして残し、パーツ構造も分かるようにする。
触られないなら、構造を最適化して軽量に振り切る。
そしてAI時代にこの境界が面白くなった。
AIは、賑やかしも作れる。
意味を持つ図も作れる。
でも人間が欲しいのは、だいたい中間だ。
「見た目は賑やかし。でも内容はちゃんと意味を持っていて、差し替え可能」
このわがままに対して、SVGは意外と答えを持っている。
たとえば、Webのヘッダーに置く“雰囲気図解”みたいなもの。
世界観を出しつつ、サービスの構造が薄く伝わる。
ラベルは後で変えられる。
色もテーマで変えられる。
これができるのは、SVGが「画像」ではなく「構造」だからだ。
賑やかしを“意味の器”にできる。
意味を“運用可能な装飾”にできる。
ここが、SVGの面白い境界線だ。
まとめとしての現実的な結論
この章で言いたかったことはシンプルだ。
SVGは、「置き場所」を見つけると急に強くなる。
背景に置く。
図解に置く。
Officeに置く。
印刷とWebの間に置く。
賑やかしと意味の境界に置く。
SVGは万能じゃない。
でも、刺さる場所では異様に刺さる。
そして刺さった瞬間、人はこう思う。
「これ、もう戻れないな」と。
SVGは、道具というよりも、運用の感覚を変える技術だ。
“今すぐ使えるSVGの置き場所”とはつまり、
“今すぐ生活がラクになる場所”のことなのだ。
第8章：運用とテンプレ（設計編）
――SVGを「一発芸」で終わらせないために
このSVGは完成形ではない。
あとから「色・角度・速度・構造」を変えるための、最初の地面だ。
SVGは、作った瞬間がいちばん弱い。
使われ始めたときに、初めて価値が出る。
この章は、SVGの描き方の話ではない。
アニメーションのテクニック集でもない。
ましてやツールの使い方でもない。
ここで扱うのは、どうやってSVGを“回すか”だ。
現場で本当に差が出るのは、
「上手に作れるか」よりも
「壊れずに使われ続けるか」。
SVGは構造を持っている。
構造を持つものは、設計を誤ると一気に腐る。
逆に、設計さえ通っていれば、驚くほど長生きする。
SVGは「完成品」ではなく「部品」として設計する
まず、考え方をひっくり返す。
SVGを
「完成した画像」として扱うと、だいたい失敗する。
SVGは
部品の集合体として扱うと、強くなる。
- 背景レイヤー
- 装飾レイヤー
- 情報レイヤー（テキスト・数値）
- アクセント要素
これらを、最初から役割別に分けて考える。
「このSVGは、どこを触られる前提なのか」
「触られない部分はどこか」
「AIに任せるのはどこか」
「人間が最終判断するのはどこか」
これを決めずに作ったSVGは、
後から触られるたびに壊れる。
逆に言うと、
触られる前提で作られたSVGは、雑に扱われても死なない。
テンプレ化の基本原則：「変える場所」を先に決める
これは“完成したSVG”ではない。
どこを変えるかが、最初から用意されたSVGだ。
テンプレがテンプレとして機能しない理由は単純だ。
どこを変えていいのか分からない
これに尽きる。
だから、テンプレSVGを作るときは、
最初から「変数」を決めてしまう。
- 色はどこが変わる？
- テキストはどこが差し替わる？
- レイアウトは固定か、可変か？
- アニメーションは毎回同じか、任意か？
SVGはXMLだ。
つまり、差し替え前提の設計ができる。
- CSS変数で色を切り替える
<text>は意味単位で分ける- グループ（
<g>）に役割名を付ける - 触らせない部分は極力まとめる
ここで重要なのは、美しさじゃない。
意図が読めることだ。
後から触る人間（未来の自分含む）が、
「ここ触っていいんだな」と一瞬で分かる。
それだけで、テンプレは生き残る。
AI生成SVGは「素材」ではなく「下書き」として扱う
AIが吐いたSVGを、そのまま本番投入すると事故る。
これは経験則だ。
理由はシンプルで、
AIは「成立する形」を出すが、
「運用される形」を保証しない。
だから、AI生成SVGは必ず一度、人間の設計を通す。
- 不要なパスを削る
- レイヤー構造を整理する
- 命名を付ける
- 変数化できる部分を洗い出す
- 触らせたくない部分を固定する
この工程を挟むことで、
AIは“量産装置”から“設計補助”になる。
ここで面白い逆転が起きる。
人間は、
ゼロから描かなくてよくなる代わりに、
「何を残すか」「何を切るか」の判断力を要求される。
これは劣化ではない。
役割の進化だ。
壊れない運用のための「境界線」を引く
SVG運用で一番大事なのは、
境界を曖昧にしないことだ。
- このSVGは「装飾」か？
- それとも「情報」か？
- 編集者は誰か？
- ユーザーは触るか？
- 自動生成されるか？
境界が曖昧だと、
誰かが善意で触って壊す。
特に注意すべき境界は、この二つ。
賑やかし用SVG
→ 触られない前提。最適化重視。軽さ重視。
意味を持つSVG
→ 触られる前提。構造重視。可読性重視。
これを混ぜると、
軽くしたいのに触れない、
触りたいのに軽くない、
という地獄が生まれる。
設計の段階で、どちらかに寄せる。
中途半端に両立させない。
テンプレが文化になるとき、SVGは勝つ
テンプレは、最初は面倒だ。
設計を考える時間がかかる。
でも、一度テンプレが回り始めると、
世界が変わる。
- 毎回ゼロから作らなくていい
- トーンが揃う
- 修正が速い
- AI生成も制御できる
- 引き継ぎが楽になる
そして何より、
「考えるべき場所」が浮き彫りになる。
色？
構造？
情報の置き方？
余白？
視線誘導？
SVGテンプレは、
思考のテンプレでもある。
これは、AI時代にめちゃくちゃ強い。
なぜなら、
AIは無限に案を出せるが、
判断の軸は出してくれないからだ。
テンプレは、その軸になる。
この章の結論：SVGは「設計思想の保存形式」になる
SVGを運用し始めると、
気づくことがある。
SVGは、
単なる画像フォーマットじゃない。
- どう考えて作ったか
- どこを変えたいのか
- どこは変えたくないのか
- 何を大事にしているか
そういう設計思想そのものが残る形式だ。
だからSVGは、
AIと組むと強くなり、
テンプレと組むと文化になる。
そして文化になった技術は、
簡単には消えない。
この章は、終章のための助走だ。
次は「なぜ今SVGなのか」を、
もう一段高い場所から見下ろす。
終章：SVGは、なぜこれからも生き残るのか
――それは「画像」ではなく「言語」だから
SVGが生き残る理由を、性能や便利さだけで語るのは、たぶん誤解の入り口だ。
「軽い」「拡大しても荒れない」「アニメできる」──もちろん全部正しい。だがそれは、SVGの“働き口”の一部でしかない。
SVGが本当にしぶといのは、画像の皮をかぶった「記述」だからだ。
SVGは、描いた結果を保存する形式ではない。“どう描かれているか”を保存する形式だ。
この違いは、未来がAIで満ちていけばいくほど、じわじわ効いてくる。
SVGは流行りの技術ではない
SVGは「新しいから強い」んじゃない。
むしろ逆で、古いのに消えなかったという事実そのものが、強さの証明になっている。
Webの世界は、流行りと忘却の速度が異常に速い。
昨日の“最先端”が今日の“レガシー”になる。
その中でSVGは、何度も「もう要らないだろ」と言われながら、ずっと居座っている。
居座れる技術は、だいたい理由が二つある。
1つは、置き換えがきかないこと。
もう1つは、土台に近い場所にいること。
SVGは後者だ。
時代の波に乗ったんじゃない。波が来ても沈まない地盤として残った。
Webの根幹思想に近い場所にある
WebをWebたらしめているのは、きらびやかな表現力じゃない。
根っこはもっと地味で、もっと原理主義的だ。
- 文章は、テキストとして存在する
- 構造は、構造として扱える
- 参照できる
- 再利用できる
- 検索できる
- 変換できる
つまりWebは「人間に見せる」だけのものじゃなく、機械にも“読める”形で置いておくことが発明だった。
SVGは、このWebの思想に、やけに近い。
画像なのに、構造がある。
絵なのに、要素がある。
見た目なのに、意味が残る。
ここが重要だ。
意味が残る表現は、時代が変わっても殺されにくい。
なぜなら、次の時代の機械がそれを拾って使えるから。
AI時代において「構造を持つ表現」は強い
AI時代になると、世の中のあらゆるものが「生成」される。
文章、画像、音声、動画、デザイン、UI、資料。全部だ。
ここで起きるのは、“表現が増える”ことだけじゃない。
編集と再構成が、日常になる。
生成されたものは、毎回ちょっと直す。
差し替える。色を変える。数字を変える。ラベルを変える。レイアウトを寄せる。用途に合わせる。
そしてまた別の用途へ回す。
この“編集が前提の世界”で、ラスター画像は基本的に不利だ。
賢くなった拡大や補完が助けてくれる場面は増えた。だが、根本は変わらない。
ラスターは「結果の塊」だ。塊は、切ったり貼ったりが面倒だ。
一方SVGは、最初から塊ではない。
文章に近い。構造に近い。設計図に近い。
だからAIにとっても、人間にとっても扱いやすい。
AIが得意なのは、“意味のあるパーツ”を組み替えることだ。
SVGは、まさにそのパーツでできている。
SVGは“描く技術”から“考える技術”へ
SVGを「絵を描くための形式」だと思っているうちは、SVGの半分しか見えていない。
SVGはむしろ、考えを図形として固定する技術に近い。
- この要素はタイトル
- ここが強調
- ここが注釈
- ここが背景
- ここが系列1、ここが系列2
- この線は“流れ”、この矢印は“因果”
- この色は“警告”、この色は“正常”
こういう“意味の付与”ができることが、SVGの本質だ。
そして面白いのは、AI時代はここが逆転することだ。
今までは、「頭の中で考えたものを、手で描いてSVGにする」だった。
これからは、「言葉で意図を伝えると、SVGが出てくる」になる。
つまり、手の器用さよりも先に、設計の明瞭さが問われる。
何を伝えたいのか。何を残したいのか。どういう構造であるべきか。
SVGは、そこに引きずり上げてくる。
“絵心”ではなく、思考の輪郭が問われる技術。
それが、AI時代のSVGだ。
SVGは「画像」ではなく「言語」だから、生き残る
ここまでの話を、一言でまとめるならこれだ。
SVGは画像ではない。
言語である。
言語は死ににくい。
なぜなら、言語は「伝える」ための基盤だからだ。
表現が派手になるほど、言語の価値は上がる。
生成が簡単になるほど、言語の価値は上がる。
情報が増えるほど、言語の価値は上がる。
AI時代というのは、「世界が言語化されていく時代」でもある。
画像も、音も、動画も、行動も、全部が記述として扱われる方向へ進む。
その中でSVGは、最初から“記述側”にいた。
だから復権した。
そしてたぶん、これからも残る。
流行りではなく、地形だから。
この記事を読んだあと、読者がやってみる一歩
最後に、いちばん現実的な話を置いておく。
SVGの未来は、壮大な思想だけで決まらない。
人が触るかどうかで決まる。
ここでおすすめしたい“一歩”は、凝ったことじゃない。
作品を作れ、なんて言わない。
ただ、次のどれかを一回やってみればいい。
- 既存のSVGを開いて、中身を眺める（ただのXMLだと体で理解する）
- テキストを一箇所だけ差し替えて保存してみる（“編集できる画像”を体感する）
- 色を一括置換してみる（“再利用できる素材”を体感する）
- 1つ図形を追加してみる（“構造を足す”感覚を知る）
- CSSアニメーションを一つだけ付けてみる（“動く＝実行じゃない”を腹落ちさせる）
この一歩の時点で、もう気づくはずだ。
SVGは「作るもの」じゃなく、運用できるものだと。
素材であり、部品であり、言語であり、資産だと。
そして、そこから先に行きたくなった時。
AIがいる。
言葉で指定して、図形が返ってくる世界がある。
SVGは、そこでまた面白くなる。
“描ける人”の道具から、
“考えられる人”の道具へ。
だから、これからも生き残る。
画像ではなく、言語だから。
