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.
Enter a path and click Render to see the breakdown.
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.
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.
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.
Essential terms and definitions related to SVG Path Editor.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.