SVGスプライトとは? アイコンを1つのファイルにまとめる

SVGスプライトは、多数の個別のSVGアイコンを1つのファイルにまとめるため、ブラウザは1回のリクエストでそれらをダウンロードし、それぞれをidで参照します。

数十個のアイコンを別々のファイルとして読み込むことは、数十回のリクエストを意味します。SVGスプライトはそれらを1つのファイルにまとめ、各アイコンは使われる場所でidによって参照されます。これは、旧来のアイコンフォントやimage spriteの手法に対する、鮮明でスケーラブルなモダンな答えです。個別のソースアイコンからスプライトを生成することは、CIに収まるbuildのステップです。

スプライトの仕組み

各アイコンは、1つのSVGファイル内でidを持つsymbolになります。マークアップでは、小さなuse要素がsymbolをidで参照するため、アイコンごとに個別のリクエストをせずにアイコンが描画されます。

なぜ他の手法より優れているのか

アイコンごとに1回ではなく、1回のリクエストで済みます。
ベクターアイコンは、どんなサイズでもどんなディスプレイでも鮮明なままです。
rasterスプライトと違い、アイコンをCSSでスタイルできます。

スプライトとインラインSVGの比較

各SVGをインライン化するとリクエストは避けられますが、HTMLが肥大化し、何度も使われるアイコンが重複します。スプライトはアイコンを一度だけ集約して参照するため、同じアイコンが繰り返し現れる場合に適しています。

スプライトの生成

buildツールは個別のアイコンファイルを収集し、それぞれを最適化し、安定したidでスプライトに組み立てます。buildで行うことで、スプライトがソースアイコンと自動的に同期し続けます。

CI/CDにおけるSVGスプライト

buildは各アイコンを最適化し、スプライトを生成し、cacheのためにcontent-hashを付けるため、1つのcache可能な静的アセットとして出荷されます。スプライトはソースから生成されるので、アイコンを追加または変更すると、pipelineの実行ごとに決定的に再生成されます。

重要なポイント

SVGスプライトは、多数のアイコンをidで参照される1つのファイルにまとめます。
リクエストを削減し、アイコンを鮮明でCSSでスタイル可能に保ちます。
CIはスプライトを1つのcache可能な静的アセットとして生成しhashを付けます。