Visual SVG Path Editor

Draw SVG paths by clicking on the canvas. Add lines, curves, and close shapes. Edit points, import existing path data, or use presets.

Last reviewed: April 2026
Reviewed by , software engineer · last updated April 2026

New to this tool? Click here for instructions

x: 0, y: 0
Draw mode:
- Click to add line points
- Click+drag to add curves
- Undo removes last point
- Close Path adds Z command
- Snap aligns to 10px grid
Click on the canvas to start drawing. Hold Shift while clicking to add a bezier curve point.

Quick Answer

An SVG path editor lets you visually create and edit the "d" attribute of an SVG path — the sequence of move, line, curve, and arc commands that define a shape. Edit the path above and see the rendered result update live. It is useful for hand-crafting icons and fixing path data without redrawing the shape in a full graphics application.

How to Use the SVG Path Editor

The SVG Path Editor is a free online tool that allows you to draw and edit SVG paths visually. To use the editor, simply click anywhere on the canvas to add anchor points and build a path. Each click extends the path with a line segment. You can also edit existing points, create bezier curves, and import existing path data. The editor supports various SVG path commands, such as M (move to), L (line to), H (horizontal line to), V (vertical line to), C (cubic bezier curve), Q (quadratic bezier curve), A (arc), and Z (close path). Click anywhere on the canvas to add anchor points. Use the Draw mode to create lines, curves, and close shapes. Edit existing points by clicking and dragging them. Create bezier curves using control handles. Import existing path data by pasting the SVG path d attribute.

  • Click anywhere on the canvas to add anchor points.
  • Use the Draw mode to create lines, curves, and close shapes.
  • Edit existing points by clicking and dragging them.
  • Create bezier curves using control handles.
  • Import existing path data by pasting the SVG path d attribute.

When to Use the Tool in Real Workflows

The SVG Path Editor is ideal for designers, developers, and anyone who needs to create or edit SVG paths. It is particularly useful when working on projects that require precise control over SVG shapes, such as creating icons, logos, and illustrations. The editor's grid snapping feature ensures that points are aligned to a 10-pixel grid, making it easier to create symmetrical shapes and align elements to clean coordinate values.

How It Works

The SVG Path Editor uses a simple and intuitive interface to allow users to draw and edit SVG paths. The editor supports various SVG path commands, such as M (move to), L (line to), H (horizontal line to), V (vertical line to), C (cubic bezier curve), Q (quadratic bezier curve), A (arc), and Z (close path). The editor also includes a Draw mode, Edit Points mode, and Import mode, allowing users to create, edit, and import SVG paths as needed.

Tips, Edge Cases, or Limitations

The SVG Path Editor is a powerful tool for creating and editing SVG paths, but it has some limitations. For example, the editor does not support advanced SVG features, such as filters or animations. Additionally, the editor may not work properly on older or less powerful browsers. However, the editor is generally easy to use and can be a valuable tool for anyone who needs to create or edit SVG paths.

Frequently Asked Questions

SVG path data uses a compact notation to describe shapes using drawing commands followed by coordinate pairs. The commands help you read and write path data manually, and also helps debug paths that don't look as expected.
In Draw mode, you can click anywhere on the canvas to add anchor points and build a path. Each click extends the path with a line segment. You can also use the Draw mode to create lines, curves, and close shapes.
To create a bezier curve, use the C command followed by two control points and the endpoint. The control points act like magnetic handles, pulling the curve towards them without necessarily passing through them.
The editor includes several preset shapes, such as an arrow, heart, star, checkmark, wave, plus, shield, and diamond. These shapes can be loaded as starting points for your path data.
Once you have path data you're happy with, you can paste the path d attribute directly into a <path> element in your HTML SVG. You can also use the complete SVG export and reference it with an <img> element.

Quick reference

Visual SVG Path Editor Quick Reference
Command Description Common Values Comparison
M Move to absolute coordinate x,y Equivalent to L for line drawing
L Line to absolute coordinate x,y Requires M to define starting point
C Cubic Bézier curve x1,y1 x2,y2 x,y More complex than Q for smooth curves
Q Quadratic Bézier curve x1,y1 x,y Less control than C for curve shape
Z Close path by connecting last point to first None Automatically creates straight line
stroke Outline color or style #FF0000 | 2px dashed Contrasts with fill for visual clarity

Example walk-through

Worked example: step-by-step

Step 1. Open the Visual SVG Path Editor tool and create a new SVG canvas with a 500x500px viewport.

Step 2. Use the path tool to draw a triangle by entering the following SVG path data in the input field:

M 100 100 L 300 50 L 200 300 Z

Step 3. Adjust the control points using the visual editor's drag-and-drop interface to modify the path shape.

Step 4. Preview the rendered SVG path in the canvas and verify the output matches the expected geometry.

Step 5. Export the final SVG code with the modified path data for use in other projects.

<svg width="500" height="500">
  <path d="M 100 100 L 300 50 L 200 300 Z" fill="skyblue" />
</svg>

step by step transformation demonstrates how path data is visually edited and converted into functional SVG markup.