SVGパスエディター

SVGパスエディターは、SVG <path>要素を作成・編集するための無料の ブラウザベースビジュアルツールです。SVGパスはd属性で定義され、 M（移動）、L（直線）、C（3次ベジェ）、Q（2次ベジェ）、 A（円弧）、Z（閉じる）などのコマンドのコンパクトな文字列です。 これらのコマンドを手書きするのは、特に複雑な曲線の場合、面倒で エラーが起きやすい作業です。このエディターでは、インタラクティブな キャンバス上でアンカーポイントやコントロールハンドルを直接ドラッグ しながら、パス文字列がリアルタイムで更新されます。

このツールはSVGパスコマンドの完全なセットをサポートしています — moveto、lineto、水平線、垂直線、3次および滑らかな3次ベジェ、 2次および滑らかな2次ベジェ、楕円弧、パスの閉じです。コマンド パレットから新しいセグメントを追加したり、既存のものを削除したり、 d属性のテキストを直接入力して即座にレンダリングを確認できます。 グリッドオーバーレイとスナップ機能により、ピクセルパーフェクトな シェイプの作成が容易になり、ズームコントロールで任意のスケールで 作業できます。

各コマンドのパラメータは、キャンバス上のポイントをドラッグするか、 パラメータエディターで正確な値を入力して編集できます。ベジェ曲線の コントロールハンドルラインが表示され、各コントロールポイントが曲線に どのように影響するかを確認できます。パス情報パネルにはパスの総延長と バウンディングボックスの寸法が表示され、アイコンのサイズ設定や アニメーションの計画に役立ちます。

CSSとSVGを一緒に扱う場合は、ストロークやフィルの色選びに Color Converter、パスのキーフレーム アニメーションにCSS Animation Generator、 SVGと一緒にCSSレイアウトコードを生成するには CSS Layout Generatorもご覧ください。

すべての処理はブラウザ内で完結します。データがサーバーに送信 されることはなく、ネットワークリクエスト、ログ記録、サードパーティ サービスの関与はありません。独自のアイコンデザインや本番環境の SVGアセットでも安全に使用できます。

1. 既存のSVGパスd属性をPath d attributeテキストエリアに貼り付けるか、Preset（Circle、Star、Heart、Arrow、Checkmark）をクリックして初期シェイプを読み込みます。
2. キャンバス上の緑色のアンカーポイントをドラッグしてパスの端点を移動します。青色のダイヤモンド型コントロールポイントをドラッグしてベジェカーブのハンドルを調整します。
3. Command Listのコマンドをクリックして選択します。リストの下のパラメータエディターパネルで数値を正確に編集できます。
4. Add Commandパレットを使用して新しいセグメント（M、L、H、V、C、S、Q、T、A、Z）をパスに追加します。
5. GridとSnapを切り替えてポイントをグリッドに揃えます。In/Outボタンまたはマウスのスクロールホイールでズームを調整します。
6. Handlesを切り替えてベジェ曲線のコントロールポイントガイドラインの表示/非表示を切り替えます。
7. Copy dをクリックするかCtrl+Shift+Cを押してパス文字列をコピー、またはCopy SVGで完全なSVG要素をコピーします。SVGでファイルをダウンロードできます。