SVGSketch Feature

SVG Path Editor - Edit SVG Path Data and Bezier Curves

Edit SVG path data online. Drag anchor nodes and Bezier handles, edit the d attribute command by command, simplify curves, and export clean SVG.

Open SVGSketch

Quick answer

SVGSketch is an online SVG path editor for real path data. Open or draw a path, drag anchor nodes and Bezier handles on the canvas, insert or remove nodes, and edit the raw d attribute command by command in the Path Editor panel. Simplify dense paths, reverse path direction, and export clean SVG that keeps standard path syntax.

Visual examples

Square anchors, round handles, hovered segment
Anchor nodes and Bezier handles The same controls as the canvas: square anchors - green start, red end, filled when selected - round Bezier handles, and a highlighted segment you can drag to bend or double-click to insert a node.
Path EditorPath DataM20 80C45 20 95 20 120 80L190 80A30 30 0 0 1 250 80ZCommands:5Chars:62CommandsMCLAZ20804520952012080190803030025080×××××Click a row to select that node on the canvas
The Path Editor panel Edit the raw d attribute with syntax highlighting, or work command by command: change types, tune parameters, toggle arc flags, and insert or delete commands. Rows and canvas nodes select each other.
Before10 nodesAfter2 nodesFewer nodes, same silhouette
Simplify a dense path Simplify Path (Ctrl+Shift+{) removes redundant nodes within an adjustable tolerance while preserving the silhouette - ideal after vectorizing or freehand drawing.

Edit SVG path data visually

The SVG path editor works on the same path data that appears in your exported markup. You can mix every path command - M, L, H, V, C, S, Q, T, A, and Z, absolute or relative - in a single path, reshape segments on the canvas, and keep the result as standard SVG instead of an editor-only object.

Switch to the Edit tool (E) to work node by node: drag the square anchor nodes, pull the round Bezier handles, drag a segment directly to bend it, and double-click a segment to insert a node exactly where you clicked. On open paths the start node is drawn green and the end node red, so path direction is always visible on the canvas.

Edit the d attribute in the Path Editor panel

The Path Editor panel (Window > Panels > Path Editor) shows the selected path's raw d attribute in a live code editor with per-command syntax highlighting. Type or paste path data and the canvas follows as you edit; invalid data is flagged instead of silently applied, and every change lands as a single undoable step.

Below the editor, a structured table lists every command with a color-coded type badge, numeric inputs for each parameter, and checkboxes for arc flags. Change a command type - say a straight L into a cubic C - and its parameters convert in place. Insert or delete commands per row, click a row to select the matching node on the canvas, and canvas selections highlight their rows in return. The same panel also edits text-on-path baselines and animation motion paths.

Draw deliberate paths or quick freehand shapes

Use the Path tool (B) when you want exact control over each point and curve, the Polyline tool (P) for straight-segment outlines, or the Freehand tool (F) when you want to sketch first and clean up later; SVGSketch fits the stroke into editable vector geometry so it can still be refined node by node.

Straight segments can become curves, rough curves can be smoothed, and imported paths can be adjusted with the same controls as paths you draw from scratch.

Simplify paths without losing the shape

Traced artwork and freehand drawing often create too many nodes. Shape > Simplify Path (Ctrl+Shift+{) reduces path complexity while preserving the silhouette, with an adjustable tolerance in the edit toolbar, which keeps exported SVG easier to inspect, animate, and reuse in code. Complexify Path does the reverse when you need more control points to work with.

You can also reverse path direction when winding order, markers, or downstream path effects need the path to run the other way, and close, open, join, or split paths - down to welding and breaking individual nodes - from the Shape menu and the edit toolbar.

Prepare paths for clean SVG export

Because edits stay in normal SVG path syntax, the final artwork can be exported as readable markup and opened in other tools. Designers get canvas-level control, and developers get path data that is not hidden behind proprietary metadata.

FAQ

Can I edit the raw SVG path d attribute?

Yes. The Path Editor panel shows the selected path's d attribute in a live editor with syntax highlighting plus a command-by-command table. It accepts every SVG path command - M, L, H, V, C, S, Q, T, A, and Z - in absolute or relative form.

Can I edit Bezier handles in the SVG path editor?

Yes. You can drag cubic and quadratic Bezier handles on the canvas, reshape curved segments, and convert straight segments into curves.

Can I convert a straight segment into a curve?

Yes. Change the command type in the Path Editor panel - for example L to C - and the parameters convert in place, ready to reshape with the segment's new handles on the canvas.

Does it simplify paths with too many nodes?

Yes. Shape > Simplify Path reduces the number of anchor points while keeping the overall shape intact, and Simplify Options exposes the tolerance so you control how aggressive the reduction is.

Can I reverse an SVG path direction?

Yes. Shape > Reverse Path Direction flips the start and end of the path, which helps with winding order, marker direction, and path effects that depend on where the path begins.

Open your SVG in SVGSketch

Start with a blank canvas, import an SVG, or use the editor as a conversion and cleanup step.

Open SVGSketch