インラインSVGとimg・objectの比較
用途に適したSVGの埋め込み方法を選びます
「インラインSVGとimg・objectの比較」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
SVGを埋め込む3つの方法
SVG（Scalable Vector Graphics）は、3つの方法で埋め込むことができます:
<img src="icon.svg">— シンプルでキャッシュされますが、JS/CSSからアクセスできません<object data="chart.svg">— インラインで操作できますが、別ドキュメントとして扱われます- HTML内にインラインSVGとして記述 — CSS/JSに完全にアクセスでき、追加のリクエストも発生しません
img srcによるSVG
最も簡単な方法は、SVGを画像として参照することです:
<img src="logo.svg" alt="Company logo" width="120" height="40">
<!-- Pros: simple, cached by browser, clean HTML -->
<!-- Cons: cannot style with CSS, no JS interaction,
cannot use SVG filters or animations from CSS -->CSS background-imageによるSVG
装飾用のアイコンには、SVGをCSSの背景として使用します:
.icon-check {
background-image: url('/icons/check.svg');
background-size: contain;
background-repeat: no-repeat;
width: 1rem;
height: 1rem;
}
<!-- Decorative: not in accessibility tree, no alt text needed -->object要素によるSVG
インタラクティブなSVGには、<object>を使ってSVGを埋め込みます:
<object
type="image/svg+xml"
data="interactive-chart.svg"
width="800"
height="400"
aria-label="Interactive revenue chart"
>
<!-- Fallback: -->
<img src="chart-static.png" alt="Revenue chart">
</object>
<!-- SVG can have its own scripts
SVG document is somewhat isolated from parent page -->インラインSVG
完全に制御できるように、SVGをHTMLに直接埋め込みます:
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
aria-hidden="true"
focusable="false"
>
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
<path d="M2 17l10 5 10-5"/>
</svg>インラインSVGの利点
インラインSVGを使用する理由:
- CSSによる完全なスタイリング:
fill、stroke、トランジション、アニメーション - JavaScriptによる操作: SVG要素を選択し、イベントを監視できます
- currentColor: 親要素のCSSから色を継承します
- 追加のHTTPリクエストが発生しません
- roleとtitleを指定してアクセシビリティツリーに含めることができます
インラインSVGの欠点
インラインSVGの欠点:
- HTMLファイルのサイズが大きくなります
- ブラウザーによって個別にキャッシュされません
- 同じSVGを複数のページで重複なしに再利用するのが簡単ではありません
- 同じアイコンを繰り返し使うとコードが重複します
スプライト用のuse要素
SVGアイコンを一度だけ定義し、<use>で参照します:
<!-- Icon sprite (often hidden): -->
<svg style="display:none">
<symbol id="icon-close" viewBox="0 0 24 24">
<path d="M18 6L6 18M6 6l12 12"/>
</symbol>
<symbol id="icon-check" viewBox="0 0 24 24">
<path d="M20 6L9 17l-5-5"/>
</symbol>
</svg>
<!-- Use the icons: -->
<svg aria-hidden="true"><use href="#icon-close"/></svg>
<svg aria-hidden="true"><use href="#icon-check"/></svg>アクセシブルなSVG
インラインSVGをアクセシブルにします:
<!-- Informative SVG: -->
<svg role="img" aria-labelledby="svg-title">
<title id="svg-title">Revenue growth chart Q1-Q4 2024</title>
<!-- chart paths -->
</svg>
<!-- Decorative SVG: -->
<svg aria-hidden="true" focusable="false">
<!-- decorative paths -->
</svg>
<!-- focusable="false" needed for IE to prevent tab focus -->currentColorの活用
currentColorを使って、CSSからテキストの色を継承します:
<button class="btn btn-primary">
<svg aria-hidden="true" width="16" height="16">
<path fill="currentColor" d="M10 6H6v4H2v4h4v4h4v-4h4v-4h-4V6z"/>
</svg>
Add Item
</button>
<!-- fill="currentColor" inherits the button's text color
When button is hovered/focused, icon color changes too
No need for separate icon color rules -->クイックチェック
img srcによるSVGと比べた場合、インラインSVGの主な利点は何ですか？
まとめ：SVGの埋め込み
SVG埋め込みの要点:
<img src>— シンプルで、CSS/JSからアクセスできませんが、キャッシュされます- CSS background-image — 装飾専用
<object data>— インタラクティブなSVGですが、ある程度分離されています- インラインSVG — CSS/JSで完全に制御でき、追加のリクエストが発生しません
<symbol>+<use>によるSVGスプライト — 効率的に再利用できます
よくある質問
「インラインSVGとimg・objectの比較」レッスンは無料ですか？
はい。「インラインSVGとimg・objectの比較」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「インラインSVGとimg・objectの比較」で何を学びますか？
用途に適したSVGの埋め込み方法を選びます ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「インラインSVGとimg・objectの比較」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- インラインSVGとimg・objectの比較
- SVGの基本図形 rect circle path
- SVGのviewBoxとレスポンシブな拡大縮小
- CSSとSMILによるSVGアニメーション