インラインSVG と img タグのSVGはいつ使い分けるべきか?

Question

Accepted Answer

SVGは**ベクター**画像形式（XMLベース）なので、ぼやけることなくどのサイズにもスケーリングできます。主に2つの方法で含めることができ、それぞれにトレードオフがあります。 ## インラインSVG — HTMLに直接マークアップを含める ```html ``` **メリット:** CSSで（`fill`、`stroke`など）スタイリングできり、パーツをアニメーション化でき、`currentColor`（テキスト色を継承）で色を変更でき、イベントに応答できます。実際のDOM要素だからです。追加のHTTPリクエストがありません。 **デメリット:** HTMLが肥大化し、キャッシュされず、繰り返されるアイコンはマークアップが重複します。 ## SVG via `` — ファイルとして参照 ```html

``` **メリット:** ブラウザーにキャッシュされ、HTMLが整潔に保たれ、シンプルです。**デメリット:** CSS/JSで内部をスタイリングまたはスクリプト化することが**できません** — 不透明な画像です。 ## 判断ガイド ```text Need to recolor/animate/interact with the SVG → inline SVG Static logo/illustration, want caching + clean HTML →

Many repeated icons → an SVG sprite () or an icon component ``` ## アクセシビリティ ```html ``` ## なぜ重要なのかインラインSVG対``SVGの選択は、グラフィックを**スタイリング/アニメーション化する必要があるか**（インライン）、単に**効率的に表示するだけか**（``）によって異なります。ホバーでカラーが変わるかテーマが変わるアイコンはインラインで（通常はコンポーネントとして）、静的なブランドアセットは``で配信します。どちらの方法でも、ベクターはあらゆる解像度で鮮明のままです — アイコンとロゴに最適です。

インラインSVG — HTMLに直接マークアップを含める

SVG via <img> — ファイルとして参照

判断ガイド

アクセシビリティ

なぜ重要なのか

SVG via `<img>` — ファイルとして参照