Vectopea
Open editor
Free path editor

SVG path editor

Paste SVG path data to see it drawn with every anchor point, get a normalised absolute version, and open it in a full node editor to reshape it.

Absolute cubic path

M 12 21.35 L 10.55 20.03 C 5.4 15.36 2 12.28 2 8.5 C 2 5.42 4.42 3 7.5 3 C 9.24 3 10.91 3.81 12 5.09 C 13.09 3.81 14.76 3 16.5 3 C 19.58 3 22 5.42 22 8.5 C 22 12.28 18.6 15.36 13.45 20.04 Z

1 subpath · 8 nodes

Runs in your browser · Nothing is uploaded · No account

SVG path commands at a glance

Uppercase commands use absolute coordinates; lowercase commands are relative to the current point.

  • M x y move to a point and start a new subpath.
  • L x y, H x, V y draw straight lines.
  • C x1 y1 x2 y2 x y cubic Bézier curve with two control points; S is its smooth shorthand.
  • Q x1 y1 x y quadratic Bézier; T is its smooth shorthand.
  • A rx ry rotation large-arc sweep x y elliptical arc.
  • Z close the subpath back to its start.

Editing nodes in Vectopea

  1. Click Edit in Vectopea. The path opens as an editable object.
  2. Press A for direct selection and drag anchors or handles. Hold Shift to select several nodes.
  3. Double-click a segment to insert a node, Alt-click an anchor to toggle it between smooth and corner, and press Delete to remove selected nodes.
  4. Combine paths with the boolean operations (unite, minus front, intersect, exclude).
  5. Watch the live code panel update, then export the SVG or copy the new d attribute.

Related tools

For whole files rather than single paths, use the SVG code editor or the full SVG editor online.

Questions

How do I edit an SVG path visually?

Paste the path's d attribute above to preview it, then click Edit in Vectopea. In the editor, press A for the direct selection tool to drag anchors and Bézier handles, double-click a segment to add a node, Alt-click an anchor to switch between smooth and corner, and press Delete to remove selected nodes.

Can I paste a whole <path> element?

Yes. If you paste a full tag, the d attribute is extracted automatically.

What does "absolute cubic path" mean?

The same shape rewritten using only absolute M, C, L and Z commands. Relative commands, shorthand curves (S, T), quadratics and arcs are converted, which makes the data easier to animate, morph or process in code.

Why do my path's points look huge or tiny?

The preview fits the path's own bounding box, not the original SVG's viewBox, so any path is visible regardless of its coordinates.

More free SVG tools

SVG editor online

The full vector editor: pen tool, node editing, boolean operations, layers and export.

SVG Viewer

Preview any SVG file or snippet, check its size and viewBox, and read the markup.

SVG to PNG Converter

Convert SVG to a crisp PNG at up to 8× with a transparent background.

SVG Optimizer

Compress and minify SVG files with SVGO, right in your browser.

SVG Color Changer

Find every colour in an SVG and swap it for a new one.

Resize SVG

Change an SVG's width and height or make it responsive, without distortion.

Crop SVG

Trim empty space around SVG artwork by fitting the viewBox to the content.

SVG Code Editor

Edit SVG markup with a live preview, then keep editing visually.