liminfoSVG Path Editor
Free web tool: SVG Path Editor
| # | Cmd | Name | Params |
|---|---|---|---|
| 1 | M | moveTo | 10, 10 |
| 2 | L | lineTo | 90, 10 |
| 3 | L | lineTo | 90, 90 |
| 4 | L | lineTo | 10, 90 |
| 5 | Z | closePath |
About SVG Path Editor
The SVG Path Visualizer & Parser is a specialized developer tool that decodes the compact `d` attribute syntax used in SVG path elements. When you paste a path string such as `M10 10 L90 90 C50 50 80 20 100 0 Z`, the tool instantly parses every command token — including absolute and relative variants — and displays them in a structured table showing the command letter, its human-readable name, and all associated numeric parameters.
Front-end developers, icon designers, and SVG animators use this tool to debug complex path data generated by vector editors like Inkscape, Figma, or Illustrator. Rather than mentally decoding a wall of numbers, you can see at a glance exactly which segments make up a shape and where each control point lies. The side-by-side live SVG preview updates in real time as you edit, giving immediate visual feedback.
Technically, the parser uses a regex-based tokenizer that recognizes all 16 SVG path command types: M (moveTo), L (lineTo), H (horizontal line), V (vertical line), C (cubic Bézier), S (smooth cubic Bézier), Q (quadratic Bézier), T (smooth quadratic Bézier), A (arc), and Z (closePath) — each in both absolute (uppercase) and relative (lowercase) forms. All processing happens in the browser with no server round-trips.
Key Features
- Real-time SVG path preview rendered directly in the browser using a native SVG element
- Command table breaking down every segment with its command letter, descriptive name, and numeric parameters
- Supports all 16 SVG path commands: M, L, H, V, C, S, Q, T, A, Z and their relative (lowercase) counterparts
- Bilingual command names — toggle between English (moveTo, lineTo, cubicBezier) and Korean descriptions
- Monospace font display for parameters to align numbers for easy scanning
- 100% client-side processing — path data never leaves your browser
- Responsive layout with preview panel and table side by side on larger screens
- Dark mode support with appropriate contrast for both the SVG canvas and data table
Frequently Asked Questions
What is the SVG path d attribute?
The `d` attribute in an SVG `<path>` element contains a series of drawing commands that define the shape. Commands like M (move), L (line), C (cubic Bézier), A (arc), and Z (close) are followed by numeric coordinates. This compact notation can be hard to read directly, which is why a visual parser like this tool is helpful.
What SVG path commands does this tool support?
The tool supports all standard SVG path commands: M/m (moveTo), L/l (lineTo), H/h (horizontal line), V/v (vertical line), C/c (cubic Bézier), S/s (smooth cubic Bézier), Q/q (quadratic Bézier), T/t (smooth quadratic Bézier), A/a (arc), and Z/z (closePath). Uppercase letters use absolute coordinates; lowercase use coordinates relative to the current position.
What is the difference between absolute and relative path commands?
Uppercase commands (M, L, C, etc.) use absolute coordinates measured from the SVG origin. Lowercase commands (m, l, c, etc.) use coordinates relative to the endpoint of the previous command. Relative commands are useful for creating reusable path fragments that can be easily repositioned.
How do I read the parameters column in the table?
Parameters are the numbers that follow each command. For example, `M 10 20` has parameters 10 and 20 representing the x and y coordinates. `C 20 30 40 50 60 70` has 6 parameters: two control point coordinates and one endpoint coordinate. The exact meaning depends on the command type.
Can I edit the path and see changes live?
Yes. The textarea and the SVG preview are linked in real time using React state. Any change you make to the path data is immediately reflected in both the visual preview and the parsed command table below it.
Why does my path not appear in the preview?
If the path appears blank, the path may only contain `fill` with no `fill` value (the tool renders paths with `fill="none"` and a blue stroke). Check that your path coordinates are within the 0–200 viewBox range, or that the shape is not extremely small. Invalid command syntax will result in an empty or truncated shape.
Can I use this to debug SVG exported from Figma or Illustrator?
Yes. Copy the `d` attribute value from the SVG source code generated by Figma, Illustrator, or Inkscape and paste it into the input. The tool will parse and list every command, making it easy to understand which parts of the path correspond to which visual segments.
Is this tool free to use?
Yes, the SVG Path Visualizer is completely free with no usage limits, no account required, and no software to install. All processing runs locally in your browser, so your path data is never sent to any server.