SVG Path Editor | Visualize and Edit Path Data

SVG path editor to drag points and Bezier handles, convert absolute and relative commands, scale, flip and minify the d attribute. Runs in your browser.

Also known as: svg path editor · svg path editor online · svg path visualizer · svg path viewer · edit svg path d attribute · svg path absolute to relative · svg path data editor · svg path command reference · svg path bounding box

Path Data Input

Path Preview

Fill

The path draws here with its end points (circles) and control points (squares). Drag any of them to reshape the curve.

Transform the Path

Decimals

Minify outputOne command per line

Translate X

Scale X

Fit to box

Padding

Path Commands

Each command is listed here in plain English with its absolute coordinates. Click one to highlight it in the preview.

Path Output

About SVG Path Editor

SVG Path Editor is used to inspect, reshape and clean up the d attribute of an SVG path. Paste a path or a whole .svg file, drag its end points and control handles in the preview, then convert between absolute and relative commands, round coordinates, flip, scale or fit it to an icon grid, and copy the shortest equivalent path back out.

Key Features

Draggable end points and Bézier control handles that keep the rest of the path in place
Every command explained in plain English with absolute coordinates, click to highlight it
Absolute and relative conversion, rounding, move, scale, flip and fit to a 24 x 24 icon box
Optimize picks the shorter absolute or relative form per command and turns flat lines into H and V
Arcs stay exact under non-uniform scaling and mirroring: radii, rotation and sweep are recomputed
Exact bounding box and path length, plus a ready-to-paste <svg> element with a fitted viewBox

Use Cases

Shave bytes off an inline icon in a React or Vue component before it ships in your bundle
Re-center an exported Figma or Illustrator path onto a 24 x 24 grid to match the rest of an icon set
Fix a logo path that renders off-center because its coordinates start at 900, 340 instead of 0, 0
Mirror an arrow icon for a right-to-left layout without opening a design tool
Debug a hand-written path in a CSS clip-path or an animated SVG by reading each command
Convert a path to absolute coordinates so a script or a GSAP morph can read every point

Supported Formats

SVG path data (d attribute)

.svg files

Inline <svg> and <path> markup

M L H V C S Q T A Z commands

Related Keywords

svg path editor

svg path editor online

svg path visualizer

svg path viewer

edit svg path d attribute

svg path absolute to relative

svg path data editor

svg path command reference

svg path bounding box

What is the difference between upper-case and lower-case SVG path commands?

Upper-case letters such as M, L and C use absolute coordinates measured from the origin of the viewBox. Lower-case letters such as m, l and c are relative: each number is an offset from the point where the previous command ended. Relative paths are usually shorter and can be moved by editing only the first m, while absolute paths are easier to read and to edit by hand. Both draw exactly the same shape, which is why a minifier can mix them command by command.

Privacy & Security

All processing happens locally in your browser. Your data never leaves your computer, ensuring complete privacy and security.

Liked this tool?

DevToolLab is free to use. If this image saved you some time today, please consider supporting our work.

Buy us a coffee ☕

Frequently asked questions

What is SVG Path Editor used for?

SVG path editor to drag points and Bezier handles, convert absolute and relative commands, scale, flip and minify the d attribute. Runs in your browser.

Is SVG Path Editor free to use?

Yes. SVG Path Editor is completely free with no usage limits, and there is no paid tier required to use it.

Do I need an account to use SVG Path Editor?

No. SVG Path Editor works immediately in your browser with no signup, login, or email address required.

Related Tools

Image Resizer | Resize Images Online Free No Upload

Resize images to specific dimensions or percentage online. Maintain aspect ratio and download in high quality. Free, browser-based, no upload required.

image tools

encoding and decoding tools

Exif Data Reader & Editor | View Photo Metadata Online

View, edit, and remove hidden metadata in your photos (Exif data). Modify camera settings, location, and date information online.

image tools

date and time tools

Image Color Extractor | Extract Color Palette from Image

Image color extractor pulls dominant colors from any image and builds a palette. Get HEX, RGB, and HSL values instantly - no upload to server required.

html tools

color tools

More Tools You Might Like

Pastebin Online | Share Code & Text Snippets Free

Popular

Share code snippets, logs, and text with a shareable link. Syntax highlighting for 30+ languages, expiration controls, and password protection for Pro users.

text tools

password and key generators

math calculators

utilities

Use Tool

URL Tracker & Link Shortener | Track Clicks

Popular

Create short, trackable URLs with detailed click analytics. Track visitor location, devices, referrers, and more. Password protection & QR codes included.

text tools

password and key generators

url and link tools

networking

Use Tool

Webhook Receiver & Inspector | Test HTTP Webhooks

Popular

Generate a unique URL to easily test, receive and inspect HTTP webhooks in real-time. View request headers, query parameters, JSON payloads, and more.