⚡

SVG Path Editor

Edit SVG paths visually by dragging anchor points and bezier handles. Supports M, L, C, Q, and Z path commands. Toggle smooth/sharp corners, snap to grid, zoom/pan the canvas, and export as raw SVG or React JSX.

SVG path data is a series of commands (M, L, C, Q, Z) that draw vector shapes. Editing raw path strings by hand is error-prone — this tool lets you drag anchor points and bezier handles visually, then exports clean SVG path code or a React JSX component.

Editing SVG icon paths without Figma/IllustratorCreating custom SVG shapes for webOptimising over-complex SVG pathsExporting SVG paths as React components

100% private — all processing runs in your browser. No files are uploaded to any server.

Add Command

GridSnap 10px100%

Path Commands

M50 150

C50 50 150 50 150 150

C150 250 250 250 250 150

L250 50

Path Data

Export

M 50 150 C 50 50 150 50 150 150 C 150 250 250 250 250 150 L 250 50

■ purpleanchor points

■ ambercontrol point 1 (CP1)

■ greencontrol point 2 (CP2)

scrollzoom in/out

Frequently Asked Questions

What path commands are supported?

The editor supports M (moveto), L (lineto), C (cubic bezier), Q (quadratic bezier), and Z (closepath). Drag anchor points to reposition them, or drag the bezier handles to reshape curves.

How does grid snapping work?

When snapping is enabled, anchor points snap to the nearest grid intersection as you drag. Adjust the grid size with the snap slider.

How do I export to React?

Click 'JSX' in the export panel. The tool wraps the path in a React-ready SVG component with proper viewBox and className props.

Related Tools

JSON Formatter

Format, beautify and minify JSON with syntax highlighting.

JSON Validator

Validate JSON syntax with detailed error messages and line numbers.

Base64 Encoder/Decoder

Encode and decode Base64 strings and files instantly.