What SVG path commands can SVG Path Visualizer help me discover?

Updated

SVG Path Visualizer reads the path data you paste into it — the string that normally sits inside an SVG's d attribute — and breaks that string into its individual commands so you can see what each one does. It recognizes the standard SVG path command set, so any command present in your d string is available for inspection. The tool's own description frames this as its core purpose: "Enter an SVG path data (the string inside the d attribute) to visualize it and discover all its different commands."

The command set the tool surfaces

SVG path data is written as a sequence of single-letter commands, each followed by numeric coordinates. The visualizer groups and labels these commands as it parses your string. They fall into two families.

Line and move commands

These build straight edges and reposition the drawing point without drawing anything:

Command Meaning
M / m Move to a point (start a new subpath)
L / l Draw a line to a point
H / h Draw a horizontal line
V / v Draw a vertical line
Z / z Close the current subpath back to its start

Uppercase letters use absolute coordinates; lowercase letters use coordinates relative to the current point. Seeing both forms side by side in the parsed output is one of the quickest ways to understand that distinction.

Curve and arc commands

These produce anything that isn't a straight line:

Command Meaning
C / c Cubic Bézier curve (two control points, one end point)
S / s Smooth cubic Bézier (reflects the previous control point)
Q / q Quadratic Bézier curve (one control point, one end point)
T / t Smooth quadratic Bézier (reflects the previous control point)
A / a Elliptical arc (radius, rotation, flags, end point)

The arc command is the one most people find hardest to read, because its parameters — two radii, an x-axis rotation, a large-arc flag, a sweep flag, and an end point — don't map obviously onto the shape you see. The visualizer's built-in examples include an "Arc" sample precisely because that command benefits most from being seen rather than read.

How the visualization connects commands to shapes

The value of the tool isn't the list of letters — it's that the list is shown next to the rendered path. When you paste a d string, you get both the drawing and the command breakdown, so you can match a specific command in the text to the segment of the curve or line it produced.

The bundled examples make this concrete. Loading "Line" or "Triangle" shows how M, L, and Z combine into closed straight-edged shapes. Loading "Quad Curve" or "Smooth" shows how Q and T differ from their cubic counterparts. Loading "Heart" or "Banana" shows several command types working together in one path, which is closer to what real-world icon and illustration paths look like.

A practical way to use it

  1. Copy the d attribute value from an SVG you're working with, or start from one of the examples.
  2. Paste it into the input field.
  3. Read the rendered shape alongside the command list.
  4. To test a single command's effect, edit one command or one set of coordinates in the string and watch how the shape changes.

That last step is where the tool earns its keep: changing a control point in a C command and seeing the curve bend differently teaches the command faster than any written description.

What to keep in mind

The tool requires JavaScript to run, so it won't function with scripting disabled. It works on path data only — it doesn't parse full SVG files, styles, or transforms, so you need to extract the d string yourself before pasting. And because it's a visualizer rather than an editor, it won't validate your path against a spec or fix malformed data for you; it shows you what the commands you wrote actually draw.