バッジ
登録不要 | 100%ブラウザ完結処理
SVGアイコンマトリックス&バッジジェネレーター
カスタムのスクエア型/六角形フレーム、多段グラデーション、ステータスバッジ、即時のフレームワーク書き出しによるSVGアイコンのパラメトリック生成。
100%
図形を追加:
Direct canvas editing: select a part, then drag to move. Use the picker’s Replace selected or Add layer modes to build a composite SVG.
サイズのリアルタイム確認:
16px
24px
32px
暗いUI
icon-generator
複数アイコンのスプライトトレイ
調整したアイコンを複数固定し、1つのシンボルシートにまとめます。
まだアイコンが固定されていません。固定すると1つのシートにまとめられます。
AIプロンプトとベクター改善
AIプロンプトを作るか、キャンバス上のアイコンを改善します
プリセットを選び、プロンプトをAIツールにコピーするか、キャンバス上のアイコンを改善してください。
技術ドキュメントと設計ガイド
SVGアイコンマトリックス&バッジジェネレーター
カスタムのスクエア型/六角形フレーム、多段グラデーション、ステータスバッジ、即時のフレームワーク書き出しによるSVGアイコンのパラメトリック生成。
対応する入力元
カタログのベクターアイコン、独自SVGパス、幾何学バッジプリセット
書き出しとコンパイルの対象
3D照明付きSVG、512/1024 px PNG・WebPバッジ、構造化AIプロンプト
技術的な効果と性能
重いラスター画像の代わりに2 KB未満の鮮明なベクターバッジを生成
SVGアイコンマトリックス&バッジジェネレーターの使い方
-
1
ライブラリからベースアイコンを選ぶか、独自のSVGパスを読み込みます。
-
2
バッジ形状(スクワークル、角丸四角形、円形)と枠線を選択します。
-
3
グラデーションと3Dライティングを適用し、必要に応じてバッジ文字を追加します。
-
4
完成したアイコンを目的のサイズでまとめて書き出します。
入力例
ランタンのアイコンパス+バッジ文字「NEW」
出力例
グラデーション照明付き512 px PNGと対応するSVGおよびCSS背景
制限事項
- バッジ文字の配置は選択フォントに依存し、極小サイズでは見え方が変わる場合があります。
- このジェネレーターのラスター書き出しは1辺最大1024 pxです。
- 1回の実行で1つのバッジを生成します(複数アイコンの一覧化にはスプライト生成を使用)。
- 読み込むSVGは1ファイル最大2 MBです。
このワークスペースで開く・貼り付けるファイルはブラウザ内で処理されます。サーバーへは何もアップロードされません。