UseToolSuite UseToolSuite

SVG Path Editor

Visual SVG path editor with live preview. Paste any path d attribute, see it on a grid, drag points to edit, and get clean code (M, L, C, Q, A, Z).

0 commands
—

Enter a path and click Render to see the breakdown.

2

What is SVG Path Editor?

SVG Path Editor is a free online visual tool for editing and previewing SVG path data. Paste any SVG path d attribute and see it rendered instantly on a grid with control point markers. Drag control points to modify the path visually, or edit the path data directly and see changes in real time. The tool breaks down every command in the path (M, L, C, Q, A, Z, etc.) into a readable list, making it easy to understand and debug complex SVG shapes. Customize stroke color, fill, and stroke width, then copy the final SVG code. All processing happens locally in your browser.

When to use it?

Use the SVG Path Editor when you need to understand or modify an SVG path from an icon library or design tool export, debug why an SVG shape looks wrong by inspecting individual path commands and control points, create simple SVG shapes by editing path data with visual feedback, or tweak path coordinates for pixel-perfect alignment in your UI.

Common use cases

Developers and designers use SVG Path Editor to edit paths exported from Figma, Illustrator, or Inkscape; fine-tune icon shapes for component libraries; learn SVG path syntax by seeing how each command affects the rendered shape; create custom CSS clip-paths using SVG path data; debug animation paths for CSS and JavaScript SVG animations; and scale or translate existing paths to fit different viewBox dimensions.

The path command alphabet

An SVG <path> is driven by a compact command language in its d attribute. Knowing the letters makes any path readable:

CommandMeansTakes
MMove to (pen up)x y
LLine tox y
H / VHorizontal / vertical linex / y
CCubic Bézier2 control points + end
QQuadratic Bézier1 control point + end
AElliptical arcradii, flags, end
ZClose path—

Uppercase = absolute coordinates (from the SVG origin); lowercase = relative (offset from the current pen position). Absolute is easier to read and debug; relative makes a path trivial to translate without recomputing every point.

Dragging points and the relative-path caveat

With points enabled, every coordinate and Bézier control point shows as a draggable handle, and the d text updates live as you move them — ideal for nudging a curve into shape. One gotcha: drag editing is most reliable on absolute (uppercase) paths. Relative paths can jump or distort during drag because moving one point shifts everything that follows it. If a path misbehaves while dragging, convert it to absolute coordinates first.

Béziers: the curve that doesn’t touch its controls

The C (cubic) and Q (quadratic) commands curve toward control points the line never actually reaches — the first control point pulls the curve away from the start, the second pulls it toward the end. This is why moving a control point bends the curve without moving its endpoints, and it’s the heart of how every smooth shape in SVG is built. Cubic Béziers (two control points) are more flexible; quadratics (one) are simpler.

From design tool to editor

To edit a shape from Figma or Illustrator, export it as SVG, open the file, and copy the d value out of the <path> element. Paste it here to render and refine it. The resulting path data can also feed CSS clip-path: path("…"), though that has narrower browser support than clip-path: polygon() (see the Clip-Path Generator). Everything runs locally — your paths never leave the browser.

SVG Path Editor Powered by UseToolSuite — free browser tools

SVG Path Editor edits your images entirely on your device, so the originals never leave it. It's one of the free Image Tools on UseToolSuite.

Last updated

How helpful was this tool?

Click to rate

Embed this tool on your site

Paste this snippet into any HTML page or blog post to embed a live, fully working copy of SVG Path Editor. Free for any use.

Key Concepts

SVG Path

The <path> element is the most powerful drawing element in SVG. Its d (data) attribute contains a series of commands and coordinates that define the shape. A single <path> can represent any shape that can be drawn with lines, curves, and arcs — from simple triangles to complex illustrations. Most SVG icons and illustrations use <path> elements exclusively.

Bezier Curve

A parametric curve defined by control points. SVG supports cubic Bezier curves (C command — 2 control points) and quadratic Bezier curves (Q command — 1 control point). The curve is attracted toward its control points but does not pass through them. Cubic Beziers are more flexible and can represent a wider variety of shapes; quadratic Beziers are simpler but less versatile.

ViewBox

The viewBox attribute on an SVG element defines the coordinate system and visible area. Format: viewBox="minX minY width height". It enables SVG scaling — the SVG content is mapped from the viewBox coordinate system to the actual element dimensions. This is what makes SVGs resolution-independent and infinitely scalable.

Control Point

A coordinate that influences the shape of a Bezier curve without lying on the curve itself. In a cubic Bezier (C command), the first control point pulls the curve away from the start, and the second control point pulls it toward the end. Moving control points changes the curvature without moving the start or end points of the curve segment.

