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.
No. All parsing and rendering happen locally in your browser.
Check for typos in commands, missing M (move) at the start, or coordinates outside the current viewBox.
SVG and path data are processed in your browser—they 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 to JPG converter — upload any SVG and export it as JPEG with custom quality settings and background color. Ideal for icons, illustrations, and sharing. No signup.
Free SVG to PNG converter — export SVG as PNG with custom dimensions and pixel density. Perfect for icons, logos, and web graphics. Fully browser-based, no signup required.
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.