SVG Path D to Array – Online Extract Coordinates

The d attribute in an SVG <path> element defines the shape of the path using a sequence of commands and coordinate values. It's the core data string that tells the browser how to draw lines, curves, arcs, and complex shapes. Each command is a letter (like M, L, C, Q, A, Z) followed by numerical parameters that specify positions, control points, radii, and flags. Understanding and parsing this data is essential for SVG manipulation, animation, and coordinate extraction in web development.

SVG path commands fall into several categories:
MoveTo: M (absolute) / m (relative) — lifts the pen and moves to a new position.
LineTo: L/l — draws a straight line. H/h for horizontal, V/v for vertical lines.
Cubic Bézier: C/c — with two control points. S/s for smooth continuation.
Quadratic Bézier: Q/q — with one control point. T/t for smooth continuation.
Arc: A/a — elliptical arc with 7 parameters (rx, ry, rotation, large-arc, sweep, x, y).
ClosePath: Z/z — closes the path back to the start of the subpath.

Absolute commands (uppercase letters like M, L, C) use coordinates relative to the SVG canvas origin (0,0). Relative commands (lowercase like m, l, c) use offsets from the current pen position. For example, M 50 50 L 100 50 draws from absolute (50,50) to (100,50), while m 50 50 l 50 0 draws the same shape but all coordinates are relative to the starting point. This tool can convert all relative commands to their absolute equivalents with the toggle switch.

Extracting coordinates from SVG paths is useful for many scenarios: animation (tweening along a path), collision detection, path manipulation (simplifying, smoothing, or transforming paths), data visualization (mapping path data to charts), CAD/CAM applications, geometric analysis (calculating path length, area, or bounding boxes), and converting SVG paths to other formats like canvas drawing commands or polygon approximations. Developers often need the raw coordinate arrays to feed into physics engines, animation libraries, or custom rendering pipelines.

The arc command is the most complex SVG path command with 7 parameters: A rx ry x-axis-rotation large-arc-flag sweep-flag x y. rx and ry are the ellipse radii. x-axis-rotation rotates the ellipse. large-arc-flag (0 or 1) chooses between the smaller or larger arc. sweep-flag (0 or 1) determines the drawing direction (clockwise or counter-clockwise). The final x,y is the endpoint. This tool correctly parses all 7 parameters and displays them clearly in the results table.

This SVG path parser offers three output formats: Full Objects — a JSON array of command objects with type, parameters, and computed absolute endpoint coordinates, ideal for programmatic use. Endpoints Only — a clean array of [x, y] coordinate pairs representing where the pen lands after each command, perfect for plotting or animation keyframes. Flat Array — all numeric values in a single flat array preserving the original order, useful for libraries that expect raw number sequences. All formats can be toggled between raw and absolute coordinates.

Yes, the parser is designed to be robust. It handles various number formats including integers, decimals, negative values, and scientific notation. It correctly processes implicit command repetitions (e.g., M 10 10 20 20 30 30 is parsed as MoveTo followed by implicit LineTo commands). It manages mixed separators (commas, spaces, tabs, newlines) and works with both standard and minified path strings. If a path contains errors, the tool attempts partial parsing and displays a helpful warning message rather than failing silently.