SVG Path Data Editor

You need to tweak an SVG icon’s path — move one control point 2 pixels left, convert a relative c command to absolute C, or understand what A 10 10 0 0 1 50 50 actually draws. The raw d attribute is a wall of numbers: M10 20 C30 40 50 60 70 80 A10 10 0 0 1 90 100 Z. You need to see each command as a separate editable segment with a live preview.

Why This Editor (Not the SVG Optimizer)

PureDevTools has an SVG Optimizer for stripping metadata and minifying SVGs. This tool is a path data editor — it parses the d attribute into individual commands (M, L, H, V, C, S, Q, T, A, Z), lets you edit each segment’s coordinates, normalizes relative to absolute commands, and minifies or prettifies the output. Use the optimizer for overall SVG cleanup; use this editor for precise path manipulation.

What Is SVG Path Data?

The SVG <path> element uses a d attribute that contains a mini-language of drawing commands. A single d string can describe any shape — from simple polygons to complex icons, logos, and illustrations. For example:

M 50 10 L 90 35 L 75 80 L 25 80 L 10 35 Z

This draws a pentagon by moving to a starting point and drawing lines to each vertex before closing the path. The compact string format is powerful but difficult to read and edit by hand, especially for curves and arcs.

This tool parses the d attribute into individual commands, shows each command’s parameters in a readable table, and lets you edit coordinates interactively while previewing the result in real time.

How to Use This Tool

1. Paste a path — Enter any SVG path d attribute string in the input area. The tool auto-parses as you type.
2. Inspect the Command Table — Switch to the Commands tab to see each command broken into its letter and parameters. Click any parameter to edit it directly.
3. Preview live — Switch to the Preview tab to see the path rendered as an SVG. The viewBox is automatically computed from the path’s bounding box.
4. Check path stats — The Stats tab shows total command count, absolute vs. relative breakdown, bounding box dimensions, and an estimated path length.
5. Normalize to absolute — Click the Normalize button to convert all relative commands (lowercase) to their absolute equivalents (uppercase). Useful before editing coordinates.
6. Choose output format — Toggle between Minified (compact, no whitespace) and Prettified (one command per line) output, then copy with one click.

SVG Path Command Reference

Absolute vs. Relative Commands

SVG path commands come in two flavors:

• Absolute (uppercase): Coordinates are measured from the SVG origin (0,0). L 50 80 means draw a line to the point (50, 80) in the SVG coordinate space.
• Relative (lowercase): Coordinates are measured from the current pen position. l 10 20 means draw a line 10 units right and 20 units down from wherever the pen currently is.

Relative commands make paths portable — you can move a path element using transform="translate(x,y)" and the internal coordinates stay consistent. Absolute commands are easier to edit by hand because coordinates are predictable regardless of context.

Use the Normalize to Absolute button to convert all relative commands to absolute, which is useful when you want to edit specific coordinate values without tracking the pen’s running position.

Understanding Arc Parameters

The arc command A has seven parameters, which are the most complex in the SVG path language:

When rx === ry, the arc is a circular arc. The large-arc and sweep flags together select which of the four possible arcs between two points to draw.

Understanding Cubic Bézier Curves

A cubic Bézier curve (C) has four points:

• P0: The current pen position (implicit — where the previous command left the pen)
• P1 (x1, y1): The first control point — pulls the curve near the start
• P2 (x2, y2): The second control point — pulls the curve near the end
• P3 (x, y): The end point — where the pen moves to

Dragging control points away from the curve creates more dramatic bends. When P1 and P2 are close to P0 and P3 respectively, the curve approximates a straight line.

The smooth variant S x2 y2 x y omits the first control point and instead reflects the second control point of the previous cubic curve, creating a smooth join.

Path Length Estimate

The “estimated path length” shown in the Stats tab is a numerical approximation:

• Line segments (L, H, V): exact length using the Pythagorean theorem
• Cubic Bézier curves (C, S): approximated by summing 10 chord segments along the curve
• Quadratic Bézier curves (Q, T): approximated as two line segments via the control point
• Arcs (A): approximated as the straight-line chord distance between endpoints
• Close (Z): the straight-line distance back to the subpath start

For production use cases that need exact arc and Bézier lengths, use a library like svgpath or compute the total length via SVGPathElement.getTotalLength() in the browser.

Minify vs. Prettify Output

The output format toggle changes how the path is serialized:

Minified (compact):

M50,10L90,35L75,80L25,80L10,35Z

• No spaces, parameters joined with commas
• Smallest possible byte size
• Ideal for production HTML/CSS

Prettified (readable):

M 50 10
L 90 35
L 75 80
L 25 80
L 10 35
Z

• One command per line with spaces between parameters
• Easy to read and manually diff
• Good for version control and debugging

Common Use Cases

Editing icon paths — Paste a path from an SVG icon library, adjust specific coordinates (like endpoint positions or control points), and copy the result back into your SVG.

Understanding path structure — The command table reveals the logical structure of complex paths that look like noise as raw strings. Each row is one drawing operation with its exact parameters.

Converting relative to absolute — Some path editors and scripts require absolute coordinates. Use Normalize to Absolute before further processing.

Debugging path issues — If a path renders incorrectly, the Stats panel shows the bounding box, which helps identify if coordinates are wildly out of the expected viewBox range.

Preparing for animation — GSAP and other animation libraries can animate along SVG paths using MotionPath. Clean, well-formatted path data makes it easier to calculate animation points.

Privacy and Security

All path parsing, editing, and rendering happens entirely in your browser using JavaScript. No path data is transmitted to any server. Your SVG data stays completely private on your device.

Frequently Asked Questions

Why does my path look different after normalization? Normalization only converts relative commands to absolute — it does not change the visual output. If the path looks different, check whether you had relative commands that depended on a starting position that has changed.

Can I edit curves by dragging? This tool uses a parameter table for precision editing. Visual drag-based editing requires a full SVG editor application like Inkscape or Figma. For interactive editing with draggable handles, consider boxy-svg.com or svg-edit.org.

What does “implicit command repetition” mean? In SVG paths, when a command letter is followed by more parameters than it needs, the extra parameters repeat the command. For example, L 10 20 30 40 is equivalent to L 10 20 L 30 40. This tool expands implicit repetitions into separate rows in the command table.

Why is my arc length just an approximation? Computing the exact length of an elliptical arc requires numerical integration of an elliptic integral — there is no closed-form solution. The browser’s SVGPathElement.getTotalLength() method gives an accurate result using native C++ code; this JavaScript implementation uses a chord approximation which is close but not exact for arcs.

Can I paste a full SVG file? No — this tool expects just the d attribute value (the path commands string), not the full SVG element or file. Extract the d attribute from your SVG element: <path d="...your path here..." />.