操作
5 つの SVG アイコンをアップロード
出力
統合された sprite.svg + 利用スニペット
開発者ツール
SVG Sprite Combiner — 複数アイコンを 1 つのスプライトに統合
複数の SVG アイコンをアップロードし、symbol 参照スニペット付きの 1 つの SVG スプライトに統合してダウンロードできます。
SVGSpriteIcons
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
开发工具
SVG スプライト結合
点击或拖拽多个 SVG 文件到此处
已添加的图标
0 个
使用代码
上传 SVG 文件后生成使用代码
合并后的 SVG Sprite
利用シーン
- プロジェクトの SVG アイコンを統合する
- HTTP リクエストを減らす
- アイコン管理を一元化する
使い方
- 複数の SVG ファイルをドロップする
- 統合されたアイコンをプレビューする
- スプライトをダウンロードする
入出力サンプル
FAQ
結果をどう使いますか？
<svg><use href="#icon-name" /></svg> または外部の sprite.svg#icon-name で参照します。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
画像差分チェッカー
画像差分チェッカー - pixel 差分を強調表示
2 枚の画像をブラウザ内で pixel 単位に比較できます。異なる pixel は赤で強調され、件数と割合も表示されるため、UI regression screenshot、デザイン差分確認、before / after review に便利です。画像はローカルのまま処理されます。
Image Diff Compare
ピクセル定規
ピクセル定規 - 画面サイズと目盛り表示
ページ上に horizontal または vertical の pixel ruler を描画できます。長さや tick 間隔を調整し、window size と device pixel ratio を見ながら layout や mockup 上の CSS pixel を確認できます。
Pixels Ruler Measure