SVG path viewer and analyzer
Paste the d attribute of an SVG path, or the whole path or svg element, to see the shape with its points and control handles. Every command is listed in plain words, with the exact bounding box and the same path rewritten in absolute coordinates.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Paste the path data, or a path or svg element copied from a file or a design tool.
- Look at the preview: round dots are the end points of commands, squares are Bézier control points, dashed lines are the handles.
- Read the command list, the bounding box, and copy the absolute version if you need it.
How it works
The path data is split into commands and numbers following the SVG rules: numbers may be separated by spaces, commas or just a sign, extra pairs after M are line commands, and arc flags may be written without spaces. Relative points are added to the current point, and S and T reflect the previous control point. The bounding box uses the exact extremes of each segment.
Worked example
The sample heart is M10 30 A20 20 0 0 1 50 30 A20 20 0 0 1 90 30 Q90 60 50 90 Q10 60 10 30 Z. The two arcs are half circles of radius 20 centred at (30, 30) and (70, 30), so their tops reach y = 10. The quadratic curves run down to (50, 90). The box is therefore x 10 to 90 and y 10 to 90: width 80, height 80, with 6 commands in 1 subpath.
Tips
- To centre a path in a viewBox, use the box: set the viewBox to “x y width height”, with a little padding.
- Many tiny relative commands usually come from an optimiser; the absolute form makes them easier to follow.
- If the preview is empty, check for a missing command letter at the start of the data.
Frequently asked questions
What do the letters in path data mean?
M moves the pen, L draws a line, H and V draw horizontal and vertical lines, C and S draw cubic Bézier curves, Q and T quadratic ones, A an elliptical arc, and Z closes the shape. Upper case uses absolute coordinates; lower case is relative to the current point.
How is the bounding box worked out?
From the actual curve, not the control points. For Bézier curves the tool finds where the curve turns on each axis, and for arcs the points where the ellipse reaches its leftmost, rightmost, top and bottom within the drawn part. Stroke width is not included.
What is the absolute path for?
It is the same shape with every point in absolute coordinates, which is easier to read, edit by hand or move to another tool. Repeated numbers after a command are split into separate commands, and numbers are rounded to 3 decimals.
Can I paste a whole SVG file?
Yes. The tool takes the d attribute of every path element it finds and joins them. Other shapes such as rect or circle, and transform attributes, are ignored.