JSON マップを使用して SVG スプライトシートを生成する

SVG スプライトシートとは

スプライトシートは、たくさんの小さな画像をグリッドに収めた 1 枚の画像と、それぞれがどこにあるかを示すマップの組み合わせです。ここでの元データは SVG ファイルで、1 つずつ専用のセルに描画され、できあがったシートは PNG、WebP、または 1 枚の SVG キャンバスとして書き出されます。

これは、SVG シンボル スプライトとは異なります。シンボル スプライトは、<use> の ID によってページ参照されるアイコンごとに <symbol> を持つ 1 つの SVG ファイルであるため、各アイコンはベクター マークアップのままで、CSS で色付けできます。スプライトシートは視覚的なキャンバスです。スプライトシートを消費するものはすべて、座標によってフレームを切り出します。 HTML アイコンのシンボル スプライト、キャンバスのスプライトシート、WebGL、または CSS 背景スプライトを選択します。

スプライトシートを使うのはどんなとき

スプライトシートは、たくさんの小さな画像を 1 つのファイルにまとめます。ゲームやアプリはリクエスト 1 回で済み、すべてのフレームを 1 枚のテクスチャに収めておけます。canvas や WebGL のレンダラーは矩形を指定して描画し、CSS は background-position で位置を決め、その座標は JSON マップが教えてくれるので、手で測る必要はどこにもありません。読み込む側がピクセルで動いているなら、選ぶのはこちらです。HTML の中で自在に拡大縮小し、色を継承するアイコンが欲しい場合は、代わりに SVG シンボルスプライトを作ってください。

SVG ファイルからスプライトシートを作成する方法

1. 1

   SVG ファイルをドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件までです。

2. 2

   グリッド（列数、行数、セルサイズ、余白、間隔）を決め、続けて配置、拡大率、並び替え、出力形式を設定します。変更するたびにシートが描き直されます。

3. 3

   「すべて保存」を押すと、シートと JSON のフレームマップを収めた ZIP を 1 つダウンロードできます。

プライバシー：ファイルはブラウザから出ません

変換は、JavaScript および WebAssembly を使用してブラウザーでローカルに実行されます。ファイルのアップロードやサーバー側の変換がないため、追加したファイルはデバイス上に残ります。

ローカル処理は、機密ロゴ、内部文書、未公開のクライアント アートワークを保護するのに役立ちます。ページと変換コードは使用中にキャッシュされるため、すでに開いているツールはネットワーク接続がなくても引き続き動作できます。

よくある質問