SVG Path Editor
Visual SVG path editor with live preview, draggable control points, command breakdown, and transform controls
Live Preview
Shape Presets
Transform
Path Data
Command Breakdown
Command Reference
M x yMove to pointL x yLine to pointH xHorizontal lineV yVertical lineC x1 y1 x2 y2 x yCubic bezierS x2 y2 x ySmooth cubicQ x1 y1 x yQuadratic bezierT x ySmooth quadA rx ry rot laf sf x yArcZClose pathUppercase = absolute coordinates. Lowercase = relative to current point.
Frequently Asked Questions
What is an SVG path d attribute?
The d attribute in an SVG <path> element contains a series of commands and coordinates that define the shape. Commands include M (move to), L (line to), C (cubic bezier), Q (quadratic bezier), A (arc), and Z (close path). Each command can be uppercase (absolute) or lowercase (relative).
How do I use the draggable control points?
Click and drag any point on the SVG preview to move it. Blue circles are endpoint/anchor points, while orange diamonds are bezier control points. The path data updates in real-time as you drag. Control lines show the relationship between control points and their anchors.
What are the transform controls?
The Scale control multiplies all coordinates by a factor (e.g., 2x makes the path twice as large). Rotate spins the path around its center by the specified degrees. Translate shifts the entire path by X and Y offsets. Click Apply to modify the path data.
Can I export the edited SVG?
Yes. Use 'Copy Path' to copy just the optimized d attribute to your clipboard, or 'Export SVG' to download a complete SVG file containing your path with proper viewBox and xmlns attributes.