Your files never leave your device. All processing happens locally in your browser.
How do I edit an SVG path online for free without uploading anything?
Open the SVG Path Editor and paste a d string or a full <svg>/<path> (or pick a starter shape). The path is parsed into typed commands and drawn on a pan/zoom grid with draggable anchor points and Bézier control handles — drag them and the d updates live. Use the command list to edit exact numbers, change a command’s type, flip it absolute↔relative, or insert / delete points, then copy the d string or a full <svg> and download the .svg. Everything runs 100% in your browser — nothing is uploaded.
Drag round anchors and square control handles; snap to a grid, pan and scroll to zoom
Full command coverage: M L H V C S Q T A Z in both absolute and relative form
Arcs expose rx, ry, rotation and the two 0/1 flags; S / T show their reflected control
Copy the live d string or a complete <svg>, download .svg — all on-device
What is
SVG path editor
An SVG path editor is a tool for editing the <path> element’s d attribute — the compact string of drawing commands (moveto, lineto, cubic and quadratic Béziers, elliptical arcs and close) that defines a vector shape. A visual editor parses that string into typed commands, draws the shape with draggable anchor points and control-point handles, and serialises the edits back to a d string. A 100% client-side editor does all of this in the browser, so the path never leaves your device.
No. The path is just a text string held in the page; parsing, dragging and export all run locally in JavaScript, and the .svg download is built in memory. Nothing is uploaded and there is no CDN in the path.
The SVG Path Editor is 100% client-side. A pure engine (svgPathEngine.ts) tokenises the d string into typed commands and resolves them to absolute geometry entirely in your browser; dragging a handle, editing a number, converting relative↔absolute and serialising back all happen in memory. The copyable <svg> and the .svg download are generated locally from the same geometry you see. Nothing is fetched, uploaded, logged or stored on a server, there is no CDN in the editing or export path, and fonts are your device’s system fonts. The only optional network use is consent-gated ads, and the tool works offline once cached.
All of them: moveto (M/m), lineto (L/l, H/h, V/v), cubic (C/c, S/s), quadratic (Q/q, T/t), elliptical arc (A/a) and close (Z/z), in both absolute and relative form.
It covers the full standard path grammar. You can drag anchor points for every command and drag control handles for cubic (C) and quadratic (Q) curves. The smooth commands S and T infer their first control point by reflecting the previous curve’s handle; that reflected point is shown as a hollow square, and dragging it promotes the segment to an explicit C or Q. Elliptical arcs (A) have no control points — you drag the endpoint on the canvas and set the two radii, the x-axis rotation and the large-arc and sweep flags (0/1) in the command list. You can also change a command’s type, flip any segment absolute↔relative, convert the whole path either way, insert a point after any command, or delete a point.
Uppercase commands use absolute coordinates; lowercase use coordinates relative to the current point. The shape is identical — the editor converts between them without changing the geometry.
In an SVG path, an uppercase command letter (M, L, C, A …) takes absolute coordinates measured from the SVG origin, while the lowercase form (m, l, c, a …) takes coordinates relative to the current point — and for a relative curve every coordinate pair, including the control points, is relative to that same current point. Relative paths are compact and easy to translate as a whole, but editing one point shifts everything downstream; absolute paths are more verbose but each point is independent. This editor lets you toggle a single segment or the whole path between the two while preserving the exact shape. Note that an arc’s radii, rotation and flags are the same in both forms — only its endpoint is relative.
Yes. Paste a d string or a full <svg>/<path> to load and edit it, then copy the live d string or a complete <svg> and download a .svg — all generated locally.
The Import box accepts either a bare d string or a whole <svg>/<path> element — the editor extracts the d (and the viewBox when present) and loads it for editing, with a clear error if the path is malformed. Six starter shapes (heart, star, wave, arrow, blob, pie) give you a quick beginning. As you edit, the formatted d string updates live and a full, framed <svg> (with your fill, stroke and stroke-width) is built alongside it; one tap copies either, and Download saves the .svg. Every output is produced on-device from the same geometry, so export before you close the tab.
Detailed Explanation
📖How It Works
What the SVG Path Editor Does
The SVG Path Editor is a 100% client-side visual editor for the SVG <path> element’s d attribute — the compact instruction string (M move, L/H/V lines, C/S cubic and Q/T quadratic Béziers, A elliptical arcs, Z close) that defines a vector shape. It parses that string into typed commands, resolves them to absolute geometry, and renders the path on a pan/zoom grid with draggable anchor points and control-point handles, so you edit the curve directly while the d string updates live. Everything runs in the browser and the path is never uploaded.
Edits a single <path> d attribute visually — anchors and Bézier handles
Covers M L H V C S Q T A Z in both absolute and relative form
Parse → absolute geometry model → serialise, all in the browser
Live d string plus a copyable, downloadable full <svg>
⚙️Methodology
How Parsing and the Geometry Model Work
A pure engine (svgPathEngine.ts) tokenises the d string with a scanner that handles implicit repeated commands (extra coordinate pairs after a moveto become linetos) and arc flags written as bare 0/1 digits without separators. Each command is then resolved to an absolute Segment carrying its start, end and any control points: for a relative command every coordinate pair is offset from the current point, and for the smooth commands S and T the first control point is computed by reflecting the previous C/S or Q/T control about the current point. Because the on-screen handles are derived from this same model, what you drag matches exactly what the browser renders.
Tokeniser handles implicit linetos and separator-less arc flags
Relative pairs offset from the current point; absolute measured from origin
S/T first control = reflection of the previous curve’s handle
Handles drawn from the resolved absolute model → what-you-see-is-what-you-edit
Arc bounding box uses the SVG endpoint→centre parametrisation, sampled
🔧Technical Details
Editing, Conversion and Export Internals
Dragging a handle calls setPoint, which writes the new coordinate back into the command in the correct absolute or relative form; dragging the reflected control of an S or T promotes it to an explicit C or Q so the edit persists. The engine also offers immutable helpers to change a command’s type (seeding sensible control points), toggle a single segment or the whole path between absolute and relative while preserving geometry, insert or delete points, and close the path with Z. The page maps pointer coordinates into SVG user units via getBoundingClientRect on a viewBox-driven surface (aspect-locked 4:3 so the mapping is exact), supports snap-to-grid, pan, wheel-zoom around the cursor, fit-to-view and undo/redo, and serialises to a compact d string and a framed <svg> built entirely in memory.
setPoint writes edits in the segment’s own absolute/relative form
Dragging an S/T ghost control promotes the segment to explicit C/Q
Helpers: changeType, toggleRelative, toAbsolute/toRelative, insert/delete, close
Pointer→SVG mapping on an aspect-locked viewBox; snap, pan, wheel-zoom, fit, undo/redo
Exports a formatted d string and a framed <svg>, built in memory
📋Use Cases
When to Reach for This
Reach for it to hand-tune an icon or logo path, fix a wonky node exported from a design app, learn how the d syntax and Bézier handles actually behave, build a simple shape from a starter, or normalise a path to absolute coordinates before animating it. Because you can paste a d string or a whole <svg>/<path>, tweak a few points, and copy the result straight back, it slots neatly next to a code editor for SVG icon work — with no account, no watermark and no upload.
Hand-tune icon and logo paths; fix nodes exported from design apps
Learn the d syntax and Bézier handles interactively
Normalise to absolute coordinates before animating or morphing
This is a precise single-<path> editor, not a full illustration app: it edits one path’s d, not multi-shape documents, groups, gradients, filters, transforms or text. Elliptical arcs have no control points — you drag the endpoint and set rx, ry, the x-axis rotation and the large-arc/sweep flags numerically — and the smooth S/T commands are converted to explicit C/Q the instant you drag their reflected handle. Editing or deleting a point that later relative commands depend on shifts everything downstream (convert to absolute first for local moves), output coordinates are rounded to two decimals, and the tool does not simplify, smooth or boolean-combine paths.
One <path> only — no groups, gradients, filters, transforms or text
Arcs edited numerically (rx, ry, rotation, flags); only the endpoint is draggable
Dragging an S/T ghost handle converts the segment to C/Q
Relative edits ripple downstream; convert to absolute for local moves
Coordinates rounded to 2 decimals; no simplify / smooth / boolean operations
🔒Privacy & Security
Private by Design
Everything happens on your device. The path is a plain text string held in the page; the engine parses, edits and serialises it in JavaScript, and the live <svg> is a React element drawn from the same commands. The copyable <svg> and the .svg download are generated in memory from the geometry you see — nothing is fetched, uploaded, logged or stored on a server, there is no CDN in the editing or export path, and fonts are your device’s system fonts. The only optional network use is consent-gated ads; the tool works offline once cached and keeps no accounts or tracking.
The path is local text — parsed, edited and serialised in the browser
Copyable <svg> and .svg download built in memory from the same geometry
No server, no CDN, no upload; system fonts only
Optional consent-gated ads; works offline once cached; no accounts or tracking
Ways to edit an SVG path
Approach
How it works
Trade-off
Used here
This client-side editor
Parse the d into typed commands; drag anchors/handles on a grid; edit numbers; export d + <svg>
Private + free + full command coverage; single-path only
Yes
Hand-editing the d string
Type command letters and numbers in a code editor
Total control, but hard to read and easy to break; no visual feedback
Alternative
Vector app (Illustrator, Inkscape, professional design tools)
Full drawing tools with pen and node editors
Very powerful, but heavier and files often round-trip through an app or cloud
No
Path-generation libraries
Compute d strings in code (d3, svg.js …)
Great for data-driven shapes, but not for hand-tuning one path
No
Everything here runs in the browser; the path is never uploaded. Covers the full SVG path grammar (M L H V C S Q T A Z). As of July 2026.
