ビジュアル SVG Path エディタ

SVG の path 要素は「M 100 100 C 150 50 …」のような d 属性で形を表しますが、座標やベジェ曲線の制御点を手書きするのはミスが起きやすい作業です。このエディタでは 500 × 500 のキャンバス上でクリックとドラッグだけでパスを描け、右側のパネルに対応する SVG の d コードと CSS の clip-path: path() ルールがすぐに表示されます。アイコンやロゴのラフ、画像を不規則な形に切り抜く用途のほか、SVG のパスコマンドの仕組みを学ぶのにも役立ちます。

「ポイント追加」モードでキャンバスをクリックするとアンカーが追加されます。最初の点が始点（M）になり、2 点目以降は既定で曲線ノード（C）として 2 つの青い制御ハンドルを持ちます。「選択/編集」モードに切り替えると、緑のクローバー型アンカーをドラッグしてノードを動かしたり、ハンドルをドラッグして曲線の向きや膨らみを調整したりできます。ノードを選択すれば「ノードの種類」で直線ノード（L）と曲線ノード（C）を切り替えられます。「ポイント削除」モードではアンカーをクリックするだけで削除できます。マウス、トラックパッド、タッチ操作のいずれにも対応しています。

「グリッドに吸着」をオンにするとアンカーが 20 ピクセル間隔のグリッドに吸い付くので、左右対称の形や整った図形を描きやすくなります。グリッドの背景はいつでも表示・非表示を切り替えられます。「パスを閉じる (Z)」にチェックを入れると終点が始点とつながり、塗りつぶせる閉じた図形になります。ゼロから描くのが面倒なら、ハート、星、水滴、アルパ頭部のテンプレートを読み込んで調整しましょう。座標はすべて整数に丸められるため、出力されるコードは短く、そのまま貼り付けられます。

d 属性は 0〜500 の座標系で出力されるので、SVG に使うときは viewBox="0 0 500 500" を指定すれば、SVG の大きさに合わせて形が拡大縮小されます。一方、CSS の clip-path: path() は座標の単位がピクセルで、要素の大きさに合わせて伸縮しません。500 × 500 ピクセルの要素に使うのが最適で、レスポンシブに切り抜きたい場合は SVG の clipPath と clipPathUnits を使うか、transform で要素を拡大縮小してください。編集はすべてブラウザ内で完結し、データのアップロードは不要です。