SVGのpathコマンドを編集し、リアルタイムでプレビューします。
主なコマンド: M=移動, L=直線, C=3次ベジェ, S=滑らかベジェ, Q=2次ベジェ, A=円弧, Z=閉じる（大文字=絶対座標, 小文字=相対座標）
プレビュー
SVGコード
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="#3b82f6" stroke-width="2" /> </svg>
SVGパスエディタでできること
SVGのpathコマンドをリアルタイムで編集・プレビューできるオンラインエディタです。パスデータを入力すると即座にグリッド付きのプレビューに反映され、線の色・太さ・塗りを自由にカスタマイズできます。完成したSVGコードはワンクリックでコピーできます。
使い方
- SVGパス入力欄
- SVGのpathコマンド（M, L, C, S, Q, A, Zなど）を直接入力・編集します。大文字は絶対座標、小文字は相対座標を表します。
- 線の色
- カラーピッカーでパスの線の色を選択します。
- 線の太さ
- パスの線幅を数値で指定します。0.5刻みで調整できます。
- 塗り
- パスの塗りつぶしを選択します。none（塗りなし）、線の色、赤、緑、青から選べます。
- プレビュー
- 入力したパスデータがグリッド付きの200×200のビューボックス上にリアルタイムで描画されます。
- SVGコード・コピーボタン
- 生成されたSVGコード全体を表示し、コピーボタンでクリップボードに貼り付けられます。