SVG / アイコン
SVGスプライトジェネレーター：シンボルとアイコンの使い方
複数のSVGアイコンをドロップしてシンボルスプライトを作成します。マークアップをサニタイズし、ファイル名由来のID重複を解消してviewBoxを保持できます。fillをcurrentColorに変換して、sprite.svgをダウンロードすることもできます。
SVGスプライトジェネレーター：シンボルとアイコンの使い方: SVGアイコンのセットをドロップすると、アイコンごとのシンボルを含む1つのスプライトファイルと、各アイコンを使うためのコードが作成されます。スクリプト、外部リソース、安全でない要素は削除され、必要に応じてサイズからviewBoxが作成されます。fillはcurrentColorに切り替えられるため、アイコンの色をテキストの色に合わせられます。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 開発者ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
スクリプト、イベントハンドラー、外部リソース、埋め込み画像、テキスト、対応していない要素は削除されます。基本的なインラインスタイルはプレゼンテーション属性に変換されます。viewBoxがない場合は数値の幅と高さが使われ、欠けている各寸法には24単位がフォールバックとして使われます。使用前に各プレビューを確認してください。
SVGアイコンを編集シンボルと再利用
SVG 2では、symbol要素とuse要素、およびそれらのviewBoxの動作が規定されています。https://www.w3.org/TR/SVG2/struct.html#SymbolElement ; https://www.w3.org/TR/SVG2/struct.html#UseElement
ローカル処理と塗り
各アイコンは、安全なSVG要素と属性のリストから再構築されるため、スクリプト、イベントハンドラー、外部リソースがスプライトに到達することはありません。第三者のアイコンセットは含まれていません。SVGの塗りとcurrentColorはhttps://www.w3.org/TR/SVG2/painting.htmlで規定されています。アップロードしたアイコンのライセンスについては、ユーザーが責任を負うものとします。
使い方
- 最大60個のSVGアイコンをドロップします。各ファイルは1 MB未満にしてください。
- サニタイズ済みのプレビューを確認し、必要に応じてfillをcurrentColorに変換します。
- スプライトをダウンロードし、アイコンを選択して利用コードをコピーします。
プライバシーと制限事項
SVGファイルはローカルに保持されます。このツールが埋め込まれたURLを取得したり、アイコンをアップロードしたりすることはありません。
関連ツール
よくある質問
スプライトはどのように使いますか？
ページ上の非表示コンテナにそのSVGを1回だけ挿入し、コピーしたインラインコードを使います。別ファイルとして使う場合は、hrefにsprite.svg#idを指定してください。
viewBoxがない場合はどうなりますか？
px単位を含む数値のwidthとheightから新しいviewBoxが作成されます。指定されていない寸法や対応していない寸法は、24単位がデフォルトになります。プレビューでは修復されたviewBoxが示されるため、切り抜きがないか確認できます。
すべてのアイコンで見た目は完全に維持されますか？
いいえ。基本図形、グループ、グラデーション、クリッピング、マスクは保持されますが、スクリプト、テキスト、埋め込み画像、use要素、対応していないスタイルは削除されます。プレビューを確認してください。アップロードしたアートワークのライセンスについては、引き続きご自身で責任を負うものとします。
無料ツール · ブラウザ内で · アカウント不要