SVG (Scalable Vector Graphics) is an XML-based vector image format that can be embedded inline in HTML. Inline SVG is especially useful for UI icons because you can style it with CSS, control colors with currentColor, and manage accessibility with ARIA.
SVG は、図形（線・円・多角形など）を「数学的な情報」として持つ ベクター画像の仕組みです。写真のような「点の集まり（ピクセル）」ではないので、拡大してもギザギザしにくく、アイコンやロゴの表示に向いています。
このページでは インラインSVG（HTMLの中に <svg> を直接書く形）を基本形として扱います。理由はシンプルで、制作会社の現場で UIアイコン用途が最も多く、CSSで制御しやすく、初学者が「なぜ動かないか」をHTML/CSSの延長で理解しやすいからです。
SVG が「何のために存在する仕組みか」を理由付きで説明できるcurrentColor を使って単色アイコンの色をCSSで制御できるaria-hidden など）ができるSVG って何？<svg> をHTMLに直接書くと、SVGはDOM（要素のツリー）として扱えます。だからCSSやJavaScriptで操作しやすいです。直感の覚え方：SVGは「図形でできた画像」。アイコンと相性が良く、インラインならCSSで扱いやすい、でOKです。
SVG は、2Dの図形やテキストを、解像度に依存しない形（ベクター）で表現するための仕様です。ブラウザがSVGを解釈して描画するため、同じデータでも表示サイズに合わせて滑らかにレンダリングできます。
SVGはXMLとして定義されていますが、HTML文書の中にインラインで書く場合、ブラウザはHTML構文としても扱います。実務では「XMLの厳密さで詰まる」より、まずは HTMLの中で <svg> を書ける ことを軸に理解すると進めやすいです。
fill や stroke をCSSで変えたり、イベントを付けたりできます。<img> でSVGを読み込む方法は壊れにくい一方、内部の図形へCSSを当てる、といった操作は基本的にできません（別物として扱われます）。まずは「コピペで動く」最短の型を作ります。ここでは インラインSVG + 単色アイコン + CSSで色を制御 を基本形として覚えます。
ポイントは次の3つです。
<svg> に viewBox を付ける（拡大縮小の基準になる）fill="currentColor"（または stroke="currentColor"）にするaria-hidden="true" で「読ませない」HTML
<button type="button" class="btnIcon">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
<path fill="currentColor" d="M12 2a10 10 0 1 0 0 20a10 10 0 0 0 0-20zm1 5v4h4v2h-6V7h2z"></path>
</svg>
<span>履歴</span>
</button>CSS
.btnIcon {
display: inline-flex;
align-items: center;
gap: 0.5em;
}
.icon {
width: 1.25em;
height: 1.25em;
vertical-align: middle;
}
.btnIcon {
color: #0188ff;
}表示デモ（currentColor で色が連動する）
デモ：ボタン内のアイコン（インラインSVG）
下の2つは同じSVGです。親の文字色を変えるだけで、アイコンの色も変わります。
見どころ：SVG側の fill が currentColor なので、CSSの color がそのまま塗り色になります。
HTML
<button type="button" class="btnIcon">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
<path fill="currentColor" d="..."></path>
</svg>
<span>履歴</span>
</button>実務メモ：width と height はSVGに直接書くより、まずはCSSで管理すると運用が安定します（ボタン、ナビ、カードなど、置き場所が変わっても統一しやすい）。
インラインSVGを基本にすると、HTMLの理解がそのまま効きます。ただし、SVG特有の「詰まりどころ」もあります。
<svg> を置ける場所<button> の中に入れられない要素がある、など）。まずは「インラインSVGはボタンに置ける」と覚えればOKです<svg> の中に入れるもの<path> / <circle> / <rect> / <line> など<title> / <desc>（情報目的のSVGで役立つ）<defs>（再利用・グラデーションなどで使うが、初学者は深追いしない）viewBox がないviewBox がないと、拡大縮小の基準が決まりませんviewBox="0 0 24 24" を付ける で進めるのが安全ですstroke-width のようなハイフン区切り属性が多いですstroke-width のままでOKですが、JavaScriptで操作するときはプロパティ名が変わる場合があります（このページでは深入りしません）<img src="icon.svg"> のように外部読み込みすると、中身の <path> にはCSSを当てられません（別の文書として扱われます）。fill と stroke の違いがあいまいfill は「塗り」、stroke は「線」です。単色アイコンでも、線で描くタイプは stroke を currentColor にする必要があります。width / height をSVGに直書きすればOKだと思ってしまう<title> が必要だと思ってしまうaria-hidden="true" で隠す判断が基本です。意味があるSVG（図・ロゴなど）は補足として扱います。制作会社の実務で最も多いのは、UIアイコンとしてのSVGです。理由は「軽い」「拡大してもキレイ」「CSSで色が統一できる」からです。
fill / stroke は currentColor にして、親の color と連動させるaria-hidden="true"、ボタンの意味はテキストや aria-label で持たせるcurrentColor 前提の制御には向きません（色を変えない前提で置く、が基本です）。<img> によるSVG参照<use> による参照<defs> / <symbol> / 参照関係 / 同一生成元 / CSP など、初学者が詰まりやすい要素が多いです。このページでは「なぜ使われるか」「なぜ難しいか」の紹介に留めます。fill が固定色（例：#000）になっている。fill="currentColor"（線なら stroke="currentColor"）にする。デザインツール書き出しSVGは固定色が多いので、まずそこを確認する。viewBox がない、または図形の座標が viewBox からはみ出している。viewBox を持つデータを使う。違和感がある場合は「座標の範囲（viewBox）」と「実際の図形（path）」のズレを疑う。pointer-events="none" を付けることを検討する（ただし用途次第）。aria-hidden="true"。意味を伝えるのはテキスト（または適切なARIA）に寄せる。落とし穴：「表示される」だけで安心しないでください。SVGは viewBox・色（fill/stroke）・アクセシビリティ判断の3点が揃って初めて “実務で扱いやすいデータ” になります。
このサイトでは 装飾目的のSVG（UIアイコン） を主軸に扱います。初学者はまず「読ませない判断」を身につけた方が混乱しにくいからです。
aria-hidden="true"aria-label（不可視）に持たせます。<button aria-label="検索">...</button> のように名前を与えます<button> で、SVG自体は隠す、が基本です図・意味を持つロゴなど、SVG自体に情報がある場合は「読ませる」設計になります。最小の考え方だけ押さえます。
<title> / <desc><title> と <desc> を置くと、意味の説明を付けられます。情報目的のSVGでは候補になります。aria-label / aria-labelledbyここで止まりがち：title と aria-label を両方つけて二重に読まれる、などが起きます。まずは「装飾は隠す」「情報は名前を付ける」の2択に分けて考えると整理できます。
viewBox と width / heightviewBox は “中の座標系” を決めますwidth / height（またはCSSのサイズ）は “外の表示サイズ” を決めますviewBox で座標を固定し、サイズはCSSで統一」が扱いやすいですfill / stroke と currentColorfill="currentColor"stroke="currentColor" と fill="none"currentColor はCSSの color を参照します（親でまとめて管理しやすい）<img> での参照とCSS<img> は “画像としてのSVG” なので、中の図形をCSSでいじる用途には向きません。差し替えや納品で「壊れにくさ」を優先する場合に使います。<use> と参照関係（概要）この章は「試験で迷いがちな判断」を、短く言い切って整理します（学科・実技どちらにも効く形）。
SVGviewBoxcurrentColorcolor を参照する値。単色アイコンの fill / stroke と相性が良い。aria-hiddencurrentColor になっているかを疑うaria-hidden）。意味はテキスト/親要素で持つ<img> は壊れにくいが、中身をCSSで自由にいじる用途には向かないaria-hidden）も設計しやすいからです。color を変えてもアイコンの色が変わらない。まず疑うべき所は？fill / stroke が固定色になっていないかです。単色アイコンなら currentColor を使います。aria-label などで名前を付け、SVG自体は aria-hidden="true" にします。装飾は隠し、操作の意味は親に持たせるのが基本です。currentColor で色を変えるべき？currentColor で統一しやすく、サイズも柔軟です。<img> で読み込むのはダメですか？viewBox は必須ですか？viewBox がないとサイズ変更で崩れやすく、切り分けも難しくなります。fill と stroke はどう使い分けますか？fill は塗り、stroke は線です。線アイコンは stroke="currentColor" + fill="none" が基本形です。<title> を入れるとアクセシブルになりますか？fill / stroke が固定色。currentColor を使う（塗りは fill、線は stroke）。viewBox 不備、または座標範囲のズレ。viewBox を確認し、必要ならSVGデータを見直す。pointer-events="none" を検討。<img>）の中身をCSSで変えようとして動かない<img> は画像として扱うため。<use> が参照先を見つけられず表示されない最後に、迷ったときに戻ってくるチェックリストです（実務でも試験でも、ここに戻って判断できます）。
fill/stroke に currentColor（親の color と連動）viewBox を疑うaria-hidden="true"。意味はテキスト/親要素で持たせる<img> は壊れにくいが、CSSで中身をいじる用途には向かない<use> は有効だが、初学者は参照関係で詰まりやすい。まずはインラインで基礎を固める