SVG Path Editor
Visualize and inspect SVG path data. Parse d attribute commands (M, L, C, Q, A, Z), configure viewBox, stroke, and fill — all in the browser.
Examples
Live Preview
8 commands parsed
Settings
Show grid lines
Parsed Commands(8 total)
| # | Cmd | Description | Parameters |
|---|---|---|---|
| 1 | M | Move to (absolute) | 50, 30 |
| 2 | C | Cubic Bézier (absolute) | 50, 20, 35, 10, 20, 20 |
| 3 | C | Cubic Bézier (absolute) | 5, 30, 5, 50, 20, 65 |
| 4 | L | Line to (absolute) | 50, 90 |
| 5 | L | Line to (absolute) | 80, 65 |
| 6 | C | Cubic Bézier (absolute) | 95, 50, 95, 30, 80, 20 |
| 7 | C | Cubic Bézier (absolute) | 65, 10, 50, 20, 50, 30 |
| 8 | Z | Close path | — |
How to Use SVG Path Editor
- 1Paste or type your SVG path d attribute.
- 2See the path rendered in the live preview.
- 3Review parsed commands in the table below.
- 4Adjust viewBox, stroke, and fill settings as needed.
Zenovay
Privacy-first analytics for your website
Understand your visitors without invasive tracking. GDPR compliant, lightweight, and powerful.
Related Tools
JSON Formatter & ValidatorFormat, validate, and beautify JSON data with syntax highlighting and error detection.
JWT DecoderDecode and inspect JWT tokens. View header, payload, and verify signatures.
Base64 Encode/DecodeEncode text to Base64 or decode Base64 back to text. Supports UTF-8 and binary data.
URL Encode/DecodeEncode or decode URL components. Handle special characters, query strings, and full URLs.
Frequently Asked Questions
What is SVG path syntax and how does the d attribute work?▾
The SVG <path> element uses the d attribute to define a series of drawing commands that trace a shape. Commands are single letters followed by numeric parameters. Uppercase letters use absolute coordinates (relative to the SVG origin), while lowercase letters use coordinates relative to the current drawing position. A typical path looks like: M 10 10 L 90 10 L 50 90 Z.
What do the SVG path commands M, L, C, Q, A, and Z mean?▾
M/m (MoveTo) moves the pen without drawing. L/l (LineTo) draws a straight line. H/h draws a horizontal line, V/v a vertical line. C/c draws a cubic Bézier curve with two control points; S/s is a smooth cubic Bézier. Q/q draws a quadratic Bézier curve with one control point; T/t is a smooth quadratic Bézier. A/a draws an elliptical arc. Z/z closes the path by drawing a straight line back to the start point.
What is the SVG viewBox and why does it matter?▾
The viewBox attribute defines the internal coordinate system of an SVG. It takes four values: min-x, min-y, width, and height. For example, viewBox="0 0 100 100" means the SVG canvas spans from (0,0) to (100,100) in user units. Changing the viewBox pans and zooms the coordinate space without changing the rendered size of the SVG element itself. If your path coordinates exceed the viewBox bounds, parts of the path will be clipped.
What is the difference between absolute and relative path commands?▾
Absolute commands (uppercase: M, L, C, Q, etc.) interpret coordinates as fixed positions relative to the SVG origin (0,0). Relative commands (lowercase: m, l, c, q, etc.) interpret coordinates as offsets from the current drawing cursor position. Relative commands make paths more portable because moving the path origin only requires changing the initial M command, not every coordinate in the path.
How can I optimize SVG path data to reduce file size?▾
Common SVG path optimizations include: (1) using relative commands (lowercase) to shorten coordinate values; (2) removing unnecessary whitespace and using commas only where needed — SVG parsers accept "M10 10L90 10"; (3) rounding coordinates to fewer decimal places (2 decimals are usually enough); (4) combining adjacent LineTo commands; (5) using H and V commands for horizontal and vertical lines instead of L. Tools like SVGO automate most of these optimizations.