広告が嫌いですか? 行く広告なし今日 

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

開発者数学

広告削除する？

入力

出力

クライアント側

SVGファイルをアップロードし、「生成」をクリックしてスプライトシートを作成します。

スプライトシートSVG

使用スニペットタイプ

使用スニペット

インラインHTMLスニペット

広告削除する？

ガイド

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

効率的なアイコン読み込みのために、複数のSVGファイルを単一のスプライトシートに結合します。SVGをドラッグアンドドロップでアップロードし、グリッドでプレビューし、シンボルIDを編集して、本番環境Readyな結合済みスプライトファイルをダウンロードします。外部、インライン、CSS背景アプローチ用の使用コードスニペットを入手します。CSSで色付け可能なアイコンのために塗りつぶしやストロークを削除したり、エディターメタデータを削除してファイルサイズを削減したりできます。

使用方法

SVGアイコンファイルをアップロードエリアにドラッグアンドドロップするか、クリックして参照します。各SVGは解析され、自動生成されたシンボルIDとともにプレビューグリッドに表示されます。シンボルIDはクリックすることで編集できます。最適化オプションを切り替えて、塗りつぶし/ストロークを削除したり、メタデータを削除したりします。生成をクリックして、すべてのアイコンを単一のスプライトシートに結合します。結合されたSVGファイルをダウンロードするか、インラインHTMLをコピーします。生成されたコードスニペットを使用して、プロジェクトで個々のアイコンを参照します。

機能

ドラッグアンドドロップアップロード – ドラッグアンドドロップまたはファイルピッカーで複数のSVGファイルを一度にアップロード
アイコンプレビューグリッド – ラベル付きのレスポンシブグリッドに表示されたすべてのアップロード済みアイコンを確認
編集可能なシンボルID – ファイル名から自動生成、結合前にクリックしてカスタマイズ
スプライトシート生成 – viewBoxを保持して、SVGをシンボル要素を使用した単一ファイルに結合
使用コードスニペット – 外部参照、インライン参照、CSS背景メソッド用のすぐに使用できるコードを取得
塗りつぶし/ストロークの削除 – CSSで色付けしたいアイコンの塗りつぶしおよびストローク属性を削除
最適化 – コメント、メタデータ、エディター名前空間を削除してファイルサイズを最小化
ファイルサイズ比較 – 個別ファイルと結合ファイルサイズ、およびスペースの節約量を確認

広告削除する？

 よくある質問

SVGスプライトシートとは何ですか？また、なぜ使用すべきですか？

SVGスプライトシートは、シンボル要素として定義された複数のアイコンを含む単一のSVGファイルです。20個の個別のSVGファイル（20件のHTTPリクエスト）をロードする代わりに、1つのスプライトファイルをロードし、use要素で個々のアイコンを参照します。これにより、HTTPリクエストが削減され、ページの読み込みパフォーマンスが向上し、アイコン管理が容易になります。各シンボルは独自のviewBoxを保持しているため、アイコンは正しい比率でレンダリングされます。スプライトシートは、複数のページにわたる多数のアイコンを持つWebサイトで特に価値があります。
外部スプライト参照とインラインスプライト参照の違いは何ですか？

外部参照は、別のスプライトSVGファイルを使用し、スプライトファイル名にシンボルIDを追加したファイルパスを指すhrefでアイコンを参照します（例：sprite.svg#icon-name）。ブラウザはスプライトファイルを一度ロードしてキャッシュします。インライン参照は、スプライトSVG全体をHTMLページに直接（通常は非表示で）埋め込み、ハッシュとIDだけでアイコンを参照します。インラインスプライトは追加のファイルリクエストなしで即座に機能しますが、HTMLサイズが増加し、個別にキャッシュできません。外部スプライトはマルチページサイトに適していますが、インラインはシングルページアプリケーションに適しています。
SVGアイコンから塗りつぶしやストロークを削除する理由は何ですか？

SVGアイコンから塗りつぶしおよびストローク属性を削除すると、それらの色を完全にCSSで制御できるようになります。これは、ホバー時、ダークモード時、またはさまざまなUIコンテキストでアイコンの色を変更する必要があるアイコンシステムに不可欠です。元の属性を削除しないと、インラインSVG属性はCSSルールよりも優先度が高いため、CSSの色変更が機能しない場合があります。このツールの塗りつぶし/ストローク削除オプションはこれらの属性を削除するため、CSSの塗りつぶしおよびストロークプロパティまたはcurrentColorキーワードを使用して色を設定できます。
ファイル名からシンボルIDはどのように生成されますか？

ツールは、各ファイル名から.svg拡張子を削除し、小文字に変換し、スペースと特殊文字をハイフンに置き換え、連続するハイフンを削除することで、URLセーフなシンボルIDに変換します。たとえば、My Icon (v2).svgはmy-icon-v2になります。結合前に生成されたIDはいつでも編集できます。各IDは、アイコンを使用する際の参照識別子として機能するため、スプライトシート内で一意である必要があります。icon-arrow-rightやicon-closeのような意味のあるIDは、汎用的な名前よりもコードの可読性を高めます。