SVGパス・エディター & プレビュー

SVGのパスデータ(d属性)をブラウザ上で視覚的に編集できるツールです.テキスト入力とドラッグ操作による制御点の移動を組み合わせて形状を調整でき,入力内容は端末内で処理されます.

読み込み中...

このツールが向いている用途

操作欄に戻る ↑

SVGのd属性パスを直接編集し,ブラウザ上でプレビューしながら形状確認やコード取得を行いたい用途に向いています.

まず試せること

「三角形(閉じたパス)」を選ぶと三角形を確認できます.コピーはcurrentColor,SVGファイル保存はblackの線色で出力されます.

利用条件

入力は100,000文字までです.相対座標を絶対座標に変換して表示し,書式に誤りがある場合は保存・コピーを停止します.出力は塗りなし・線幅3のパス1本です.

ZeroToolsのブラウザ内処理とプライバシー

ZeroToolsは,入力内容を端末内で処理するツールを中心に提供しています.各ツールの対応範囲と制限を確認して利用してください.

データの取り扱い・プライバシー方針
第1章

単一のパスを入力する

SVGのpath要素のd属性を1本入力します.プリセットで曲線,三角形,二次曲線を読み込み,描画を確認できます.書式,座標の数,円弧フラグに誤りがある場合は案内を表示し,保存とコピーを無効にします.入力は100,000文字までです.

第2章

座標とハンドルを編集する

相対座標は絶対座標に変換され,H・Vは直線Lになります.M・L・Tの座標,C・S・Qの制御点と終点,Aの終点をドラッグできます.キャンバスの範囲内で位置を調整でき,小数は保持されます.

第3章

SVGとして取り出す

保存は黒い線,コピーは配置先の文字色に従うcurrentColorを使います.いずれも線幅3,塗りなしのパス1本を含むSVGです.複数パスの取り込みや面の編集には対応していません.

よくある質問(FAQ)

A.
M・L・Tの終点,C・S・Qの制御点と終点,Aの円弧の終点をドラッグできます.相対座標を絶対座標に,H・VをLに直してから編集します.
A.
位置はキャンバスの幅500,高さ400の範囲に収め,小数の精度を保ったままパスへ反映します.
A.
本ツールは単一のd属性値を編集・プレビューするためのシンプルな設計となっています.複数のパスを含むSVGファイル全体の読み込みや一括編集には対応しておらず,一つのパスデータのみを入力して調整する用途に適しています.
A.
「SVGファイルを保存」ボタンから,線の色が黒(black)に設定された custom_path.svg としてダウンロードできます.また「SVGコードをコピー」を使うと,線の色が親要素に依存する currentColor となったSVGタグ全体をクリップボードに取得できます.