SVG Path Editor
Online SVG path editor with visual command editing, shape presets, style controls, and SVG code export/download.
Path Editor
Quick Presets
Shape Tools
Path Styling
Preview
Zoom: 100%
Generated Code
<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<path
d="M 50 50 L 150 50 L 200 150 L 100 200 L 50 150 Z"
fill="#f59e0b"
stroke="#b45309"
stroke-width="2"
stroke-linecap="round"
opacity="1"
/>
</svg>Tool Guide
SVG Path Editor helps you build and debug path commands quickly, with path drawing, style tuning, code copy, and file export in one workflow.
Path Command Reference
M x y | Move to |
L x y | Line to |
H x | Horizontal line to |
V y | Vertical line to |
C x1 y1 x2 y2 x y | Cubic Bezier curve |
S x2 y2 x y | Smooth cubic Bezier curve |
Q x1 y1 x y | Quadratic Bezier curve |
T x y | Smooth quadratic Bezier curve |
A rx ry x-axis-rotation large-arc-flag sweep-flag x y | Elliptical arc |
Z | Close path |
Uppercase commands use absolute coordinates, lowercase commands use relative coordinates.
What It Solves
Use this tool when you need to build icon outlines, validate animation trajectories, or troubleshoot vector path issues with instant visual feedback.
Key Features
- Edit path commands directly and render SVG output in real time.
- Apply quick presets such as circle, heart, star, and common polygons.
- Tune fill, stroke, opacity, and linecap parameters with immediate preview.
- Copy generated code or download SVG files for direct project reuse.
How To Use
- Enter path commands manually, or start from a quick preset shape.
- Adjust fill, stroke, stroke width, and opacity to match your target style.
- Use zoom controls in the preview panel to inspect fine path details.
- Copy the generated SVG code or download the SVG file for integration.
Use Cases
- Fast path creation for frontend icons and decorative graphics
- Motion path verification and debugging for SVG animations
- Path parameter checks when converting design drafts to code
- Visual teaching of SVG path syntax in training and workshops
Editing Tips
- Build outlines with simple commands first, then refine curve segments.
- Use thinner strokes while debugging curves to inspect node transitions.
- Format complex paths before debugging to improve readability.
- Confirm coordinate system and viewBox requirements before export.
Privacy Note
No path data is uploaded. Rendering and export run entirely in your local browser.