SVGパス座標化ツール｜曲線を点列に分解してJSON座標を生成

SVGの<path>要素のd属性データから、パスに沿った等間隔の座標点をサンプリングしJSON配列として出力するツールです。サンプリング過程を視覚的に確認できるため、SVG曲線が「どう点列に分解されるか」の学習用、およびSVG DOM APIが使えない環境への座標受け渡し用に設計しています。

💡 ツール概要

• サンプリングの可視化: SVGパス上に打たれる点の位置と密度をリアルタイムでプレビュー描画。直線部と曲線部で点の分布がどう違うかを視覚で理解できます。
• 2種類のJSON出力: 配列形式 [x, y] またはオブジェクト形式 {x, y} を選択可能。受け側のAPI仕様に合わせて切り替えられます。
• サンプリング点数の調整: 2〜1000点まで調整可能。点数を増やせば曲線の再現精度が上がり、減らせばデータサイズを圧縮できます。
• 小数桁数の制御: JSON出力の小数点桁数を0〜6桁で指定し、下流側の精度仕様やファイルサイズ最適化に対応します(プレビュー描画には影響しません)。
• クライアントサイド処理: 入力データはサーバーに送信されず、すべてブラウザ内で処理されます。

🧐 よくある質問

Q. JavaScript開発者にも必要ですか？

A. JS環境ではSVGPathElement.getPointAtLength()を直接呼べば数行で同じ処理が書けるため、本ツールは不要なケースが多いです。本ツールは主に、SVG DOM APIが使えない環境(Arduino・組込みファームウェア・プロッタG-code・Excel/Power Automate等)への座標データ受け渡しや、サンプリングの仕組みを視覚で理解する学習用途を想定しています。

Q. LLM/AIへの入力素材としても使えますか？

A. 使えます。ChatGPT/Claude等に「この曲線に沿って○○を動かして」と依頼する際、Illustrator等で描いた曲線をJSON座標に変換して渡せば、LLMがSVGパス文法を解釈する負荷を下げられます。

Q. SVGのd属性はどこで取得できますか？

A. Adobe Illustrator・Figma・Inkscape等で作図したものをSVG形式で書き出し、テキストエディタで開くと<path d="M10 10..." />という形で含まれています。d="..."の中身をコピーして本ツールに貼り付けてください。

📚 SVGパスサンプリングの仕組み

ブラウザのSVG DOM APIであるSVGPathElement.getTotalLength()とgetPointAtLength(distance)を内部で利用しています。前者はパス全体の長さを返し、後者は始点から指定距離の点のX,Y座標を返します。複雑なベジェ曲線の媒介変数方程式を手動で解かなくても、これら2つのAPIだけでパス上の任意の点を取得できる仕組みです。