How do I normalize an SVG path start point?

Click Normalize start. Each closed subpath is rotated so the first M is the leftmost vertex (min-x, then min-y). Open subpaths are left as they are.

How is normalizing the start different from reversing path direction?

Reverse draws the outline backwards and flips winding. Normalize keeps the same order and only chooses which vertex is M — useful before a path morph.

Does normalize start move the path to the origin?

No. Coordinates are not translated. Move to origin puts the bounding box at (0, 0). This page only cycles the command start.

Are open paths rotated to a new start?

No. An open stroke already starts at its first M. Reverse Path Direction if you need the other end to be the start.

Normalize SVG Path Start Point — Free Tool

FAQ

Quick answers

How do I normalize an SVG path start point?: Click Normalize start. Each closed subpath is rotated so the first M is the leftmost vertex (min-x, then min-y). Open subpaths are left as they are.
How is normalizing the start different from reversing path direction?: Reverse draws the outline backwards and flips winding. Normalize keeps the same order and only chooses which vertex is M — useful before a path morph.
Does normalize start move the path to the origin?: No. Coordinates are not translated. Move to origin puts the bounding box at (0, 0). This page only cycles the command start.
Are open paths rotated to a new start?: No. An open stroke already starts at its first M. Reverse Path Direction if you need the other end to be the start.

Reverse path direction → Change winding order → Move to origin → Absolute → relative →

Privacy Terms

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Normalize SVG Path Start Point

Live preview