Developer Tools
SVG Path Visualizer
Paste an SVG path d attribute and see every command broken down with parameters, pen positions, control points, and a live preview. No signup.
Quick start
Load a sample path
Visualizer overlays
Live preview
Path rendered with overlays
Blue stroke is the rendered path. White dots are command end-points. Yellow dashes mark the bounding box when enabled. Click a command on the right to highlight its segment and any control points.
Summary
Path statistics
Commands
9
Sub-paths
1
Closes (Z)
1
Cubic curves (C/S)
6
Quadratic (Q/T)
0
Arcs (A)
0
Lines (L/H/V)
1
Character count
182
Bounding box (geometry)
x: 0 to 22
y: 0 to 21.35
width: 22, height: 21.35
Based on command end-points and control points. True curve extrema are not included, so curves that bow outward can extend slightly past this box.
Command-by-command
9 commands
Reference
SVG path command cheatsheet
MmMove to
Lift the pen and move to (x, y). Sets the start of a new sub-path. Required as the first command.
params: x y
LlLine to
Draw a straight line from the pen to (x, y).
params: x y
HhHorizontal line
Draw a horizontal line to x; y stays at the pen's current y.
params: x
VvVertical line
Draw a vertical line to y; x stays at the pen's current x.
params: y
CcCubic bezier
Cubic bezier with two control points (x1, y1) and (x2, y2) ending at (x, y).
params: x1 y1 x2 y2 x y
SsSmooth cubic
Cubic bezier where the first control point mirrors the previous curve's second control point.
params: x2 y2 x y
QqQuadratic bezier
Quadratic bezier with one control point (x1, y1) ending at (x, y).
params: x1 y1 x y
TtSmooth quadratic
Quadratic bezier where the control point mirrors the previous curve's control point.
params: x y
AaElliptical arc
Arc on an ellipse with radii rx, ry rotated by rotation degrees. The flags pick which of the four possible arcs to draw.
params: rx ry rotation large-arc sweep x y
ZzClose path
Close the current sub-path with a straight line back to the most recent M point.
params: (none)
Uppercase letters use absolute coordinates. Lowercase letters use coordinates relative to the current pen position. The first command is always treated as absolute even if written in lowercase.
How to use
- Paste an SVG path d attribute into the input, or click one of the sample paths (Heart, Checkmark, Circle, Bezier wave, Quadratic curve, Five-point star) to load a worked example.
- Edit the viewBox if you know the source dimensions, or click Auto-fit to path to derive one from the parsed bounds with a 10 percent pad.
- Read the live preview on the left. White dots mark every end-point, blue is the rendered stroke, and yellow dashes mark the bounding box.
- Scroll down to the command-by-command list. Each row shows the command letter, parameters, before-and-after pen positions, and a one-line explanation.
- Click any command row to highlight just that segment in the preview. Cubic and quadratic curves also show their control points and tangent lines.
- Use Prettify to format the path across multiple lines, Normalize to collapse it onto one line, or Copy summary to grab a plain-text report of every command.
About this tool
SVG Path Visualizer parses any d attribute and breaks it into the individual move-to, line-to, cubic and quadratic bezier, elliptical arc, and close-path commands defined by the SVG specification. Each command is shown with the letter the user wrote (absolute or relative), its raw parameters, the pen position before and after, and a plain-English description of what it does. A live preview renders the path with start and end points marked, control points and tangent handles drawn when bezier curves are highlighted, an optional grid, and a dashed bounding box. Click any command to highlight just that segment in the preview, including the start point (green) and end point (yellow). The visualizer handles tightly packed paths exported from Figma, Sketch, Illustrator, and Inkscape where commands run together without spaces, and it correctly resolves the smooth shorthand commands (S and T) that inherit their first control point from the previous curve. Use the Prettify button to break the path onto multiple lines, the Normalize button to collapse it into a single line with consistent spacing, and the Auto-fit button to generate a viewBox that frames the path. The whole tool runs in your browser using a hand-rolled SVG path parser; no upload, no API, no tracking.
Free to use. Works in your browser. No signup, no login.
Related tools
You may also like
SVG Viewer
Live SVG preview with dimensions, viewBox, element breakdown, background and zoom presets, and copy helpers for data URI and JSX.
Open tool
DeveloperSVG Optimizer
Clean and minify SVG markup with editor-metadata removal, number rounding, and default-attribute stripping.
Open tool
ConverterSVG to PNG Converter
Rasterize SVG markup or files to PNG at any size, with transparent or solid backgrounds.
Open tool
DeveloperSVG to React Component Converter
Paste an SVG, get a ready React component with size and color props.
Open tool
GeneratorCSS Clip Path Generator
Drag polygon points to build CSS clip-path shapes with a live preview.
Open tool