Vector Studio と 3D アイコンワークスペース
ブラウザ内で完結するSVGベクターエディタ：パス編集、レイヤー、整列ができ、PNGやReact TSXなど複数形式へ書き出せます。
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.
調整したアイコンを複数固定し、1つのシンボルシートにまとめます。
まだアイコンが固定されていません。固定すると1つのシートにまとめられます。
AIプロンプトを作るか、キャンバス上のアイコンを改善します
プリセットを選び、プロンプトをAIツールにコピーするか、キャンバス上のアイコンを改善してください。
Vector Studio と 3D アイコンワークスペース
ブラウザ内で完結するSVGベクターエディタ：パス編集、レイヤー、整列ができ、PNGやReact TSXなど複数形式へ書き出せます。
W3C SVG 1.1/2.0ファイル、生XMLコード、または内蔵カタログのアイコン
最適化SVG、PNG（64〜2048 px）、WebP、React TSX、Vue 3、Svelte、CSS Data URI、SVGスプライト
ベクター編集・3Dライティング・軽量化・フレームワーク用コード出力をブラウザ内で完結
Vector Studio と 3D アイコンワークスペースの使い方
-
1
「ツール」からStudioワークスペースを開き、新規作成または既存のSVGファイルを読み込みます。
-
2
インスペクターパネルでレイヤー、配色、グラデーション、線幅を直接編集します。
-
3
3Dライティングプリセットやモーションアニメーションをアイコンバッジに適用します。
-
4
クリーンなSVGや高解像度PNG/WebPとして書き出すか、各フレームワーク用コードをコピーします。
ローカルから読み込んだ shield.svg（単一パスレイヤー）
グラデーション調整済みSVGおよび className 対応の JSX コンポーネント
制限事項
- 3Dライティングは単一光源の凸型シェイプで最も自然に表示されます。
- 元に戻す履歴は1セッションあたり最大50ステップです。
- 読み込めるファイルサイズは1ファイル最大2 MiBです。
このワークスペースで開く・貼り付けるファイルはブラウザ内で処理されます。サーバーへは何もアップロードされません。