How do I rotate an SVG path online?

Paste your SVG (or use the sample arrow path), then click Rotate path 90°. The path turns around the viewBox center and the source updates instantly.

Do I need to rewrite the path d attribute to rotate it?

No. The tool keeps the original path data and wraps it in a rotate transform around the viewBox center, so you avoid recalculating coordinates.

Where is the rotation pivot?

Around the center of the SVG viewBox (or width/height if viewBox is missing). Root width and height attributes are removed so the graphic scales cleanly.

Want a different angle?

Use Rotate SVG Path 45° or Rotate SVG Path by Degrees for smaller steps, or change the Angle field on this page.

Rotate SVG Path Online — Free Tool

FAQ

Quick answers

How do I rotate an SVG path online?: Paste your SVG (or use the sample arrow path), then click Rotate path 90°. The path turns around the viewBox center and the source updates instantly.
Do I need to rewrite the path d attribute to rotate it?: No. The tool keeps the original path data and wraps it in a rotate transform around the viewBox center, so you avoid recalculating coordinates.
Where is the rotation pivot?: Around the center of the SVG viewBox (or width/height if viewBox is missing). Root width and height attributes are removed so the graphic scales cleanly.
Want a different angle?: Use Rotate SVG Path 45° or Rotate SVG Path by Degrees for smaller steps, or change the Angle field on this page.

Rotate path by degrees → Rotate path 45° → Rotate SVG element → Rotate SVG icon →

Privacy Terms

Source

Angle

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Rotate SVG Path

Live preview