SVG Path Editor / Previewer - Live Path Visualizer

How to use this tool

1. Paste an SVG path `d` attribute into the text area.
2. Use the translate and scale controls. Lowercase relative commands are normalized to absolute commands before the transform.
3. Review the fitted previews and transformed command list, then copy the modified path.

SVG path command reference

• M x y - Move to (x, y) without drawing
• L x y - Line to (x, y)
• H x - Horizontal line to x
• V y - Vertical line to y
• C x1 y1 x2 y2 x y - Cubic Bézier curve
• S x2 y2 x y - Smooth cubic Bézier
• Q x1 y1 x y - Quadratic Bézier curve
• T x y - Smooth quadratic Bézier
• A rx ry x-rot large sweep x y - Arc
• Z - Close path

Lowercase versions of each command (m, l, h, v, c, s, q, t, a) use coordinates relative to the current point rather than the viewBox origin.

When you translate or scale a path, the editor converts those lowercase commands into equivalent uppercase absolute commands first. This preserves the path's geometry while making each endpoint and control point respond to the same transform. Smooth cubic (S) and quadratic (T) commands remain smooth commands, so SVG can still reflect their preceding control handles correctly. Arc endpoints move with the path, and nonuniform scaling updates the ellipse radii and rotation as well.

The modified path and the parsed command list describe the transformed output that the Copy button exports. This means a lowercase input may become uppercase in the result even when the translate and scale controls are at their defaults. The original preview continues to show the pasted path so you can compare it with the output.

SVG coordinate system

SVG uses a top-left origin: the point (0, 0) is at the top-left corner of the viewBox, and the Y axis increases downward. This is the opposite of standard mathematical convention where Y increases upward. Developers accustomed to Cartesian coordinates often find their shapes mirrored vertically when they first work with SVG paths.

For example, drawing a line from (0,0) to (100,100) goes diagonally down and right, not up and right as it would on a standard math graph.

Both preview panes use one shared, padded viewBox based on the bounds of the original and transformed paths. A path that uses a 24-unit icon grid or has coordinates greater than 100 can still be seen, and a translated path remains offset relative to its original. This fitted view is only for preview; it does not add a viewBox to the path data you copy.

Bézier control points explained

For the C (cubic) command - C x1 y1 x2 y2 x y - the pair (x1,y1) is the control handle for the start of the curve, and (x2,y2) is the control handle for the end. Think of each handle as a magnet that "pulls" the curve toward it without the curve actually reaching the handle point. Moving a handle further away makes the curve more pronounced; moving it close to the endpoint makes the curve tighter.

The Q (quadratic) command uses a single shared control point (x1,y1) that influences both ends of the curve simultaneously.

Practical path examples