外部SVGスプライトファイル

外部SVGスプライトファイル

外部SVGスプライトは、すべての<symbol>定義を含むスタンドアロンの.svgファイルです。すべてのページにスプライトを埋め込む代わりに、外部URLから参照します：

<svg width="24" height="24">
  <use href="/assets/sprite.svg#icon-home"/>
</svg>

ファイル構造

外部スプライトファイルはインラインスプライトと同じ構造です：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <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>

ブラウザキャッシュ

外部スプライトの主な利点はキャッシュです。ブラウザはsprite.svgを一度ダウンロードしてキャッシュし、すべてのページで再利用します。大規模アイコンセットを持つマルチページサイトでは、インラインスプライトと比較して大幅な帯域幅の節約が可能です。

適切なキャッシュヘッダーを設定してください：

Cache-Control: public, max-age=31536000, immutable

アイコン変更時のキャッシュバストにはファイル名にコンテンツハッシュを使用します（例：sprite.abc123.svg）。

クロスオリジン制限

外部<use>参照は同一オリジンポリシーに準拠する必要があります。スプライトファイルはページと同じドメインから配信されるか、サーバーにCORSヘッダーを含める必要があります。

ブラウザサポート

外部SVGスプライト参照はすべてのモダンブラウザで動作します。IE 11以前は外部<use>参照をサポートしていません。IEサポートが必要な場合はsvgxuseポリフィルまたはsvg4everybodyライブラリを使用してください。

プリロード

パフォーマンスが重要なアプリケーションでは、スプライトファイルをプリロードします：

<link rel="preload" href="/assets/sprite.svg" as="image" type="image/svg+xml">