SVG marker orient Attribute
The orient attribute controls whether a marker rotates to automatically follow the direction of the path it's attached to.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
auto vs Fixed Angle Orientation
Setting orient="auto" on a marker element rotates it automatically to match the local direction of the path at each marker position, which is essential for arrowheads that need to point along a curving line, while a fixed numeric angle instead keeps the marker at one constant rotation regardless of path direction.
- orient="auto" rotates the marker to match the path's local direction
- Essential for arrowheads that must point along a curving line correctly
- A fixed numeric angle instead keeps the marker at one constant rotation
auto-start-reverse for Start Markers
The orient="auto-start-reverse" value, used specifically on a marker-start position, orients the marker like auto but flips it 180 degrees, which is exactly what's needed for a start-of-line arrowhead that should point backward relative to a corresponding end-of-line arrowhead pointing forward.
- auto-start-reverse orients like auto but flips the marker 180 degrees
- Designed specifically for use at a path's marker-start position
- Produces a start arrowhead pointing correctly opposite an end arrowhead
Frequently Asked Questions
Why does my arrowhead marker point the wrong way on a curved path?
Without orient="auto", a marker stays at a fixed rotation regardless of the path's direction, so it won't correctly follow a curve — setting orient="auto" fixes this.
What's the difference between auto and auto-start-reverse?
auto rotates the marker to follow the path direction directly, while auto-start-reverse does the same but flips it 180 degrees, intended specifically for start-of-line markers.
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