ImageToSVG

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.

Preset:
Colors:
VTracer vectorization + SVGO optimizationPrivacy protected

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

Free converterConvert any image to SVG instantlySVG for CricutCricut-compatible SVG in one stepSVG vs PNGWhich format should you use?Conversion guideStep-by-step image to SVG walkthrough

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