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

SVGのベジェ曲線や直線コマンド（d属性コード）を視覚的に分解し、制御ハンドルをドラッグして直感的にデザイン・調整できます。

パス設定・エディタ

パスのコードを編集するか、右側のキャンバス上の制御点をドラッグして調整します。

SVG Path Data (d属性値)

サンプルプリセット

SVG パス早見表：

インタラクティブキャンバス

青い塗りつぶし丸は「端点・通過点」、白い丸は「ベジェ曲線の制御点（ハンドル）」です。ドラッグして自由に形状を変えられます。