SVGスプライトジェネレーター
複数のSVGアイコンをドロップすると、自動生成された衝突安全なIDを持つ、1つに結合された<symbol>スプライトシートが得られます。
クリックして.svgファイルを選択するか、ここにドラッグ&ドロップしてください
複数のアイコンを一度に選択できます。端末内に留まり、アップロードは一切行われません。
アイコン
仕組み
アップロードされた各SVGはブラウザ自身のDOMパーサーで解析され、そのviewBox（viewBoxが設定されていない場合はwidth/height）が読み取られ、内側のマークアップは<symbol id="..." viewBox="...">要素でラップされます。すべてのシンボルはその後、1つの非表示の<svg>に結合されます。これは、多数のアイコンを個別の画像ファイルやインラインコピーの代わりに1つのリクエストとして提供する、標準的な「SVGスプライト」パターンです。IDは各ファイル名から導出され、2つのファイルが衝突する場合は自動的に重複が解消されます。
解析と結合はすべてこのページのJavaScriptで行われます。アップロードした内容がどこかに送信されることはありません。
よくある質問
symbolスプライトはどう機能しますか?
各アイコンは、非表示の1つの<svg>の中の<symbol id="...">になり、ページのHTML内のどこかに1回だけ配置されます。任意の要素は<svg><use href="#id"></use></svg>でそのアイコンを描画できるため、何回使われてもブラウザは画像データを1回だけダウンロード・解析します。
アイコンのIDはどのように生成されますか?
各ファイル名から生成されます。小文字化し、英数字以外の文字をハイフンに置き換え、拡張子を取り除きます。2つのファイルが同じIDになる場合は、すべてのシンボルにアクセスできるよう数字の接尾辞が追加されます。
アイコンはどこかにアップロードされますか?
いいえ。ファイルはFile APIを使ってすべてブラウザ内で読み込まれ結合されます。アップロードは一切行われません。