How to Rotate an SVG
Rotate any SVG element or an entire SVG file by any angle using CSS, SVG transform attributes, or Inkscape — no quality loss at any rotation.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Method 1: CSS transform (Web)
For inline SVG on web pages, CSS transform is the easiest rotation method.
- svg { transform: rotate(45deg); } — rotates the entire SVG
- path { transform: rotate(90deg); transform-origin: center; } — rotates one element
- transform-origin: center center; — ensures rotation around the element's center
- Animated rotation: @keyframes spin { to { transform: rotate(360deg); } }
- Only works for display — the SVG file itself is unchanged
Method 2: SVG transform Attribute
Modify the SVG file's transform attribute for permanent rotation.
- Add to the <svg> root: transform='rotate(45, cx, cy)' where cx/cy is the center point
- Or wrap content in a group: <g transform='rotate(90)'>
- Rotate around center: rotate(angle, centerX, centerY) — e.g., rotate(90, 50, 50) for a 100×100 SVG
- Inkscape: Object > Transform > Rotate tab — enter degrees, click Apply
- Path > Transform: rotate selected paths in Inkscape's Transform dialog
Method 3: Inkscape
Inkscape's handles and transform tools make rotation visually intuitive.
- Click object once: shows scale handles. Click again: shows rotation handles (curved arrows at corners)
- Drag a corner rotation handle to rotate freely
- Type exact angle: Object > Transform > Rotate > enter degrees and click Apply
- Rotate 90° increments: Object > Rotate 90° CW/CCW
- File > Save As to save the rotated version
Frequently Asked Questions
Does rotating an SVG change its file size?
No — rotation is applied as a transform attribute with negligible byte impact. SVG path data is unchanged; only the transform value is added.
How do I rotate just one path in a multi-element SVG?
In Inkscape, click the specific path, then drag the rotation handle. Or add transform='rotate(45, cx, cy)' directly to that <path> element in the SVG code.
Why does my SVG rotate off-screen when I apply CSS?
CSS transform rotates around the top-left corner by default. Add transform-origin: center; to rotate around the element's center.
How do I rotate an SVG 90 degrees for use in print?
In Inkscape: select all, Object > Rotate 90° CW. The SVG rotates permanently. File > Save As to save the rotated version.
Can I animate SVG rotation with CSS?
Yes: @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .icon { animation: spin 2s linear infinite; transform-origin: center; }
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