SVGはベクター画像形式(XMLベース)なので、ぼやけることなくどのサイズにもスケーリングできます。主に2つの方法で含めることができ、それぞれにトレードオフがあります。
インラインSVG — HTMLに直接マークアップを含める
html
<svg width="24" height= = = =>
メリット: CSSで(fill、strokeなど)スタイリングできり、パーツをアニメーション化でき、currentColor(テキスト色を継承)で色を変更でき、イベントに応答できます。実際のDOM要素だからです。追加のHTTPリクエストがありません。
デメリット: HTMLが肥大化し、キャッシュされず、繰り返されるアイコンはマークアップが重複します。
<img> — ファイルとして参照<img src="logo.svg" alt="Company logo" width="120" />
メリット: ブラウザーにキャッシュされ、HTMLが整潔に保たれ、シンプルです。デメリット: CSS/JSで内部をスタイリングまたはスクリプト化することができません — 不透明な画像です。
Need to recolor/animate/interact with the SVG → inline SVG
Static logo/illustration, want caching + clean HTML → <img src=".svg">
Many repeated icons → an SVG sprite (<use>) or an icon component
<svg role="img" aria-label="Settings">...</svg> <!-- meaningful icon -->
<svg aria-hidden="true">...</svg> <!-- decorative: hide from AT -->
インラインSVG対<img>SVGの選択は、グラフィックをスタイリング/アニメーション化する必要があるか(インライン)、単に効率的に表示するだけか(<img>)によって異なります。
ホバーでカラーが変わるかテーマが変わるアイコンはインラインで(通常はコンポーネントとして)、静的なブランドアセットは<img>で配信します。
どちらの方法でも、ベクターはあらゆる解像度で鮮明のままです — アイコンとロゴに最適です。