SVGパスエディター
制御点を視覚的にドラッグし、色分けされたコマンド分解（M、L、C、Q、A、Z）を表示し、シェイプをリアルタイムプレビューし、ワンクリックでSVGコードをコピーできるインタラクティブなSVGパスエディターです。8つのサンプルパスと完全なコマンドチートシートを搭載。無料、登録不要、100%ブラウザベース。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 90"> <path d="M 10 80 L 50 10 L 90 80 Z" fill="none" stroke="#3b82f6" stroke-width="2" /> </svg>
M 10 80 L 50 10 L 90 80 Z
ご提案はありますか？
新しいツールのリクエストや改善提案をお待ちしています — Slackコミュニティにご参加ください！
SVGパスエディターとは？
SVGパスエディターは、SVG <path>要素のd属性を作成・編集するためのビジュアルツールです。SVGパスはコマンドのミニ言語（Mは移動、Lは直線、Cは3次ベジェ曲線、Qは2次ベジェ曲線、Aは円弧、Zは閉じる）を使用して複雑なシェイプを定義します。このエディターは、インタラクティブなドラッグ＆ドロップ制御点、リアルタイムプレビュー、色分けされたコマンドの可視化、ベクターグラフィックスを扱う開発者やデザイナー向けの即時コードエクスポート機能を提供します。
SVGパスエディターの使い方
- サンプルパス（三角形、ハート、星など）を選択するか、独自のSVGパスd属性を貼り付けます
- プレビュー内の制御点をドラッグしてシェイプをインタラクティブに編集します
- スタイルコントロールで塗り色、線色、線幅を調整します
- グリッドと制御点の表示を切り替えて正確に編集します
- ビジュアライザータブに切り替えて各コマンドの色分け分解を確認します
- ワンクリックで生成されたSVGコードまたはパスd属性をコピーします
よくある質問
このエディターはどのSVGパスコマンドに対応していますか？
すべての標準SVGパスコマンドに対応しています：M（moveTo）、L（lineTo）、H（水平線）、V（垂直線）、C（3次ベジェ曲線）、S（滑らかな3次ベジェ）、Q（2次ベジェ曲線）、T（滑らかな2次ベジェ）、A（円弧）、Z（パスを閉じる）。絶対座標（大文字）と相対座標（小文字）の両方に対応しています。
ベジェ曲線の制御点をドラッグして編集できますか？
はい。エディターは端点（赤）と制御ハンドル（アンバー）のドラッグ可能なポイントを表示します。任意のポイントをクリック＆ドラッグしてパスをインタラクティブに変形できます。ドラッグ中にパスデータがリアルタイムで更新されます。
生成されたSVGコードの使い方は？
コピーボタンでSVGコードをコピーし、HTML、Reactコンポーネント、またはSVG対応アプリケーションに直接貼り付けます。出力にはviewBox、fill、stroke、パスデータを含む完全な<svg>要素が含まれます。
SVGパスコマンドの絶対座標と相対座標の違いは？
絶対コマンド（大文字：M、L、C）はSVGキャンバスの原点（0,0）を基準とした座標を使用します。相対コマンド（小文字：m、l、c）は現在のペン位置を基準とした座標を使用します。例えば、「L 50 50」は絶対座標の点（50,50）まで線を引き、「l 50 50」は現在位置から右に50、下に50の位置まで線を引きます。
SVGデータはサーバーに送信されますか？
いいえ。すべての編集とレンダリングは100%ブラウザ内で行われます。データがサーバーに送信されることはありません。ブラウザのDevToolsのネットワークタブで確認できます。