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>

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