SVG Path Editor – Edit SVG Paths Visually

Edit SVG paths with a visual editor. See path metrics, zoom, pan. Perfect for icons and graphics. Runs locally.100% browser-based - your data never leaves your device

Code Editor

Visual Preview

1.00x

How to Use

  • 1.Paste your SVG markup or path data into the code editor on the left
  • 2.The preview updates in real-time on the right side
  • 3.Use zoom controls or click and drag to pan the view (touch works on mobile)
  • 4.View path metrics like length, bounding box, and viewBox information
  • 5.Copy the updated SVG or path data using the copy buttons

Frequently Asked Questions

What is an SVG path?

An SVG path is a series of commands that define shapes and lines in Scalable Vector Graphics. Paths use commands like M (move to), L (line to), C (cubic bezier curve), and Z (close path) to create complex shapes.

Can I edit both full SVG files and path data?

Yes! The editor accepts both full SVG markup and standalone path data (the 'd' attribute). Simply paste your SVG code or path data into the editor, and it will automatically detect and visualize it.

Is my data processed on a server?

No, all processing happens entirely in your browser. Your SVG data never leaves your device, ensuring complete privacy and security.

How do I zoom and pan the SVG?

Use the zoom in/out buttons to adjust the view, or click and drag on the preview area to pan. The 'Fit to Screen' button automatically adjusts the view to show the entire path. Keyboard shortcuts: Ctrl/Cmd + = (zoom in), Ctrl/Cmd + - (zoom out), Ctrl/Cmd + 0 (fit to screen).

What information does the editor display?

The editor shows the path length, bounding box coordinates and dimensions, current viewBox settings, and zoom level. This helps you understand the geometry and positioning of your SVG path.