SVG Path Editor
Edit and visualize SVG paths interactively. Parse path data, see command breakdowns, and preview changes in real-time.
Examples:
SVG Preview
Path Info
0
Commands
0
Length (px)
0
Points
Path Data
Output
<path d="" />
🔒 Privacy First
All SVG editing happens directly in your browser. Your designs never leave your device and no data is sent to any server. Edit with complete privacy.
SVG Path Editor - Edit Path Data Visually
Our free SVG Path Editor helps you understand and edit SVG path data with an intuitive visual interface. See a breakdown of each path command and preview changes in real-time.
SVG Path Commands
- M/m (MoveTo): Move the current point without drawing
- L/l (LineTo): Draw a straight line to a point
- H/h (Horizontal): Draw a horizontal line
- V/v (Vertical): Draw a vertical line
- C/c (Cubic Bezier): Draw a cubic Bezier curve
- S/s (Smooth Cubic): Smooth cubic Bezier curve
- Q/q (Quadratic): Draw a quadratic Bezier curve
- T/t (Smooth Quadratic): Smooth quadratic curve
- A/a (Arc): Draw an elliptical arc
- Z/z (ClosePath): Close the path back to start
Absolute vs Relative
Uppercase commands (M, L, C, etc.) use absolute coordinates from the origin. Lowercase commands (m, l, c, etc.) use relative coordinates from the current point.
Related Tools
- SVG to CSS Background - Convert SVG to data URI
- Clip Path Generator - Create CSS clip-paths
- CSS Animation Generator - Animate SVG paths