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.

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.

How to Use the SVG Path Editor

  1. Draw mode — click anywhere on the canvas to add anchor points and build a path. Each click extends the path with a line segment.
  2. Edit Points mode — click and drag existing anchor points to reposition them. Bezier control handles can also be dragged.
  3. Import mode — paste existing SVG path d attribute data to load it into the editor for visualization or modification.
  4. Presets — load common shapes (arrow, heart, star, checkmark) as starting points.
  5. Export — copy the path data or the complete SVG element, or download the SVG file.

Understanding SVG Path Commands

SVG path data uses a compact notation to describe shapes using drawing commands followed by coordinate pairs. Understanding the commands helps you read and write path data manually, and also helps debug paths that don't look as expected:

  • M x y — Move To: lifts the pen and moves to the specified coordinates without drawing. Every path starts with M. Lowercase m uses relative coordinates.
  • L x y — Line To: draws a straight line from the current position to (x, y). Lowercase l is relative.
  • H x — Horizontal Line To: draws a horizontal line to x at the current y position. Lowercase h is relative.
  • V y — Vertical Line To: draws a vertical line to y at the current x position.
  • C x1 y1 x2 y2 x y — Cubic Bezier Curve: draws a curve to (x, y) using (x1, y1) as the start control point and (x2, y2) as the end control point.
  • Q x1 y1 x y — Quadratic Bezier Curve: draws a curve to (x, y) with a single control point at (x1, y1).
  • A rx ry x-rotation large-arc sweep x y — Arc: draws an elliptical arc. The complex parameter set controls the arc's size, rotation, direction, and endpoint.
  • Z — Close Path: draws a straight line back to the start of the current path and closes it.

Bezier Curves in SVG

Bezier curves are the foundation of smooth, organic shapes in SVG. A cubic bezier curve (C command) has two control points that act like magnetic handles, pulling the curve towards them without necessarily passing through them. This gives designers fine-grained control over the curve's tension and direction. Most illustration software (Illustrator, Figma, Inkscape) exposes these as "handles" — the colored line extending from an anchor point. Understanding bezier curves helps you comprehend why an exported SVG path has certain characteristics and how to manually edit path data for small adjustments.

Grid Snapping

The grid snap feature aligns points to a 10-pixel grid, making it easier to draw symmetrical shapes and align elements to clean coordinate values. Clean coordinates like (50, 100) produce smaller, more readable path data than floating-point values like (49.7, 100.3). For icon design, snapping to a grid is essential for crisp rendering at small sizes. The 400×400 canvas maps to a standard SVG coordinate system, so coordinates can be used directly in an SVG with viewBox="0 0 400 400".

Using Paths in Real Projects

Once you have path data you're happy with, there are several ways to use it. You can paste the path d attribute directly into a <path> element in your HTML SVG. You can use the complete SVG export and reference it with an <img> tag or as a CSS background (use our SVG to CSS tool). You can also copy the SVG into an illustration tool like Inkscape or Figma for further refinement. Before deploying, run the SVG through our SVG Optimizer to minimize file size.

Frequently Asked Questions

SVG path data is the content of the d attribute on an SVG path element. It uses commands (M for move, L for line, C for cubic bezier, Q for quadratic bezier, A for arc, Z for close) followed by coordinates to describe any shape. Path data is the most powerful and flexible SVG element.
In Draw mode, click anywhere on the canvas to add anchor points. Each click adds a straight line segment from the previous point. The path data updates in real time. Press the Close Path button or Z to close the shape, or use Undo to remove the last point.
In Draw mode, hold Shift while clicking to insert a curve point. In Edit Points mode, drag the circular control handles (shown as smaller circles connected to anchor points) to adjust bezier curve shapes.
The Presets mode provides ready-made SVG path data for Arrow, Heart, Star, Checkmark, Wave, Plus, Shield, and Diamond. These can be loaded and then edited in the canvas, or copied directly for use in your project.
Copy the path data (d attribute value) from the output and use it in <path d="YOUR_PATH_DATA" fill="#color"/>. You can also use "Copy SVG" to get a complete SVG element ready to embed or save as a file.