SVGパス可視化・編集ツール

SVGパス可視化・編集ツール

任意のSVGパスd属性を貼り付けて、リアルタイムで表示できます。このツールは各コマンドをそのパラメータと絶対終端点に分解し、ベジェ制御点ハンドルをプレビューの上に描画し、絶対座標と相対座標の間のパスを設定可能な精度で書き直します。これは、ブラウザ内でSVGのd文字列を理解・整理・手動調整したい作成者向けに構築されています。

使用方法

1. パスd属性の内容（または「例を試す」をクリック）を入力欄に貼り付けます。
2. viewBoxをパスが作成されたキャンバスに合わせて調整します。デフォルトは 0 0 200 200 組み込み例に適しています。
3. ストローク色、ストローク幅、塗りつぶしを設定して、パスがどのように表示されるかをプレビューします。
4. 座標モード（そのまま保持、絶対座標に変換、または相対座標に変換）を選択し、0から6までの小数桁の精度を設定します。
5. オーバーレイを切り替えて、グリッド、番号付きコマンド終端点、ベジェ制御点ハンドル、および描画アニメーションを表示または非表示します。
6. 変換されたd属性をコピーするか、完全な独立したSVGをダウンロードします。

機能

• リアルタイムパスプレビュー – d文字列をSVGキャンバスにレンダリングし、ストローク、塗りつぶし、viewBoxを設定可能にします。
• コマンド分解表 – コマンドの順番をリストし、パラメータ、ラベル付き引数、絶対終端点を表示します。
• ベジェ制御点オーバーレイ – C、S、Q、Tコマンドに対してダッシュ線のハンドルとオレンジの制御点を描画し、曲線の形状を確認できます。
• 番号付き終端点 – パスの開始点を緑で、その後のすべてのコマンド終端点を青でインデックスラベル付きでマークします。
• 絶対座標と相対座標の変換 – レンダリング形状を変えずに、d文字列全体を絶対または相対座標システムに書き直します。
• 座標の四捨五入 – 0から6桁までの小数精度を切り捨てて、パスデータを短縮・標準化します。
• グリッドオーバーレイ – viewBoxに合わせて自動サイズのグリッド線とゼロ軸を強調します。
• パス長さ – ブラウザのgetTotalLength APIを使用して、viewBox単位での描画長を報告します。
• 描画アニメーション – ストロークダッシュオフセットアニメーションをオプションで設定し、視覚的なデバッグ用にパスをループ描画します。
• 独立したSVGエクスポート – 現在のviewBoxとスタイル設定が適用された完全なSVGファイルをコピーまたはダウンロードします。

サポートされているパスコマンド

• M / m – moveto: 指定されたポイントに新しいサブパスを開始します。
• L / l – lineto: 指定されたポイントに直線を描きます。
• H / h – 水平線描画: 指定されたxに水平線を描きます。
• V / v – 垂直線描画: 指定されたyに垂直線を描きます。
• C / c – 3次ベジェ曲線: 2つの制御点と終端点。
• S / s – スムーズ3次ベジェ曲線: 前の3次ベジェ制御点を自動的に反射します。
• Q / q – 2次ベジェ曲線: 1つの制御点と終端点。
• T / t – スムーズ2次ベジェ曲線: 前の2次ベジェ制御点を自動的に反射します。
• A / a – 楕円弧: 半径、x軸回転、大弧およびスweepフラグ、終端点。
• Z / z – closepath: サブパスの開始点に戻る直線を描きます。