An SVG path generator makes the d attribute readable. That single string is the most powerful and least approachable part of SVG: every icon, chart line, and custom shape on the web is a sequence of terse single-letter commands and bare numbers, with no visual clue about what any of it draws until you render it.
This tool inverts that. You edit commands as labelled rows, the preview redraws immediately, and the finished path string plus complete SVG markup is available to copy. Arb Digital built it for the moments when you need a shape that no icon set provides, or when you need to understand a path somebody else wrote before you can safely change it.
What This SVG Path Generator Does
Each row holds one path command — move, line, cubic curve, quadratic curve, arc, or close — and its parameters. Add, edit, reorder by editing, or remove rows and the preview updates on every keystroke. The output box provides both the raw d string and a complete, self-contained SVG element ready to paste into HTML.
The result panel reports geometry measured from the rendered path rather than estimated from the text: total path length, the number of commands, how many separate subpaths the string defines, the bounding box in user units, and whether the path is closed. Path length in particular is hard to work out by hand for anything containing a curve, and it is the number you need for stroke-dash animations.
How to Use It
- Start with the move command. Every path begins with
Mand a starting coordinate; without it there is nothing to draw from. - Add commands in drawing order. Each one continues from wherever the previous command finished, so order is the shape.
- Edit the parameters as space-separated numbers. The hint on each row lists the parameters that command expects.
- Close the shape with
Zif you want fill to behave predictably and the join at the start point to render cleanly. - Set the precision and copy the markup. Two decimal places is plenty for almost any icon.
The Formula / How It's Calculated
A path is a string of commands defined in the W3C SVG 2 paths specification. M x y moves the pen without drawing. L x y draws a straight line to a point. H x and V y draw horizontal and vertical lines using a single coordinate. Z closes the current subpath by drawing a straight line back to its starting point.
Curves come in two forms. C x1 y1 x2 y2 x y draws a cubic Bézier using two control points, which gives independent control of the departure and arrival tangents — this is what most drawing tools export. Q x1 y1 x y draws a quadratic Bézier with one shared control point, producing simpler curves with less code. The smooth variants S and T reuse a reflection of the previous control point, which keeps joins continuous with fewer numbers.
A rx ry rotation large-arc-flag sweep-flag x y draws an elliptical arc. It is the hardest command to read because two of its seven parameters are flags rather than coordinates. Between any two points there are four possible arcs of a given radius; the large-arc flag picks the longer or shorter path, and the sweep flag picks the clockwise or anticlockwise direction. Flipping either changes the shape completely, which is why arcs are usually adjusted by experiment rather than by calculation.
Uppercase and Lowercase Are Different Commands
Every path command exists in two cases, and the difference is the single most useful thing to know about path syntax. Uppercase commands take absolute coordinates, measured from the origin of the coordinate system. Lowercase commands take relative coordinates, measured from the current point.
L 100 50 draws to the point 100 across and 50 down from the origin. l 100 50 draws 100 to the right and 50 down from wherever the pen currently is. Both are correct; they suit different situations. Absolute coordinates are easier to reason about and to edit individually, because changing one command does not shift everything after it. Relative coordinates produce shorter strings and make a shape trivially repositionable — change the opening M and the entire path moves.
This is also why paths copied from design tools look impenetrable: most export relative commands with minimal whitespace, so a path reads as a wall of numbers with no anchor points. Converting to absolute coordinates is often the first step in making an exported path editable by hand.
Fill Rules and Why a Shape Has a Hole
A single path can contain multiple subpaths — each M after the first starts a new one. That is how a letter O, a donut, or any shape with a hole is drawn as one element. Which regions end up filled is decided by the fill rule.
The default, nonzero, counts the direction of every boundary crossing; a region is filled unless the crossings cancel out. The practical consequence is that an inner subpath only creates a hole if it is drawn in the opposite direction to the outer one. Two circles drawn the same way produce a solid disc, not a ring. The alternative rule, evenodd, defined alongside it in the SVG 2 painting specification, simply counts crossings and fills where the count is odd, which makes holes appear regardless of direction and is usually easier to predict.
If a shape imported from a design tool fills solid when it should have a hole, the direction of the inner subpath is the first thing to check, and switching the fill rule is the quickest fix.
Path Length, Dash Arrays, and Line-Drawing Animation
The self-drawing line effect used in logo animations works by setting stroke-dasharray to the total path length, so the path is one dash exactly as long as itself, then animating stroke-dashoffset from that length down to zero. The dash slides into view and the line appears to draw itself.
The whole effect depends on knowing the path length, which is why it is the headline figure in the result panel here. Browsers measure it by flattening curves into small segments, so the value is an extremely close approximation rather than an exact analytic result — Bézier arc length has no simple closed form. Rounding up slightly is safer than rounding down: an offset marginally larger than the path leaves the line fully hidden at the start, while one that is too small leaves a visible stub before the animation begins.
Precision, File Size, and Sub-Pixel Coordinates
Exported paths routinely carry six or more decimal places per coordinate. On a 24-pixel icon that precision describes distances far smaller than a millionth of a pixel, and it can easily double the file size for no visible benefit. Reducing to one or two decimals is one of the highest-value optimisations available on an icon-heavy site.
The precision control here rounds every coordinate in the output. Watch the preview as you reduce it — at zero decimals, curves on a small canvas begin to visibly flatten, which tells you where the useful limit sits for your particular shape. As a rule, keep enough precision that the shape at its largest rendered size is unchanged, and no more.
When a Path Is the Wrong Tool
SVG has dedicated elements for rectangles, circles, ellipses, lines, and polygons. They are shorter to write, far easier to read six months later, and animate their own attributes directly — you can animate a circle's radius, which has no equivalent on a path without regenerating the whole string.
Use a path when the shape genuinely needs curves that other elements cannot express, or when you need several disconnected subpaths in one element for a single fill rule. Reaching for a path to draw a rectangle is a habit picked up from design tool exports, not a technical requirement, and it makes the markup harder to maintain than it needs to be.
Arb Digital's web development team builds sites with optimised inline SVG, sensible icon systems, and asset budgets that hold up on mobile connections.
Web Development Services Talk to Arb DigitalCommon Mistakes to Avoid
- Starting a path without a move command. Without an initial
Mthere is no current point and nothing renders. - Mixing up absolute and relative commands. Uppercase is absolute, lowercase is relative, and swapping one changes everything that follows.
- Expecting a hole from a nested subpath drawn in the same direction. With the default fill rule, direction decides whether a hole appears.
- Shipping exported coordinates at six decimal places. The extra precision is invisible and inflates every icon on the page.
- Using a path for a rectangle or circle. The dedicated elements are clearer and animate their own attributes.
Related Free Tools From Arb Digital
Rasterise a finished graphic with SVG to PNG, generate site icons using the favicon generator, animate the result with the CSS animation generator, tidy the surrounding markup with the XML formatter, and compress the stylesheet that ships alongside it with the CSS minifier. More sit in the free online tools hub.
Frequently Asked Questions
It holds the entire drawing instruction for a path as a sequence of single-letter commands followed by numeric parameters, such as move, line, curve, arc, and close.
Uppercase commands use absolute coordinates measured from the origin. Lowercase commands use relative coordinates measured from the current point, which makes a shape easy to move by editing only the first command.
A cubic curve has two control points and can set the departure and arrival tangents independently, so it handles S-shapes. A quadratic has one control point and is shorter but less flexible.
The large-arc flag chooses between the longer and shorter of the two possible arcs, and the sweep flag chooses the direction of travel. Together they select one of four candidate arcs.
With the default nonzero fill rule, an inner subpath must be drawn in the opposite direction to the outer one to create a hole. Switching to the evenodd rule removes that dependency.
Set stroke-dasharray to the total path length and animate stroke-dashoffset from that length to zero. This tool reports the length you need.
One or two is enough for almost any icon. More precision is invisible at normal rendering sizes and noticeably increases file size across a large icon set.
Path length is measured by the browser using curve flattening, so it is a very close approximation rather than an exact analytic value.
