インタラクティブ SVG ベクターエディター
色、線幅、viewBox、トランスフォーム、パディング、背景、即時のSVG/PNG書き出しに対応した、遅延のないブラウザベクターエディター。
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ツールにコピーするか、キャンバス上のアイコンを改善してください。
インタラクティブ SVG ベクターエディター
色、線幅、viewBox、トランスフォーム、パディング、背景、即時のSVG/PNG書き出しに対応した、遅延のないブラウザベクターエディター。
.svgファイル（最大2 MB）、貼り付けたSVG XML、または内蔵アイコン検索
サニタイズ済みSVG 2.0、高解像度PNG/WebP、JSX/TSX、Vue、Svelte、CSSマスク
50段階のUndo/RedoとローカルXSS無害化を備えた非破壊DOMパス編集
インタラクティブ SVG ベクターエディターの使い方
-
1
SVGコードを貼り付けるかファイルをアップロードしてキャンバスに読み込みます。
-
2
任意のレイヤーやノードを選択し、塗り・線・角丸・座標を数値またはドラッグで調整します。
-
3
グリッドとスナップを有効にしてピクセル単位で正確に整列します。
-
4
編集後のSVGをダウンロードするか、整形済みコードをコピーします。
<circle cx="24" cy="24" r="12" fill="#f59e0b"/>
<circle cx="24" cy="24" r="16" fill="#f59e0b" stroke="#24324a"/>
制限事項
- パス上のテキスト（textPath）はこのエディターでは編集できません。
- アップロード上限は1ファイルあたり2 MiBです。
- Figmaからの書き出しはSVG形式を使用してください（PDFは解析時に拒否されます）。
このワークスペースで開く・貼り付けるファイルはブラウザ内で処理されます。サーバーへは何もアップロードされません。