SVG Path Editor

SVG Path Editor Help

Tools

Select Tool

Click to select points. Drag to move them. Shows control points for curves.

Pen Tool

Click to add new points to your path. Uses the currently selected command.

Move Tool

Click and drag to move the entire path around the canvas.

Delete Tool

Click on points to remove them from your path.

Path Commands

Move To

Starts a new sub-path at the given coordinates.

Line To

Draws a straight line to the given coordinates.

Horizontal Line

Draws a horizontal line to the given x coordinate.

Vertical Line

Draws a vertical line to the given y coordinate.

Cubic Bézier

Draws a cubic Bézier curve with two control points.

Quadratic Bézier

Draws a quadratic Bézier curve with one control point.

Close Path

Closes the current sub-path with a straight line.

Controls

Stroke & Fill

Change the appearance of your path with color pickers and stroke width slider.

Zoom

Adjust the zoom level to work on fine details or see the big picture.

Clear & Download

Start fresh with Clear or download your creation as an SVG file.

Path Data

The generated SVG path data is shown below the canvas and can be copied.

Tips & Tricks

Hold Shift while dragging to constrain movement to horizontal/vertical
Double-click a point to change its command type
Use the Properties panel to precisely position points

SVG Path Editor

SVG Path Editor Help

Tools

Select Tool

Pen Tool

Move Tool

Delete Tool

Path Commands

Move To

Line To

Horizontal Line

Vertical Line

Cubic Bézier

Quadratic Bézier

Close Path

Controls

Stroke & Fill

Zoom

Clear & Download

Path Data

Tips & Tricks

Tools

Path Commands

Canvas

Path Data

Point Properties