Frequently Asked Questions

What SVG path commands are supported?

The editor supports all standard SVG path commands: M (moveto), L (lineto), H (horizontal lineto), V (vertical lineto), C (cubic Bezier curve), S (smooth cubic Bezier), Q (quadratic Bezier curve), T (smooth quadratic Bezier), A (elliptical arc), and Z (close path). Both uppercase (absolute) and lowercase (relative) commands are recognized.

Can I drag control points to edit the path visually?

Yes. When the Points option is enabled, every control point in the path is displayed as a draggable circle on the SVG preview. Click and drag any point to move it — the path data in the textarea updates in real time as you drag, giving you instant visual feedback. This is especially useful for fine-tuning Bezier curve control points.

How do I use a path from Figma or Illustrator?

Export your shape as SVG from your design tool, open the SVG file in a text editor, and copy the value of the d attribute from the <path> element. Paste that value into this editor to visualize, edit, and optimize the path. The editor handles any valid SVG path data regardless of the tool that generated it.

What is the difference between absolute and relative path commands?

Uppercase commands (M, L, C, etc.) use absolute coordinates relative to the SVG viewport origin (0,0). Lowercase commands (m, l, c, etc.) use relative coordinates — each point is offset from the current pen position. Absolute coordinates are easier to read and debug; relative coordinates make paths easier to translate (move) without recalculating every point.

Can I use the output path for CSS clip-path?

Yes, but CSS clip-path: path() requires coordinates in pixel units and uses the same SVG path syntax. Copy the path data from this editor and use it in CSS: clip-path: path("M 150 30 L 270 270 L 30 270 Z"). Note that clip-path: path() has limited browser support compared to clip-path: polygon() — check compatibility for your target browsers.

What do the two flags in the arc (A) command actually do?

The arc command A rx ry x-rotation large-arc-flag sweep-flag x y draws an elliptical arc between two points, and because two points on an ellipse can be connected by FOUR different arcs, the two flags pick which one. large-arc-flag (0 or 1) chooses the shorter arc (0) or the longer arc (1) — the minor vs major arc. sweep-flag (0 or 1) chooses the direction: counter-clockwise (0) or clockwise (1). So the same two endpoints and radii produce four visually different curves depending on the flag combination. If your arc bends the wrong way or takes the long route around, flip one flag at a time and watch the preview — that's almost always the fix. Both flags at 0 gives the small counter-clockwise arc.

How do I reduce a bloated path with too many decimal places?

Paths exported from design tools often carry absurd precision like 'M 10.00000234 20.99999812' — every extra digit is bytes that add nothing visible, since sub-pixel precision beyond 1–2 decimal places is imperceptible at normal sizes. Rounding coordinates to 1–2 decimals can dramatically shrink a path's d attribute. The dedicated way to do this across a whole file is the SVG Optimizer, which strips precision (and other cruft) automatically. In this editor you can also clean up by hand or convert messy relative paths to absolute for readability. For a path that will scale to a known maximum size, two decimals is plenty; for icons on a 24×24 grid, integers usually suffice.

Troubleshooting & Technical Tips

Path renders but looks empty or invisible

If the path has no fill and no visible stroke, it will appear invisible. Make sure the stroke width is greater than 0 and the stroke color has contrast against the background. Also check that the path coordinates fall within the current viewBox — coordinates outside the viewBox will be clipped. Use the auto-fit feature (which adjusts the viewBox to the path bounding box) to ensure visibility.

Dragging a point causes the path to jump or distort

This typically happens with relative path commands (lowercase letters) because the editor currently converts coordinates during drag operations. For best results with drag editing, use absolute commands (uppercase letters). You can convert relative paths to absolute using an SVG optimization tool before pasting into this editor.

Arc (A) command renders differently than expected

The SVG arc command has 7 parameters: rx, ry (radii), x-rotation, large-arc-flag, sweep-flag, x, y. The two flag parameters (large-arc and sweep) control which of the four possible arcs is drawn between two points. A common mistake is setting both flags to 0, which always draws the smaller clockwise arc. Experiment with flag values (0 or 1) to get the desired arc direction and size.

Related Guides

SVG Optimization: Reduce File Size Without Losing Quality

Optimizing SVGs: configuring SVGO, merging paths, trimming coordinate precision, and using <use> to cut DOM size — plus when not to use SVG at all.

Related Tools

SVG Optimizer

Image Tools

CSS Clip-Path Generator

Color & CSS Tools

CSS Animation Generator

Color & CSS Tools