HTMLにインラインSVGスプライトを埋め込む
ゼロレイテンシーのアイコンレンダリングのためにSVGスプライトをHTMLドキュメントに直接埋め込む方法を学びます。配置、表示非表示、外部スプライトファイルとのトレードオフを理解します。
Implementation
詳細な説明
インラインSVGスプライト
インラインSVGスプライトは、通常<body>タグの開始直後にHTMLドキュメントに直接埋め込まれます。このアプローチにより、スプライトファイルを読み込むための追加のHTTPリクエストが不要になり、即座にアイコンがレンダリングされます。
基本構造
<body>
<!-- 非表示のSVGスプライト -->
<svg xmlns="http://www.w3.org/2000/svg"
style="display:none">
<symbol id="icon-home" viewBox="0 0 24 24">
<path d="M3 12l2-2m0 0l7-7 7 7M5 10v10..."/>
</symbol>
<symbol id="icon-search" viewBox="0 0 24 24">
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.3-4.3"/>
</symbol>
</svg>
<!-- どこでもアイコンを使用 -->
<nav>
<svg width="20" height="20">
<use href="#icon-home"/>
</svg>
Home
</nav>
</body>
スプライトの非表示
スプライトコンテナはレイアウトでスペースを取らないように非表示にする必要があります。いくつかのアプローチがあります：
style="display:none"— 最も一般的。要素をレイアウトから完全に除去します。すべてのブラウザで動作します。hidden属性 — HTML5のセマンティックな非表示。ほとんどのブラウザでdisplay:noneと同等です。width="0" height="0"とaria-hidden="true"—display:noneが一部のSVGレンダリングエンジンで問題を引き起こす可能性がある場合に使用。
visibility:hiddenはレイアウトでスペースを取るため避けてください。
利点
- ゼロレイテンシーレンダリング — HTMLが解析されるとすぐにアイコンが利用可能、追加のネットワークリクエストなし
- クロスオリジンの問題なし — すべてが同じドキュメント内
- CSPと互換 — ホワイトリストに追加する外部ファイルなし
- キャッシュの複雑さなし — スプライトはページの一部
欠点
- ページ間でのキャッシュ不可 — スプライトマークアップがすべてのページで繰り返され、各ページのHTMLサイズが増加
- 非同期読み込み不可 — headに配置するとスプライトがレンダリングをブロック
- 初期HTMLサイズの増加 — 大規模アイコンセット（100以上）の場合、すべてのページに50-100KBが追加される可能性
インラインスプライトを使用する場合
インラインスプライトは、HTMLが一度読み込まれ、コンテンツ欠落のフラッシュなしにアイコンを即座にレンダリングする必要がある、小～中規模のアイコンセット（50個未満）のシングルページアプリケーションに最適です。
ユースケース
シングルページアプリケーション、ランディングページ、アイコンレンダリング速度が重要でHTMLサイズ増加が許容される程度にアイコンセットが小さいプロジェクト。