SVG Path to JSON Coordinates

Extract SVG path coordinates as JSON data. Parse SVG path "d" attribute commands and export X, Y points as a structured JSON array.

Drop SVG file to analyse or click to browse

Extract path coordinates, length, bounds & georeference

Visual Path Render

Closed Paths Open Paths

How to Use

Upload SVG or paste path data

Upload an SVG file or paste a path "d" attribute string.

Set sampling interval

Choose point spacing (e.g. every 1px or 5px along the path).

Download JSON

Download the coordinate data as a JSON array of {x, y} objects.

Extracting SVG Path Coordinates as JSON

SVG paths store vector shape data as a sequence of drawing commands in the "d" attribute. When working with HTML5 Canvas, WebGL, game engines, or custom renderers, you often need this path data as a simple list of X, Y coordinates rather than SVG command syntax.

This tool parses SVG path commands (M moveto, L lineto, C cubic bezier, Q quadratic bezier, A arc, Z closepath) and samples the resulting curves at a specified interval, producing a JSON array of coordinate points that represent the path geometry.

Output Formats

Sampled points: Regular X, Y coordinates along the path at specified intervals. Best for Canvas drawing, animation, and physics engines.
Raw commands: Parsed SVG command objects preserving the original M, L, C, Q, A, Z structure. Best for re-implementation in other graphics systems.
Per-subpath: Coordinate arrays split by each M command, giving you separate arrays for separate path sections.

Real-World Examples & Use Cases

Canvas Rendering

Extract SVG path coordinates as JSON to replay the path on an HTML5 Canvas element in JavaScript.

Animation Libraries

Export path coordinate data for use in animation libraries like GSAP or anime.js for motion path animation.

Game Development

Export SVG path coordinates as JSON for use as collision polygons or waypoints in a game engine.

Frequently Asked Questions

What format is the JSON output?▼

The output is a JSON array of point objects: [{"x": 10.5, "y": 20.3}, ...]. Each path element produces a separate array entry.

Can I get the raw SVG path commands instead of sampled points?▼

Yes. Toggle "Raw commands" mode to get the parsed path command objects (M, L, C, Q, A, Z) as JSON instead of sampled coordinate points.

What is point sampling?▼

SVG paths are mathematical curves. Sampling converts them to a list of discrete XY points at a specified interval. More points = smoother approximation.

Related Tools

Explore other tools in this category.

SVG Path to CSV Coordinates

Export SVG path coordinates as CSV data. Extract X, Y coordinate pairs from SVG paths for use in spreadsheets, databases, and data analysis tools.

SVG Path to XML Coordinates

Export SVG path coordinates as XML data. Convert SVG path geometry to structured XML for enterprise systems, APIs, and XML-based workflows.

SVG Coordinate Extractor

Extract all coordinate data from an SVG file — paths, points, and shapes. Output as JSON, CSV, or a flat coordinate list for programmatic use.

SVG Path Analyzer

Analyse SVG path data. View parsed path commands, bounding box, path length, control points, and a visual breakdown of each segment.

SVG to Array Generator

Convert SVG paths to coordinate arrays in JavaScript, Python, or other programming languages. Generate ready-to-use code arrays from SVG geometry.

SVG Path Length Calculator

Calculate the total length of SVG paths. Get exact path lengths in pixels, mm, or cm for animation timing, CNC cutting time estimation, and layout.