SVG pathLength Attribute
pathLength lets you declare a path's length as a round number, making stroke-dash animations far easier to calculate.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Why pathLength Simplifies Dash Animations
A path's actual computed length is usually an awkward decimal number, which makes stroke-dasharray and stroke-dashoffset animations tedious to calculate — setting pathLength="100" tells the browser to treat the path as if it were exactly 100 units long, so dash values become simple percentages regardless of the path's real geometric length.
- A path's real computed length is usually an awkward decimal value
- pathLength="100" makes the browser treat the path as exactly 100 units long
- Dash values become simple percentages regardless of the real path length
Practical Uses for a Normalized Path Length
pathLength is especially useful for a draw-on line animation where you want the stroke to reveal at a predictable rate, or for a progress indicator built from a path where mapping a 0-100 progress value directly to stroke-dashoffset becomes trivial once the path is normalized to a length of 100.
- Makes draw-on line animations reveal at a predictable, easy-to-control rate
- Simplifies path-based progress indicators mapping 0-100 progress directly
- Removes the need to measure a path's real length before animating it
Frequently Asked Questions
Does pathLength change how the path actually renders visually?
No, pathLength only affects how length-based properties like stroke-dasharray are calculated — the path's actual rendered shape and size remain completely unchanged.
Can I use any number for pathLength, not just 100?
Yes, any positive number works, though 100 is popular specifically because it makes dash values map directly to intuitive percentages of the path's total length.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG