svg-toolsUnderstanding SVG Path Syntax: The d Attribute Demystified
The cryptic d attribute in SVG paths (M, L, C, Q, A, Z) explained command by command, with the absolute vs relative rule and how curves actually work.
6 mins read
SVG Path Editor, Edit & Understand the <path> d Attribute Online
Paste an SVG path, watch it draw live with every anchor and bezier handle exposed, read a plain-English breakdown of each command, and flip the whole thing between absolute and relative coordinates with one click. 100% client-side.
100% browser processingFree · no sign-up
Loading tool…
What is the svg path editor?
The SVG Path Editor edits an SVG path d-string with a live outline preview overlaying every anchor and bezier control handle. A command-by-command breakdown explains each segment in plain English, and one click normalises between absolute and relative coordinates. Free and fully client-side, nothing uploaded.
The GigAI SVG Path Editor turns the most cryptic part of any SVG: the `d` attribute. Into something you can actually see and reason about. Paste a path string (or the whole `<path>` element, or a full SVG. We extract the first path for you), and it renders instantly as an auto-fitted outline with on-path anchor nodes, off-path bezier control handles drawn with connector lines, and clear green start / red end markers so you always know the drawing direction. Alongside the canvas, a scrollable command breakdown lists every M, L, H, V, C, S, Q, T, A and Z in order with its raw coordinates, so you can trace exactly how the shape is built and jump to the segment you need to change. A geometry panel powered by our path engine reports the total outline length (exact, using the browser's own `getTotalLength` when available), the axis-aligned bounding box, the subpath count and a histogram of how many of each command the path uses. The single most useful action lives one click away: normalise the entire path to all-absolute or all-relative coordinates, invaluable when you're hand-authoring icons, diffing two versions of a logo, or preparing a path for animation where consistent command casing matters. The `d` string stays fully editable in a synced code pane with undo/redo, and you can copy the cleaned-up result or download it as a ready-to-use SVG. Because everything runs locally with the native DOM and a dependency-free parser, no path, logo or unreleased icon ever leaves your machine.
- Difficulty:
- Easy
- Typical time:
- ~10s
- Processing:
- 100% browser processing
Last updated
How to use the svg path editor
- 1
Paste your path
Drop in a bare d-string, a whole <path> element, or an entire SVG (the editor extracts the first path) or load a built-in sample to try it instantly.
- 2
See it and read it
The outline draws with anchors and handles while the command breakdown lists every segment in order. Toggle the point overlay and background to inspect closely.
- 3
Edit or normalise
Adjust the d-string in the code pane and watch the preview update, or click Absolute / Relative to rewrite the whole path into a consistent coordinate system.
- 4
Copy or download
Copy the finished d-string for your markup, or download it as a ready-to-use SVG file. Undo and redo keep every experiment reversible.
What SVG Path Editor includes
Live outline with handles
Your path draws instantly on a checkerboard, light or dark canvas, with anchor nodes, bezier control handles and connector lines, plus green start and red end markers that reveal the drawing direction.
Command-by-command breakdown
Every M, L, C, S, Q, T, A, H, V and Z is listed in order with its exact coordinates, so you can read how the shape is constructed and pinpoint the segment you want to edit.
Real geometry facts
The path engine reports total outline length (exact via the browser's getTotalLength when possible), the axis-aligned bounding box, subpath count and a per-command histogram.
Absolute ↔ relative in one click
Normalise the whole d-string to all-uppercase absolute or all-lowercase relative commands, perfect for hand-authoring, cleaner diffs, or prepping a path for animation.
Synced, editable code pane
Edit the raw d-string beside the preview and watch every anchor, handle and stat update live, with undo and redo so experimenting is always safe.
Entirely in your browser
Parsing, rendering and normalising all run on your device with the native DOM and a dependency-free parser. No path is uploaded, stored or logged.
Why use our svg path editor
Demystify any path string
Instead of staring at a wall of numbers, see the shape draw, trace each command, and know instantly which coordinate maps to which point on screen.
Hand-author icons with confidence
Tweak a control point, add a segment, or fix a stray coordinate and watch the outline respond live. No editor round-trip, no exporting, no guesswork.
Get clean, consistent paths
Normalising to absolute or relative removes the mixed-case, mixed-origin mess that makes paths hard to read, diff and animate, giving you a tidy canonical form.
Private by default
Because it runs locally, you can open logos, unreleased icon sets and client artwork with zero risk of anything leaving your machine.
Built for the way you work
From quick one-off fixes to daily workflows, see how people put this tool to use.
- Icon designer
Fix a wonky curve by hand
See exactly which control handle is pulling a bezier out of shape, nudge its coordinate in the code pane, and confirm the outline snaps back, without reopening a vector editor.
- Frontend developer
Prep a path for animation
Normalise a path to all-absolute commands so it has a stable, predictable command list before wiring it up to a stroke-dashoffset or morph animation.
- Design-systems engineer
Make two logos diff-able
Run both versions of a mark through Relative normalisation so their d-strings share a canonical form, turning a noisy git diff into a readable one.
- Educator / learner
Learn how paths actually work
Load a sample and step through the command breakdown to see how M starts a subpath, C draws a cubic bezier, and Z closes it, with the shape drawing as you read.
Supported formats
Accepts SVG and TXT, and produces SVG and TXT, all processed locally in your browser.
Input formats
- SVG
- TXT
Output formats
- SVG
- TXT
Frequently asked questions
Recommended tools
Popular
SVG Viewer
Open, paste or drop an SVG to view it on a checkerboard, light or dark canvas with zoom, live dimensions, a source-code pane and a full element/color report: 100% in your browser, nothing uploaded.
SVG Studio
SVG Editor
Edit SVG code with an instant live preview: type in the source pane and watch it render, then Format, Optimize or Minify in one click. A live inspector counts elements, colors and features, all in your browser, nothing uploaded.
SVG Studio
SVG Optimizer
Minify and clean SVG files in your browser with SVGO, strip editor metadata, round coordinates, drop hidden layers and see the exact bytes and percentage saved. Nothing is uploaded.
SVG Studio
SVG to React
Convert SVG to a clean React component in your browser, camelCased attributes, TypeScript or JS, memo, forwardRef and React Native output, with a live preview. Nothing is uploaded.
SVG Studio
SVG Color Editor
Detect every color in an SVG and recolor it live: fills, strokes and gradient stops become clickable swatches you can remap with a picker or hex, with an instant preview. Bulk-replace, swap to currentColor and export, all in your browser, nothing uploaded.
SVG Studio
SVG Path Visualizer
Paste an SVG path d attribute to see its outline drawn with anchor points, bezier control handles and start/end markers, plus a live report of length, bounding box, subpaths and a per-command breakdown, all in your browser.
SVG Studio
Guides & articles
- svg-tools
Common problems, solved
Hit a snag? Here are quick fixes for the issues people run into most.
The breakdown flags a command error and the preview won't draw.
A command is missing coordinates or an unexpected letter slipped in. The breakdown names the failing command: check that each M/L has 2 numbers, C has 6, Q has 4 and A has 7, then the outline redraws automatically.
After normalising, my numbers look slightly different.
Normalisation rounds coordinates to a sensible precision to keep the string clean, so long decimals get trimmed. The rendered shape is unchanged. If you need maximum precision, keep your original and use normalisation only for readability.
Arc (A/a) segments don't show control handles.
Arcs are defined by radii and flags rather than bezier control points, so there are no handles to show: only the endpoint anchor. The outline still renders the arc correctly. Edit its rx, ry, rotation and flags directly in the code pane.
I pasted a full SVG but only one shape appears.
This editor focuses on a single path's d-string, so it extracts the first <path>. To inspect an entire multi-element SVG, use the SVG Viewer. Come back here to edit an individual path.
Get the most out of it
Paste a full SVG and the editor grabs the first path automatically. No need to hand-extract the d attribute.
Normalise to Absolute before animating: a consistent, uppercase command list is far easier to reason about for stroke and morph effects.
Watch the green start and red end markers to understand a path's direction. It decides how dash and draw-on animations flow.
Toggle the point overlay off to judge the pure outline, then back on to grab the exact anchor or handle you need to change.
A high command count on a simple shape usually means redundant nodes. Simplify by hand here, then shrink further in the SVG Optimizer.
What's new
Recent updates and improvements to the svg path editor.
Initial release, live auto-fitting outline with anchor and control-point overlays, a command-by-command breakdown, length/bounding-box/subpath geometry, and one-click absolute/relative normalisation.
Added paste-a-whole-SVG path extraction, drag-drop import, undo/redo on the code pane, curated sample paths, keyboard shortcuts with an in-tool reference, and copy/download of the finished d-string.
Refined the geometry panel with an exact/estimated length badge, improved dark-mode contrast for AA compliance, and polished the empty and error states.
Keep exploring
Problems we solve
Definitions
From the blog
Explore categories
Compare formats
By file type
Common tasks
Your privacy is built in
Your path and any SVG you paste or drop are parsed, rendered and normalised entirely in your browser using the native DOM and a dependency-free parser. Nothing is uploaded to any server. The preview additionally strips scripts, foreignObject, on* handlers and javascript: URLs, so opening an unknown SVG can't execute code. Nothing is stored, logged or transmitted. Close the tab and every trace is gone.
- Runs in your browser
- No uploads
- Nothing stored
Ready to try the svg path editor?
Free, private and instant. SVG Path Editor runs right in your browser.