SVGアイコンをドラッグ&ドロップでスプライトシートに一括変換。 HTML・React・Vue・CSSのコードスニペット付き。ブラウザ上で完結、データは外部に送信されません。

SVGスプライトとは

SVGスプライトは、複数のSVGアイコンを1つのSVGファイルにまとめる技術です。各アイコンは <symbol> 要素として定義され、使用時は <use href="#id"> で参照します。 CSSスプライトのSVG版と考えるとわかりやすいでしょう。

SVGスプライトのメリット

HTTPリクエストの削減：アイコンごとに個別リクエストする必要がなく、1ファイルで全アイコンを提供
CSSで色を変更可能：currentColor を使えば、 CSSの color プロパティでアイコンの色を制御できる
レスポンシブ対応： SVGはベクターなので、どんなサイズでも鮮明に表示される
キャッシュ効率：スプライトファイルは1度ダウンロードすればキャッシュされ、ページ間で再利用される
アクセシビリティ：aria-hidden="true" を付与し、必要に応じて aria-label で意味を補足できる

このツールの使い方

SVGファイルをドラッグ&ドロップ（またはクリックして選択）でアップロード
アイコン一覧でプレビューを確認。ダブルクリックで名前を変更、ドラッグで並び替え
設定パネルでIDプレフィックス・クラス名プレフィックス・ファイル名をカスタマイズ
アイコンをクリックすると、HTML・React・Vue・CSSのコードスニペットが表示される
「ダウンロード」ボタンでスプライトSVGファイルを保存

使用例（HTML）:

<!-- sprite.svgを読み込み -->
<svg class="icon icon-arrow" width="24" height="24" aria-hidden="true">
  <use href="sprite.svg#icon-arrow" />
</svg>

インラインSVG vs 外部スプライト

方式	メリット	デメリット
インラインSVG	追加リクエストなし、CSSで直接スタイリング可能	HTMLが肥大化、キャッシュ不可
外部スプライト	HTMLがクリーン、キャッシュ可能、再利用しやすい	初回に追加リクエスト1回

少数のアイコンを1ページでのみ使う場合はインラインSVG、サイト全体で多くのアイコンを使う場合は外部スプライトが適しています。

viewBoxについて

viewBox はSVGの座標系を定義する属性で、viewBox="minX minY width height" の形式です。このツールはアップロードされたSVGのviewBoxを自動検出し、スプライトのsymbol要素に設定します。 viewBoxが未指定の場合は、width/height属性から導出するか、デフォルト値（0 0 24 24）を使用します。

セキュリティについて

SVGファイルはXML形式であり、悪意のあるスクリプトを埋め込むことが可能です。このツールは以下の多層防御でXSSリスクを軽減しています：

ファイル読み込み時のMIMEタイプ・拡張子・サイズ検証
DOMParserによるXML構文検証
<script>、<iframe>、<foreignObject> 等の危険な要素の除去
onclick、onload 等のイベントハンドラ属性の除去
javascript:、data:text/html 等の危険なURLスキームの除去
外部参照の除去（内部 #id 参照のみ許可）
プレビュー表示には <img> タグ + Blob URLを使用（script実行不可）

すべての処理はブラウザ内で完結し、ファイルがサーバーに送信されることはありません。