SVG Path Editor

Edit SVG paths visually with live preview

Browser ProcessingYour data never leaves your browser

Path Data

Canvas Settings

Fill:
Stroke:

Visual Editor

Path Commands

Click on canvas to add points after selecting a command

Command Breakdown

M50 50
L150 50
L150 150
L50 150
Z

SVG Code 

<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 50 L 150 50 L 150 150 L 50 150 Z" fill="none" stroke="#3b82f6" stroke-width="2" />
</svg>

About SVG Path Editor

Edit SVG paths visually with live preview

Use this free online svg tools tool to work faster without installing extra software. The interface is built for quick input, clear output, and straightforward results on desktop and mobile devices.

Processing

This tool runs in your browser whenever possible, which keeps your inputs private and reduces unnecessary round-trips to the server.

Related Tools

SVG Blob GeneratorGenerate organic blob shapes for backgrounds
SVG Wave GeneratorGenerate wave patterns for website sections
SVG Pattern GeneratorGenerate repeating SVG patterns for backgrounds
SVG OptimizerOptimize and minify SVG files for smaller size