Which path commands are supported?

All of them: M, L, H, V, C, S, Q, T, A and Z in both absolute and relative form, including packed arc flags like a5 5 0 0110 0.

Does converting to relative commands change the shape?

No. Absolute and relative output describe the same geometry; only the notation and often the byte size change.

How is this different from the SVG Optimizer?

The SVG Optimizer cleans whole files without touching geometry. This editor works on a single path's geometry — points, transforms and precision.

Is my path data uploaded?

No. Parsing, editing and exports happen entirely in your browser.

Does it work offline and on mobile?

Yes. Once the page has loaded it keeps working without a network connection, and the layout is responsive so it stays usable on phones and tablets.

SVG Path Visual Inspector & Editor

Visualise, drag-edit, transform and minify SVG path d data in your browser.

Support

Works Offline

Privacy First

No Login

No API

SVG

Blob

Path data

Paste a path d attribute, a <path> element, or pick a preset.

Canvas

Drag points to edit. Scroll to zoom.

Commands

Points

Size

90.0 × 80.0

Bytes

120

Output options

Decimal precision: 2

Relative commands Minify Show handles

Fill

Stroke

Width

Transform

Move X

Move Y

Scale

Rotate °

Command inspector

Edit any coordinate directly. Values are absolute.

M
C
C
C
C
C
C
Z

Path d

M 50 85 C 20 60 5 45 5 28 C 5 14 16 5 28 5 C 38 5 46 11 50 18 C 54 11 62 5 72 5 C 84 5 95 14 95 28 C 95 45 80 60 50 85 Z

SVG file

XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 4 92 82">
  <path d="M 50 85 C 20 60 5 45 5 28 C 5 14 16 5 28 5 C 38 5 46 11 50 18 C 54 11 62 5 72 5 C 84 5 95 14 95 28 C 95 45 80 60 50 85 Z" fill="#2f6bff" stroke="#0f172a" stroke-width="1"/>
</svg>

React component

JavaScript

export function PathIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="5 5 90 80" fill="currentColor" {...props}>
      <path d="M 50 85 C 20 60 5 45 5 28 C 5 14 16 5 28 5 C 38 5 46 11 50 18 C 54 11 62 5 72 5 C 84 5 95 14 95 28 C 95 45 80 60 50 85 Z" />
    </svg>
  );
}

About the SVG Path Visual Inspector & Editor

Paste any SVG path d attribute or <path> element and see it drawn on a zoomable grid with draggable anchor and control points. Edit every command's coordinates in the inspector, convert between absolute and relative commands, move, scale, rotate or flip the shape, round decimals and minify the output, then copy the path, a standalone SVG file or a React component. Parsing and transforms run locally — nothing is uploaded.

Popular uses

svg path editor
svg path visualizer
svg d attribute editor
edit svg path online
relative to absolute svg path
minify svg path
svg path to react

Examples

Relative conversion

M 10 10 L 15 15 H 25

Output

M 10 10 l 5 5 h 10

Keyboard shortcuts

Copy the main outputCtrl / ⌘ + Shift + C
Download the resultCtrl / ⌘ + S
Share this toolCtrl / ⌘ + Shift + S
Reset the inputsAlt + R
Open the tool search paletteCtrl / ⌘ + K

Related tools

Image to SVG Vectorizer

Images

Trace PNG or JPG images into clean, scalable SVG paths.

SVG Optimizer

Images

Strip comments, metadata, and whitespace from SVG markup.

SVG to PNG Converter

Images

Convert SVG files to PNG images at any scale.

Favicon Generator

Images

Turn any image into a full favicon pack with .ico, PNGs, manifest and HTML.

Image Compressor

Images

Shrink JPEG, PNG, and WebP images without a server.

SVG Wave Generator

HTML & CSS

Generate parametric SVG wave shapes for sections.

Frequently asked questions

How to visually edit and minify SVG path data offline
Understand SVG path commands, drag points, convert absolute and relative commands, transform shapes and shrink path d strings — all in your browser.

Version 1.0.0 · Updated 2026-10-21 · Runs entirely in your browser

SVG Path Visual Inspector & Editor

About the SVG Path Visual Inspector & Editor

Popular uses

Examples

Keyboard shortcuts

Related tools

Image to SVG Vectorizer

SVG Optimizer

SVG to PNG Converter

Favicon Generator

Image Compressor

SVG Wave Generator

Frequently asked questions

Which path commands are supported?

Does converting to relative commands change the shape?

How is this different from the SVG Optimizer?

Is my path data uploaded?

Does it work offline and on mobile?

Read more