search

Found

info Overview

Convert an SVG d attribute into evenly sampled coordinate arrays as JSON. Visualize how curves decompose into points and pass coordinates to environments without SVG DOM API access (Arduino, plotters, Excel, embedded firmware) or use as input material for LLM-driven shape work.

📘 How to Use

  1. Open your SVG in a text editor, copy the d attribute string from the path element, and paste it into the input.
  2. Adjust sampling points (2-1000) and decimal precision (0-6) to generate the JSON output.
  3. Verify the sampling positions in the live preview, then copy the JSON for use in your downstream environment.

SVG Path Coordinate Sampler

100
2
Enter SVG path
Copied!

grid_view Related

Article

SVG Path Coordinate Sampler | Decompose Curves into JSON Point Arrays

Convert the d attribute of an SVG <path> element into evenly sampled coordinate points and output them as JSON. The sampling is rendered visually so you can see exactly how curves break down into points — designed for learning SVG path geometry and for passing coordinates into environments that have no SVG DOM API.

💡 Tool Overview

  • Visual sampling: Sample points appear on the preview in real time, so you can see how density differs between straight segments and tight curves.
  • Two JSON formats: Choose array form [x, y] or object form {x, y} to match the receiving API.
  • Adjustable point count: From 2 to 1000 points. Higher counts give smoother curve fidelity; lower counts compress the data.
  • Decimal precision control: Set 0-6 decimal places in the JSON output to fit downstream precision requirements or to shrink file size (preview rendering is unaffected — sub-pixel changes are invisible).
  • Client-side only: Path data never leaves your browser. Nothing is sent to any server.

🧐 FAQ

Q. Do JavaScript developers actually need this tool?

A. In most JS environments you can call SVGPathElement.getPointAtLength() directly in five lines and skip the tool entirely. This converter is built for situations where SVG DOM APIs are not available — embedded firmware, Arduino sketches, plotter G-code generators, Excel/Power Automate flows, Python scripts — and as a learning aid to visualise how an SVG path decomposes into discrete sample points.

Q. Can I use it to prepare input for LLMs/AI?

A. Yes. When asking ChatGPT or Claude to animate or analyse a curve, handing the model a JSON coordinate array (instead of a raw SVG path string) removes the burden of parsing the path grammar and makes the request more reliable.

Q. Where does the SVG d attribute come from?

A. Export any vector shape from Adobe Illustrator, Figma, or Inkscape as SVG and open the file in a text editor. You will find a <path d="M10 10..." /> element — copy the contents of d="..." into this tool.

📚 How SVG Path Sampling Works

This tool relies on the browser's SVG DOM API methods SVGPathElement.getTotalLength() and getPointAtLength(distance). The first returns the total length of the path; the second returns the X/Y coordinates at any distance along it. Together they let you sample any point on a path — including complex Bezier curves — without solving the parametric equations by hand.