SVG シンボルスプライト
SVG アイコンを 1 つのシンボルスプライトにまとめる
SVG アイコンのフォルダーを 1 つの再利用可能なスプライトに結合します。各ファイルは、既製の <use> スニペットを含む <symbol> になり、プレフィックス付きの内部 ID により、グラデーション、マスク、クリップ パスの衝突が防止されます。
これらの設定はスプライト全体に適用されます。
スプライトのプレビュー
SVG ファイルを追加するとスプライトを作成できます。
ファイルがありません。上にドロップするか、「ファイルを選択」を押してください。
シンボルスプライトとスプライトシートの違い
シンボルスプライトは、アイコンごとに <symbol> を収めた 1 つの SVG ファイルです。<use> でシンボルを参照するまで何も描画されないため、アイコンはベクターのままで、CSS からスタイルを指定でき、どんなサイズでもくっきりしています。ユーザーインターフェースのアイコンセットに向くのはこちらです。
スプライトシートは、すべてのアイコンをグリッドに並べた 1 枚の画像で、background-position か JSON のフレーム表を使って描画します。アイコンは決まった座標に置かれたピクセルなので、ゲームエンジンや canvas のレンダラーが求めるのはこの形式で、<use> をまったく使えない環境でも必要になります。
SVG スプライトシート生成ツールを開くシンボルスプライトを使うのはどんなとき
シンボル スプライトは、1 つの再利用可能な SVG ファイルにアイコン セットを保持し、すべてのアイコン インスタンスは、繰り返されるパスのブロックではなく、短い <use> 要素になります。これは、同じアイコンを再利用するナビゲーション、ボタン、テーブル、その他のインターフェイスに役立ちます。シンボルはベクター マークアップのままであるため、鮮明なままであり、CSS から色とサイズを継承できます。
SVG シンボルスプライトをオンラインで作成する方法
- 1
SVG アイコンをドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件で、一覧の並び順がそのままシンボルの並び順になります。
- 2
外部ファイルかインラインかを選び、アイコンを最適化するか、viewBox をそろえるかを決めると、アイコンのグリッドがスプライト自体から組み直されます。
- 3
「すべて保存」を押すと sprite.svg をダウンロードできます。使用例を有効にしている場合は、sprite.svg と usage.html を収めた ZIP になります。
プライバシー：ファイルはブラウザから出ません
変換は、JavaScript および WebAssembly を使用してブラウザーでローカルに実行されます。ファイルのアップロードやサーバー側の変換がないため、追加したファイルはデバイス上に残ります。
ローカル処理は、機密ロゴ、内部文書、未公開のクライアント アートワークを保護するのに役立ちます。ページと変換コードは使用中にキャッシュされるため、すでに開いているツールはネットワーク接続がなくても引き続き動作できます。
よくある質問
2 つのファイルから同じ ID ができたらどうなりますか？
ID はファイル名から拡張子を除いた部分を小文字にしてスラッグ化したもので、「Arrow Left.svg」なら arrow-left になります。2 つのファイルから同じ ID ができた場合は、最初の 1 つがその ID を保ち、あとに続くものには -2、-3 と付きます。一覧でファイル名を変更すると ID もすぐに変わり、並び替えやドラッグでも変わります。並び順で最初にあるファイルが、接尾辞の付かない ID を使うためです。
外部スプライトとインラインスプライト、どちらを使うべきですか？
外部スプライトは、<use href="sprite.svg#icon-id"> で参照する sprite.svg ファイルです。ほかのアセットと同じようにキャッシュされ、HTML も小さく保てますが、そのぶんリクエストが 1 回増え、CORS で許可されていない限り同一オリジンから配信する必要があります。インラインスプライトは、同じマークアップを隠した <svg> の中に貼り付けてページに置き、<use href="#icon-id"> で参照するものです。リクエストは不要で必ず参照が解決しますが、そのバイト数が、使うすべての HTML ドキュメントで繰り返されます。
スプライトを作るとアイコンの見た目は変わりますか？
変わりません。各ファイルのルートの <svg> は、同じ viewBox を持つ <symbol> になり、その子要素は ID への接頭辞付け以外そのまま引き継がれます。「SVG を最適化」は、SVG 最適化ツールと同じ安全な処理一式を実行するので、コメント、エディタのメタデータ、余分な属性は取り除かれ、ジオメトリはそのまま残ります。「viewBox をそろえる」は各アイコンを正方形の座標系の中で中央に置き直すもので、変わるのは座標系だけで絵柄は変わりません。<script> 要素と on* 属性は必ず取り除かれます。スプライトは最終的にページの中にインライン展開されるためです。