`<circle cx="50" cy="50" r="40" fill="blue"/>` のように、XML タグで図形の座標・色・形を記述します。テキストなので拡大しても劣化せず、アイコンやロゴ、グラフに向きます。
技術用語
284
SVG
エスブイジー
体験区分：少しだけ触った
推奨読者レベル：Level 2-3
何をしてくれるか
どこで出会うか
AI に「丸い青いアイコンを作って」と頼むと SVG コードを返すことがあります。Web のロゴや図表、データ可視化にも使われ、HTML（F-4）に直接埋め込む場面で目にします。
比較図
2026.04·ready
「SVG なら Claude に直接生成してもらえるから、図のたたき台に向きます。」
SVGの見方
285
この用語の見どころ
1
役割
XML タグで図形を記述するベクター画像形式です。
2
うれしさ
テキストなので diff・検索・AI 生成が可能です。
3
注意点
写真など複雑な画像は PNG や JPEG のほうが適しています。
4
どこで役立つか
アイコン・ロゴ・グラフ・データ可視化に向きます。
5
はじめに
HTML へのインライン埋め込みと、CSS での色変更の 2 点が基礎です。
6
深掘り先
HTML（F-4）、CSS（F-5）、JavaScript（F-1）
非エンジニアのつまずき
- 画像のつもりで開くとテキストの羅列が出てきて驚きました
- できることの多さに期待が膨らむ一方、実際には難しい場面もあります
私のコメント
- 第一印象:軽くしっかりした画像が出せ、LLM に書かせられると知って驚きました
- 良い点:LLM が得意で再現性があり、後から編集もできる点が優れています
- ダメな点:LLM の精度がまだ足りず、CAD 相当のレベルには至っていません
- 誰向けか:編集可能な画像を作りたい人向けで、今後の可能性に注目です
開発フローでの位置
要件整理
AI 生成
HTML 埋め込み
CSS 調整
確認
関連用語
F-09·term_tool
バイブコーディング図鑑