SVGパスビューア
SVGの d 属性（パスデータ）をコマンド別に分解し、始点・終点・制御点を図形に重ねて表示します。相対コマンドは絶対座標に換算して一覧にし、S / T の暗黙の制御点も確認できます。座標の手動編集や小数桁の削減（最適化）にも対応。SVGファイル全体を軽くしたいときは SVG最適化ツール、波形の生成は SVG波・ブロブジェネレーター もご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
プレビュー
- 始点
- 終点（アンカー）
- 制御点
- 自動計算された制御点（S / T）
最適化（小数桁の削減）
コマンド一覧
数値を書き換えるとパスデータに反映されます。円弧のフラグ（large・sweep）は0か1です。
使い方
- 「パスデータ（d属性）」にSVGのpathのdの値を貼り付けます。「サンプルを挿入」で試すこともできます。
- 図とコマンド一覧を見ながら、「選択」を押して該当セグメントを強調表示します。一覧の数値を書き換えると、パスデータと図に反映されます。
- 「小数桁数」を決めて「最適化する」を押すと、パスデータが短くなります。「パスデータをコピー」で取り出せます。
注意事項
- 対応コマンドは M・L・H・V・C・S・Q・T・A・Z（大文字は絶対、小文字は相対）です。コマンドを省略した繰り返し（M の後の暗黙の L を含む）も展開して表示します。
- 図の表示範囲は始点・終点・制御点が収まる大きさに自動調整します。円弧は端点だけを描画範囲に含めるため、円弧の膨らみが範囲外に出ることがあります。
- 小数桁の削減は座標を丸めるため、図形がわずかに変わります。相対コマンドを多く含むパスでは誤差が積み重なることがあるので、気になる場合は「絶対座標に変換する」を使ってください。
- 最適化後は区切りを詰めて（例: 0.5 を .5、10 -5 を 10-5）書き出します。SVGの仕様どおりですが、ごく古いソフトでは読めないことがあります。
用語解説
パスデータ（d属性）
SVGのpath要素の形を決める文字列。M（移動）やC（曲線）などのコマンドと座標を並べて書く。
制御点
ベジェ曲線の曲がり方を決める点。曲線そのものは通らず、曲線を引っ張る向きと強さを表す。
相対コマンド・絶対コマンド
大文字のコマンドは原点基準の絶対座標、小文字は現在位置からの差分（相対座標）で指定する。
円弧（Aコマンド）
半径・回転・large-arc/sweepのフラグ・終点で楕円の弧を描くコマンド。フラグの組み合わせで4通りの弧から選ぶ。
よくある質問
パスのd属性はどこから取り出せますか？
SVGファイルをテキストエディタで開き、<path d="..."> の引用符の中身をコピーしてください。ブラウザの開発者ツールでpath要素を選んでも取り出せます。
大文字と小文字のコマンドはどう違いますか？
大文字（M・L・Cなど）は原点を基準にした絶対座標、小文字（m・l・cなど）は現在位置からの差分で指定します。コマンド一覧では、どちらも絶対座標に換算した値を図に使っています。
SやTコマンドの制御点はなぜ自分で書いていないのに表示されますか？
Sは直前のC/Sの第2制御点、Tは直前のQ/Tの制御点を、現在位置を中心に反転した点を制御点として使います。図では中抜きの丸で表示します。
小数桁を減らすと見た目はどのくらい変わりますか？
viewBoxが数百程度なら、小数1〜2桁でもほとんど違いは見えません。座標が小さい（0〜1程度）パスでは桁数を減らしすぎると形が崩れるため、プレビューで確認してください。
このページをシェア