SVG Sprite Generator

使い方

1. 完全な SVG ドキュメントを 1 つ以上貼り付けます。各 svg 要素が 1 つの symbol になります。
2. ID の接頭辞を設定します。id 属性を持たないアイコンに使われます。
3. サイズを CSS で制御したい場合は、width と height を削除する設定をオンのままにします。
4. 「スプライトを生成」を押してマークアップを確認し、テンプレート用の参照スニペットをコピーします。
5. スプライトを .svg としてダウンロードし、ページの body 冒頭にインライン配置するか、保存してパスで参照します。

よくある用途

• アイコンセットの統合 — 20 個のアイコンを 20 回ではなく 1 回のリクエストにまとめます。
• 既存アイコンの変換 — ビルドプラグインを入れずに手持ちのファイルを貼り付けるだけです。
• インラインアイコンの準備 — スプライトを 1 度配置すれば、ページ中のどこからでも symbol を参照できます。
• 書き出しファイルの整理 — 固定の width と height を外し、サイズを CSS に委ねます。

よくある質問

Q: ID はどう決まりますか？ A: 各 svg 要素が id 属性を持つ場合はその値を使います。id がない場合や前のアイコンと重複する場合は、接頭辞と連番に置き換えます。

Q: スプライトを display: none で隠すのはなぜですか？ A: スプライトは symbol のライブラリであり、それ自体は描画しないべきだからです。インラインで隠して配置すれば、ページ上のすべての use 要素が追加リクエストなしで参照を解決できます。

Q: 外部ファイルの symbol を参照できますか？ A: できます。ダウンロードしたファイルをプロジェクトに置き、href="/assets/sprite.svg#check" のように完全なパスで参照します。外部参照は古いブラウザでポリフィルが必要な場合があるため、インライン配置のほうが互換性は高くなります。