SVG Path Editor: Visually Edit Bezier Curves and Path Data Online

Every SVG shape ultimately reduces to one humble attribute: d. Whether you are fine-tuning an icon, rescuing a curve that a design tool exported badly, or hand-crafting a decorative shape divider, at some point you will find yourself staring at a string like M 40 60 C 40 20 120 20 120 60 S 200 100 200 60 Z and wondering which number controls which part of the curve.

The SVG Path Editor removes that guesswork. Paste any path data and the tool renders it instantly on an interactive canvas, where you can drag anchor points and bezier control handles until the curve looks exactly right. It supports every standard path command — M, L, H, V, C, S, Q, T, A, and Z — in both absolute and relative form, converts everything to clean absolute coordinates, and hands you back an optimized path string you can copy or download.

Because everything runs entirely in your browser, there are no uploads, no accounts, and no waiting. It is the fastest way to go from "almost right" to "pixel-perfect" without booting up a full design application.

Why Use the SVG Path Editor?

• Visual editing beats coordinate math. Instead of nudging numbers and re-rendering to see what changed, you grab a point and drag it. The feedback loop shrinks from seconds to zero, and your eyes stay on the shape instead of the text.
• Full bezier support with visible handles. Cubic (C/S) and quadratic (Q/T) curves show their control handles as dashed lines, so you can see exactly how tension is distributed along the curve and reshape it intuitively — just like the pen tool in professional design software.
• Snap-to-integer keeps coordinates clean. Hand-edited and machine-exported paths often accumulate ugly decimals. Optional grid snapping rounds every coordinate to whole numbers, which produces crisper rendering, smaller files, and path data that humans can actually read.
• Normalized, optimized output. The editor converts relative commands to absolute ones and emits a compact, consistently formatted path string. That output drops straight into your SVG, React component, or CSS clip-path without cleanup.
• 100% client-side and private. Your path data never leaves your machine. There is no upload step, no signup, and the tool keeps working offline once the page is loaded.
• Zero-install convenience. Design tools are heavy. For a quick five-point tweak, opening a browser tab is simply faster than launching an application, importing the file, and exporting it again.

Key Features

• The Commands / Points / Chars counters update live as you edit, so you can watch your path get leaner while you work — a handy companion to the on-site SVG Optimizer.
• Invalid input fails gracefully: if the parser cannot make sense of your path syntax, you get a clear error message instead of a silent blank canvas.
• The Load Example button drops in a sample curve (M 40 60 C 40 20 120 20 120 60 S 200 100 200 60 Z) so you can explore the editing interaction before pasting your own data.

How to Use the SVG Path Editor

1. Open the SVG Path Editor and locate the path data input, or click Load Example to start from a sample curve.
2. Paste your path data — the d attribute string from your SVG markup. The live preview renders it immediately.
3. Drag the handles in the preview. Square handles are anchor points (on-curve); round handles are bezier control points (off-curve), connected by dashed lines.
4. Toggle Snap to integer if you want coordinates rounded to the grid — useful for icons where crisp, whole-number paths render best.
5. Copy or download the edited output. Copy the optimized path string for direct use, or download the result as an .svg file.

Understanding SVG Path Data

To edit paths confidently, it helps to know what the commands mean. The d attribute is a sequence of drawing instructions, each made of a letter followed by numbers.

The command set

• M x y — Move to: lifts the pen and starts a new subpath at an absolute position.
• L x y — Line to: draws a straight line to the point.
• H x / V y — Horizontal and vertical lines (one coordinate only).
• C x1 y1 x2 y2 x y — Cubic bezier: two control points shape the curve's entry and exit tension.
• S x2 y2 x y — Smooth cubic: mirrors the previous control point, keeping curvature continuous.
• Q x1 y1 x y — Quadratic bezier: a single control point, lighter but less flexible than cubic.
• T x y — Smooth quadratic: mirrors the previous quadratic control point.
• A rx ry rot large sweep x y — Arc: an elliptical arc segment with radii, rotation, and two flags.
• Z — Close path: connects back to the subpath's start point.

Absolute vs relative

Uppercase commands use absolute coordinates; their lowercase counterparts (m, l, c, …) use coordinates relative to the current pen position. Relative paths are compact but hard to edit by hand because every coordinate depends on the previous one. The editor normalizes everything to absolute coordinates while you work, then outputs a clean string — you get the readability of absolute with none of the manual conversion pain.

Anchors vs control points

Anchor points lie on the curve; control points hang off it, connected by dashed handle lines. The curve never passes through a control point — instead, the control point "pulls" the curve toward it. On the canvas, squares mark anchors and circles mark control points, mirroring the convention used by professional vector tools. Once you can see the handles, concepts like smooth (S/T) commands stop being abstract: they simply reuse the mirrored position of the last control point.

Practical Use Cases

Fine-tuning icons and logos

Exported icons frequently land almost right — a corner too sharp, a terminal curve slightly clipped. Instead of re-exporting from the design tool, paste the icon's d attribute into the editor, nudge the one anchor or handle that is off, and copy the corrected path back. What used to be a design-tool round-trip becomes a thirty-second fix.

Crafting custom illustrations and decorative shapes

For hero-section blobs, wave dividers, or hand-drawn accents, you often want to sculpt curves by eye rather than by math. Drag anchors and handles on the live canvas until the silhouette feels right, enable snapping to keep the data tidy, then download the .svg directly. Pair the result with the SVG Preview tool to sanity-check it at real size before shipping.

Debugging and cleaning exported path data

Optimizers and exporters sometimes emit relative commands, odd flag combinations, or unnecessarily long segment chains that break downstream consumers. Because the editor parses all commands and re-emits a normalized absolute form, pasting suspicious data is a quick way to see the true structure of a path — and the live error message tells you immediately when the syntax is genuinely broken. Once the shape is verified here, run it through the SVG to JSX Converter to drop it straight into a React component.

Building clip-paths and shape dividers

CSS clip-path: path('…') and SVG <clipPath> elements both consume the same path syntax. Design a smooth curve in the editor, copy the optimized output, and use it as a mask for images or section backgrounds — no image editor required.

Best Practices

• Start from an existing path, not a blank canvas. Even a rough approximation gives you anchors to drag; shaping beats authoring from zero.
• Prefer smooth commands for flowing curves. S and T keep curvature continuous across joins, avoiding the subtle kinks that paired C segments can produce when handles drift out of alignment.
• Snap to integers for UI assets. Whole-number coordinates render crisper on pixel grids and keep files small; reserve decimal precision for large print-scale illustrations.
• Keep handles short and purposeful. Long handles create wild swings that are hard to control; more anchors with shorter handles usually produce a more predictable curve.
• Validate before shipping. If a downstream tool chokes on a path, paste it here — a fast parse error or successful normalization tells you instantly whether the data or the consumer is at fault.
• Copy, don't retype. The output string is already formatted and optimized; manually re-typing it invites transcription errors.

Start Editing Your SVG Paths Today

Path data does not have to be intimidating. With the SVG Path Editor, every anchor and handle is a drag away, coordinates stay clean with integer snapping, and the optimized output is ready to paste wherever you need it — all in your browser, all private, all free. Open the tool, load the example, and pull a curve into shape. Once you have fixed your first stubborn bezier, you will never go back to editing coordinates by hand.

Happy editing!