スプライトを作る
☞ すべてブラウザ内で処理 — アップロードは一切ありませんSVG アイコンをここにドロップ
またはクリックして選択 —— 最大 40 個の SVG ファイル
プレビュー
アイコンを出したい場所にこれを貼る
OneImageTool
無料画像ツール
スプライトを作る
アイコンをドロップすると、symbol 要素だけのスプライトファイルと、各アイコンの use 行が手に入ります。そのまま貼り付けられます。
またはクリックして選択 —— 最大 40 個の SVG ファイル
プレビュー
1 ファイル、アイコン 1 つにつき参照 1 本
個別のファイルとして読み込むアイコンは、それぞれが 1 本のリクエストであり、1 件のキャッシュであり、1 フレーム遅れて届く機会でもあります。スプライトはそれらを 1 つの文書に畳み込みます。各アイコンは自分の viewBox を持つ symbol になり、それ自体は何も描かず、必要な場所で use href="#icon-name" として取り出します。参照が URL ではなく id で行われるため、アイコンは currentColor と外側の svg に載せた CSS を継承します —— img タグを並べる方式にはできないのがまさにこれです。
難しいのは包むことではなく、名前です。デザインツールから書き出した 40 個のアイコンには、「a」という名前のグラデーションが 40 個、「cls-1」というクラスが 40 個、平気で入っています。同じ文書を共有した途端、後のものが前のものの塗りを**静かに**奪います。そこで各アイコン内部の id とクラス名は、そのアイコン自身の symbol id を接頭辞として一括で改名し、参照が隠れうる 4 か所 —— 属性の url()、フラグメントを指す href、style 属性、そして style 要素の中の CSS —— もすべて書き換えます。アイコン同士は干渉しません。
3 ステップ
一度に最大 40 個の SVG を、ブラウザ内で解析します。矢印で並べ替えた順序が、そのままファイル内の symbol の順序になります。
各 symbol は「接頭辞 + ファイル名」で命名され、結果は一覧に出ます。同名のファイルには番号が付くので、2 つの symbol が同じ id を名乗ることはありません。
スプライトはページに貼るか、sprite.svg として配信します。スニペットはアイコン 1 つにつき貼り付け可能な 1 行を返します。
かんたん回答
2 通りあります。スプライト全体を HTML の先頭近くに貼り、use href="#icon-name" で参照する方法。あるいはファイルとして配信し、use href="/sprite.svg#icon-name" で参照する方法。前者はリクエストを 1 本節約でき、後者は 1 つのスプライトを全ページでキャッシュさせられます。
ファイル名です。小文字にし、英数字以外をハイフンに変え、前に接頭辞を付けます。既定の接頭辞なら arrow_left.svg は icon-arrow-left になります。
XML の id は数字で始められませんが、2-arrow.svg のようなファイル名はよくあります。接頭辞はページ側に既にある id との衝突も防ぎます。変更も空にもできますが、空にすると id が不正になる場合は代わりの接頭辞が付き直します。
後のほうに番号が付きます。付けないと 2 つの symbol が同じ id を持ち、そこへの参照はすべて最初のアイコンを描きます —— エラーではなく、静かに違う絵が出るという結末です。
残ります。各アイコン内部の id とクラス名はそのアイコンの symbol id を接頭辞に改名され、参照も一緒に書き換わります：属性の url()、フラグメントの href、style 属性、style 要素の中の CSS。
アイコンが fill="currentColor" を使っていれば可能です。参照を包む svg に color を指定すればアイコンが追従します。塗りを直書きしたアイコンはその色のまま —— スプライトはあなたの配色を書き換えません。
一度に 40 個までです。スプライト自体に実質的な上限はありませんが、これより大きなシートはサイトのセクションごとに分けたほうが普通は良く、各ページが本当に使うアイコンだけを持てます。
されません。SVG の解析と組み立てはブラウザ内で完結し、プレビューはあなたの端末で作った blob URL です。このツールにはファイルを受け取るサーバーがそもそもありません。
はい。無料で、透かしも登録も不要です。