SVG Path Editor

The SVG Path Editor is a free, browser-based visual tool for creating and editing SVG <path> elements. SVG paths are defined by the d attribute, a compact string of commands like M (moveto), L (lineto), C (cubic bezier), Q (quadratic bezier), A (arc), and Z (close). Writing these commands by hand can be tedious and error-prone, especially for complex curves. This editor lets you work visually: drag anchor points and control handles directly on an interactive canvas while the path string updates in real time.

The tool supports the full SVG path command set — moveto, lineto, horizontal line, vertical line, cubic and smooth cubic bezier, quadratic and smooth quadratic bezier, elliptical arc, and close path. You can add new segments from the command palette, delete existing ones, or type raw d attribute text and see it rendered instantly. A grid overlay with snap-to-grid makes it easy to create pixel-perfect shapes, and zoom controls let you work at any scale.

Each command's parameters can be edited either by dragging points on the canvas or by entering precise values in the parameter editor. Control handle lines are displayed for bezier curves so you can see how each control point influences the curve. The path info panel shows the total path length and bounding box dimensions, which is helpful when sizing icons or planning animations.

If you work with CSS and SVG together, you may also find the Color Converter helpful for picking stroke and fill colors, or the CSS Animation Generator for animating your paths with keyframes. For generating CSS layout code alongside your SVGs, check out the CSS Layout Generator.

All processing happens entirely in your browser. No data is sent to any server — there are no network requests, no logging, and no third-party services involved. You can safely use this tool with proprietary icon designs and production SVG assets.

1. Paste an existing SVG path d attribute into the Path d attribute text area, or click a Preset (Circle, Star, Heart, Arrow, Checkmark) to load a starting shape.
2. Drag the green anchor points on the canvas to reposition path endpoints. Drag blue diamond control points to adjust bezier curve handles.
3. Click a command in the Command List to select it. Edit its parameters precisely in the parameter editor panel below the list.
4. Use the Add Command palette to append new segments (M, L, H, V, C, S, Q, T, A, Z) to the path.
5. Toggle Grid and Snap to align points to the grid. Adjust zoom with the In/Out buttons or mouse scroll wheel.
6. Toggle Handles to show or hide control-point guide lines for bezier curves.
7. Click Copy d or press Ctrl+Shift+C to copy the path string, or Copy SVG to copy the full SVG element. Click SVG to download the file.