SVGパス→座標配列（JSON）抽出ツール｜Webアニメーション・Canvas描画用の座標データを生成

SVGのパスデータ（d属性）から、指定した解像度の座標配列をJSON形式で抽出する開発者向けオンラインツールです。GSAPのMotionPathPluginやThree.js、HTML5 Canvasなど、パスに沿ったアニメーションや描画を実装する際のデータ準備を効率化します。

💡 ツール概要

このツールは、SVGの<path>要素が持つ複雑なd属性の文字列を解析し、パスに沿った等間隔の座標点をサンプリングしてJSON配列として出力します。

• 高精度な座標サンプリング: SVGのパスに沿って、指定した数の座標点を等間隔で抽出します。
• 2種類のJSONフォーマット: 用途に応じて、配列形式 [x, y] またはオブジェクト形式 {x: x, y: y} のいずれかを選択して出力できます。
• パラメータのリアルタイム調整: サンプリングする点数（解像度）や座標の小数点以下の桁数をスライダーで直感的に調整でき、結果は即座に反映されます。
• インタラクティブなプレビュー: 入力されたSVGパスと、その上にサンプリングされた座標点がリアルタイムで描画され、結果を視覚的に確認しながら作業を進められます。
• クライアントサイド処理: 入力されたデータはサーバーに送信されることなく、すべてお使いのブラウザ内で処理されます。

🧐 よくある質問

Q. どのような用途で活用できますか？

A. 主にWeb開発における以下のようなシーンで活用できます。 - パスアニメーション: GSAP (MotionPathPlugin) などで、オブジェクトを複雑な曲線パスに沿って動かすための座標データとして。 - Canvas/WebGL描画: HTML5 CanvasやThree.jsで、SVGパスを元にした図形や軌跡を描画する際の頂点データとして。 - データ可視化: グラフやチャートで、データポイントを滑らかな線で結ぶ際の補間座標の生成に。 - ゲーム開発: キャラクターの移動経路やエフェクトの軌跡を定義するデータとして。

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

A. d属性は、SVGファイル内の<path>要素に含まれる文字列です。Adobe Illustrator、Figma、Inkscapeなどのベクターグラフィックソフトで作成した図形をSVG形式で書き出し、テキストエディタで開くことで取得できます。例えば、<path d="M10 10 L90 90..." ... /> の d="..." の部分が該当します。

📚 SVGパスのサンプリング技術

このツールのコア機能は、SVG DOM APIが提供する getTotalLength() と getPointAtLength(distance) メソッドによって実現されています。getTotalLength() は、直線・曲線（ベジェ曲線など）を問わず、複雑なパス全体の正確な長さを返します。そして getPointAtLength() は、パスの始点から指定した距離（distance）にある点の正確なX, Y座標を返します。

これらのAPIを利用することで、開発者は複雑なベジェ曲線の媒介変数方程式などを手動で計算することなく、パス上の任意の点を極めて簡単にサンプリングできます。この技術は、パスに沿ったテキストの配置（textPath）や、線が徐々に描かれていくような描画アニメーション（stroke-dasharrayとstroke-dashoffsetのアニメーション）など、高度なSVG表現の基盤となっています。