SVG Path Visualizer & Point Editor

An SVG path's d attribute is a dense string of letters and numbers, M, L, C, Q, and a long run of coordinates, that describes every anchor point and curve handle in the shape. Reading that string and mentally reconstructing what shape it draws takes real practice, and adjusting a specific curve by editing raw numbers means a lot of trial and error. This tool renders a path's actual geometry visually instead, anchor points as draggable circles and curve control handles as draggable squares, so you can reshape a curve by dragging exactly what you see rather than decoding coordinates by eye.

Anchor points versus control handles

A path is built from anchor points, the actual points the curve passes through, shown here as filled circles, and for curved segments, control handles, points that don't sit on the curve itself but pull and shape it, shown here as small squares connected to their anchor by a thin guide line. This is the same visual language used by professional vector editors like Illustrator and Figma's pen tool, dragging an anchor moves that point on the curve directly, while dragging a control handle bends the curve around it without moving the anchor point itself.

Line, quadratic, and cubic curve commands, all normalized

Path data can express the same kind of shape using several different command letters, an absolute or relative lineto (L or l), a shorthand horizontal or vertical lineto (H or V), a cubic Bezier curve with two control handles (C), a quadratic curve with one control handle (Q), and smooth-curve shorthand commands (S and T) that reflect the previous segment's control handle automatically. This tool parses all of these on input and normalizes everything into a consistent absolute-coordinate representation internally, so editing behaves predictably regardless of which specific syntax style the original path happened to use.

What isn't supported: arc commands

Being upfront about scope: elliptical arc commands (A) are not currently supported for visual point editing, they use a fundamentally different set of parameters, an x and y radius, a rotation angle, and large-arc and sweep flags, rather than the anchor-and-control-handle model every other path command shares. If a pasted path contains an arc command, this tool flags it clearly rather than silently dropping or misrepresenting it. Paths built from lines and Bezier curves, which covers the overwhelming majority of hand-drawn icons and logos, work fully.

Pasting a full SVG snippet versus just raw path data

You can paste either a bare d attribute value directly, or a full <svg>...</svg> snippet, in which case the tool automatically extracts the first path element's d value and, if present, the source SVG's viewBox dimensions, so the canvas matches the coordinate space the path was originally designed in. The viewBox width and height fields can also be adjusted manually at any time if the path's coordinate range needs a different canvas size to fit comfortably.

Runs entirely in your browser

Parsing, dragging, and regenerating the path data all happen directly in your browser using the SVG DOM's own coordinate transformation methods, nothing you paste is sent to a server. Once your curve looks right, our SVG Code Editor is a natural next step for combining it with other shapes or artwork, part of the same SVG & Design Tools collection this tool belongs to.