What does the d attribute in SVG mean?
d holds path commands (M, L, C, Q, A, Z) that describe lines and curves—the renderer draws from these instructions.
Paste path d or full SVG to preview with pan, zoom, metrics, and command inspection—processed locally, never uploaded.
Paste a path to see commands.
No SVG to display
Paste SVG markup or path data in the editor to see a live preview
Drag to pan · Pinch/zoom buttons · Keyboard: Ctrl/Cmd +/−/0 (when focus is outside the editor)
An SVG path editor lets you paste path d data or full SVG markup, preview shapes live, inspect Bézier control points, and copy or export clean SVG—all in the browser.
SVG paths are drawn with commands in the d attribute: M (move), L (line), C/S (cubic/smooth curves), Q/T (quadratic), A (arcs), and Z (close). This editor parses your input, renders a live preview with pan and zoom, shows bounding-box metrics, highlights the d string, and lets you step through commands for debugging.
Use it when hand-editing icons, tuning illustration curves, or learning how path commands map to on-screen geometry. Processing is local—SVG you paste is not uploaded to servers.
Preview and debug path d strings before embedding in HTML, React, or design exports.
Concise answers for common searches — definitions, steps, and comparisons.
d holds path commands (M, L, C, Q, A, Z) that describe lines and curves—the renderer draws from these instructions.
No. Parsing and preview run in your browser; pasted SVG is not sent to servers.
Enter a d attribute, raw path commands, or a complete SVG document in the input panel.
Pan, zoom, toggle the grid, and review bounding-box and viewBox metrics.
Use command-by-command navigation to see how each segment affects the shape.
Copy the d string only, copy full SVG markup, or download a .svg file.
Input
d="M 20 100 Q 100 20 180 100"Output
Live curve with control-point handles visible in previewConfirm Q control points before exporting an icon stroke.
Common real-world scenarios where this tool saves time.
Adjust d strings for crisp strokes without opening desktop vector apps.
See how M/L/C/Q/A segments render as you edit the d attribute.
Copy clean SVG or d-only output for React, HTML, or design-system repos.
| Tool | Focus | Best for |
|---|---|---|
| Path editor (this tool) | Edit and debug d strings | Curve tuning, command inspection |
| SVG viewer | File preview and metadata | Inspect exported assets |
| SVG color editor | Fill and stroke colors | Theme tweaks on finished paths |
Advertisement
Yes—paste complete SVG markup or only the path d string. The first path is highlighted and previewed.
Standard SVG path commands: M, L, H, V, C, S, Q, T, A, and Z (close path).
Yes—copy d only, copy full SVG, or download a .svg file from the export actions.
No—it is a lightweight browser debugger for path strings, not a full design suite.
Check for typos in commands, missing M (move) at the start, or coordinates outside the current viewBox.
SVG Path Editor — Live Preview & Path Debugger (/svg-path-editor) runs in your browser when supported—inputs are not uploaded to EverydayTools servers.
Rendering follows SVG path rules; invalid d syntax shows an error instead of silent failure.
Preview tool for path debugging—not a full vector illustration editor.
Part of Image Tools
More free tools for the same workflow.
Free SVG color editor — click any shape to change fill or stroke color with a live preview. Export the recolored SVG instantly. No server upload, no signup required. Runs locally in your browser when supported—no upload required for normal use.
Open SVG files in your browser—zoom, pan, metadata, sanitized preview via DOMPurify. No upload: files stay on your device. Free, no signup.
Advertisement
Reviewed by EverydayTools Editorial Team on 2026-05-20.