SVGスプライトジェネレーター

SVGスプライトジェネレーターは、複数の個別SVGファイルを<symbol>要素を 使用した1つのSVGスプライトシートに結合する無料のブラウザベースツールです。 SVGスプライトはアイコンフォントの現代的な代替手段で、より優れたレンダリング、 完全なCSS制御、アクセシビリティの利点、そして数十の個別SVGファイルの 読み込みと比較して小さなファイルサイズを提供します。

個別のSVGアイコンをインラインに埋め込んだり、別々のHTTPリクエストとして 読み込む代わりに、SVGスプライトはすべてのアイコンを1つのファイルにまとめます。 各アイコンは一意のidを持つ<symbol>要素でラップされ、HTMLのどこからでも <svg><use href="#icon-name"/></svg>で参照できます。これによりネットワーク リクエスト数が大幅に削減され、マークアップがクリーンになります。

すべての処理はブラウザ内で完全に行われます。SVGファイルがサーバーにアップ ロードされることはなく、ネットワークリクエスト、ログ記録、サードパーティの アクセスもありません。独自のアイコンセット、ブランドアセット、外部に出しては いけないデザインシステムアイコンにも安全に使用できます。

ツールはオプションでSVGからfillとstroke属性を除去し、CSSのみでアイコンの 色を制御できるようにします。これはアイコンがテーマやコンテキストに合わせて 変化する必要があるデザインシステムに不可欠です。すべてのアイコンを同じ 座標系に正規化するカスタムviewBoxも設定できます。

結合前に個別のSVGを最適化したい場合はSVGオプティマイザーを お試しください。SVGファイルをラスター形式に変換するにはSVG to PNGコンバーターを ご覧ください。アイコンからファビコンを作成するにはファビコンジェネレーターを ご利用ください。

1. SVGファイルをアップロードエリアにドラッグ＆ドロップするか、Browse Filesをクリックして複数の.svgファイルを選択します。
2. または、右側のテキストエリアにSVGコードを貼り付け、名前を付けてAddをクリックしてスプライトに追加します。
3. Remove fill/strokeを切り替えて、SVGから色属性を除去し、CSSベースのカラーリングを有効にします。
4. 必要に応じてCustom viewBox（例：0 0 24 24）を設定し、すべてのシンボルを同じ座標系に正規化します。
5. Icons in Spriteグリッドでアイコンを確認します。アイコン名をクリックして名前を変更、Xボタンで削除できます。
6. 任意のアイコンのUsageをクリックして<svg><use href="#id"/></svg>スニペットをクリップボードにコピーします。
7. PreviewとCodeタブを切り替えて、ビジュアルスプライトまたは生成されたSVGマークアップを確認します。
8. Copy SpriteでスプライトSVG全体をコピー、またはDownload sprite.svgでファイルを保存します。
9. キーボードショートカットCtrl+Shift+Cでスプライトコードをすばやくコピーできます。