SVG Path Visualizer

Paste an SVG path d attribute to see it drawn on a grid, with every command explained, a fit-to-path viewBox and copy-ready SVG code.

SVG Path (d attribute)

Live Preview

Sample Paths

Import SVG File

Styling

Stroke Color

Stroke Width: 2px

Fill Color

ViewBox

Width

Height

Grid

Show Grid

Generated SVG Code

Path Commands Explained (5)

M 10 10	Move to (10, 10)
H 90	Horizontal line to x = 90
V 90	Vertical line to y = 90
H 10	Horizontal line to x = 10
Z	Close path

Reading SVG Path Data

An SVG <path> draws its shape from the d attribute: a sequence of commands, each a single letter followed by numbers. Think of it as instructions to a pen: move here, draw a line there, curve through this point, close the shape.

move to (10,10) → right to x=90 → down to y=90 → left to x=10 → close

Coordinates are in the units of the SVG's viewBox, not pixels: viewBox="0 0 100 100" means the drawing area runs from 0 to 100 in both directions, however large the image is displayed. Numbers can be separated by spaces or commas, and a minus sign also separates them, which is why exported icons often look like l-5.2-3.1.

SVG Path Commands Reference

Command	Parameters	What it does	Example
M / m	x y	Move the pen without drawing; starts every path	M10 10
L / l	x y	Straight line to a point	L90 90
H / h	x	Horizontal line	H90
V / v	y	Vertical line	V90
C / c	x1 y1 x2 y2 x y	Cubic Bézier curve with two control points	C20 0, 80 0, 90 50
S / s	x2 y2 x y	Smooth cubic curve; first control point mirrors the last one	S150 100, 170 50
Q / q	x1 y1 x y	Quadratic Bézier curve with one control point	Q50 0 90 50
T / t	x y	Smooth quadratic curve; control point is mirrored	T170 50
A / a	rx ry rotation large-arc sweep x y	Elliptical arc	A40 40 0 1 0 90 50
Z / z	–	Close the path with a line back to the start	Z

Uppercase letters use absolute coordinates, lowercase letters are relative to the current point. After M, extra coordinate pairs are treated as L commands.

How to Use the SVG Path Visualizer

1Paste the path data: Paste the value of a path's d attribute, pick a sample shape, or upload an SVG file to pull out its paths.
2Check the drawing: See the path on a grid; errors such as a missing starting M or a command without enough numbers are pointed out.
3Read the commands: The command list explains each step in plain words, with relative coordinates converted to absolute positions.
4Fit and export: Set the stroke, fill and viewBox or fit the viewBox to the path, then copy the complete SVG code.

Frequently Asked Questions

What is the d attribute of an SVG path?

The d (data) attribute holds a list of drawing commands, each a letter followed by numbers. M 10 10 moves the pen to (10, 10), L 90 90 draws a straight line to (90, 90) and Z closes the shape. Everything from icons to logos is built from these commands.

What is the difference between upper- and lowercase commands?

Uppercase commands use absolute coordinates measured from the origin of the viewBox; lowercase commands are relative to the current point. M10 10 L20 20 and M10 10 l10 10 draw the same line.

How does the SVG arc command work?

A rx ry rotation large-arc sweep x y draws part of an ellipse with radii rx and ry to the point (x, y). Because two ellipses and two directions can connect two points, large-arc (1 or 0) picks the longer or shorter arc and sweep (1 or 0) picks clockwise or counter-clockwise.

Why is my path cut off or not visible?

Usually the viewBox does not cover the path's coordinates, the fill and stroke are both none, or the stroke width is tiny compared with the viewBox. Use Fit to path to set the viewBox from the path's real bounds, curves included.

How do I make a circle with a path?

Use two arcs, because one arc cannot start and end at the same point: M10 50 A40 40 0 1 0 90 50 A40 40 0 1 0 10 50 Z draws a circle of radius 40 centred at (50, 50). In plain SVG the <circle> element is simpler.

Is my SVG uploaded anywhere?

No. We do not collect or store your files.

Related Tools

Pattern Noise Generator

Create grain/noise texture for UI depth.

CSS Gradient Generator

Create linear and radial gradients with copy-ready CSS.

Color Format Converter

Convert HEX, RGB, HSL, HSV and CMYK, including alpha and CSS color names.

CSS Glassmorphism Generator

Create frosted glass effects with live preview and copy-ready code.

Contrast Checker

Test WCAG AA and AAA color contrast accessibility.

CSS Filter Tester

Preview and tune CSS image filters with live sliders.

HSL Color Slider

Adjust hue, saturation, and lightness with live preview.

Box Shadow Neumorphism Generator

Create raised and pressed soft UI styles with live preview.

CSS Animation Previewer

Preview easing and cubic-bezier animations with live controls.

CSS Border-Radius Blob Maker

Create organic, non-round shapes.

Gradient Text Generator

Generate background-clip: text CSS code.

Color Palette Extractor

Upload image to get 5 dominant colors.

Browse all 33 Design Tools →