Free online visual SVG path editor with live preview. Paste any SVG path d attribute, see it rendered on a grid, drag control points to edit, and get clean SVG code. Supports M, L, C, Q, A, Z commands.
Last updated
SVG Path Editor is a free, browser-based tool
from UseToolSuite's
Image Tools collection.
All processing happens locally on your device — your data is never uploaded to any server.
Use the tool below, then scroll down for detailed documentation, frequently asked questions, and related resources.
Advertisement
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:
Command
Means
Takes
M
Move to (pen up)
x y
L
Line to
x y
H / V
Horizontal / vertical line
x / y
C
Cubic Bézier
2 control points + end
Q
Quadratic Bézier
1 control point + end
A
Elliptical arc
radii, flags, end
Z
Close 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.
How helpful was this tool?
Click to rate
Awesome! Glad it helped.
We don't have a marketing budget. The best way to support this free tool is by sharing it with other developers!
Help us improve!
Sorry it didn't meet your expectations. We're always looking to make these tools better. What was missing or broken?
Essential terms and definitions related to SVG Path Editor.
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
Common errors developers encounter and how to resolve them.
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.
We use cookies to show personalized ads via Google AdSense.
All our tools process data locally in your browser — no personal data is collected.
You can accept personalized ads or continue with general ads only.
Privacy Policy
