Rotate or flip an SVG

Choose an SVG, turn it a quarter turn, a half turn or any angle you type, or mirror it. The frame is refitted to the turned drawing, so nothing is cut off, and you download the file.

Free, no account. The file is read by code running in your browser. It is not uploaded, and nothing about it is stored.

or drop it here, or paste. SVG code works too

How to rotate or flip an SVG

  1. Choose your SVG, drop it on the box, or paste SVG code.
  2. Press “Turn left 90°”, “Turn right 90°” or “Turn 180°”, as many times as you like, or type an angle in degrees. Positive angles turn clockwise.
  3. To mirror the drawing, tick “Flip left to right” or “Flip top to bottom”.
  4. Compare the two pictures and download the SVG.

What the tool writes

It puts one group round everything the file draws and gives that group a transform. Then it changes the outer element’s viewBox, width and height so that the frame fits the turned drawing. No path or shape inside is rewritten, so the result is exact and the turn can be undone by hand.

The sample on this page is 240 × 160. Turned right by 90° it gets <g transform="rotate(90 120 80)">, a turn about the middle of its frame, and its frame becomes viewBox="40 -40 160 240" with a width of 160 and a height of 240. Without that second step the turned drawing would stick out of the top and bottom of a frame that is still wide and short, which is what happens when a rotate is typed into a file by hand.

Definitions, style sheets and the title stay outside the group, where they were.

Quarter turns and other angles

A turn of 90° or 270° swaps the width and the height, units and all: a file 80 mm wide and 40 mm high becomes 40 mm wide and 80 mm high. A turn of 180° leaves the frame as it is.

At any other angle the frame has to grow to hold a tilted rectangle. Its new width is the old width times the cosine of the angle plus the old height times the sine, so the 240 × 160 sample turned 45° needs a frame 282.84 units square. The four corners are empty and see-through. If the original had shapes hidden outside its frame, they can come into view in those corners.

Flipping and mirroring

A flip left to right mirrors the drawing about the vertical line through the middle of its frame; a flip top to bottom mirrors it about the horizontal one. The frame does not change. Text is mirrored with everything else and reads backwards, which is what a design needs when it is cut from iron-on vinyl face down.

When you ask for a flip and a turn together, the flip is done first and the turn after. Both flips at once are the same as a turn of 180°, and are written as one.

What to know

  • Nothing is redrawn. Strokes, gradients, patterns and text all turn with the group. There is no loss however often you turn.
  • Shadows turn too. A filter’s shadow is part of the drawing, so after a quarter turn it falls in a different direction. The tool reminds you when the file has a filter.
  • Percentages are rewritten. A size such as width="100%" on a shape depends on the frame, which changes shape on a quarter turn, so such values are replaced with plain numbers first.
  • CSS turns only the view. transform: rotate(90deg) on an image in a web page turns it on that page without changing the file, and the space the page keeps for it stays the old shape.

Questions

How do I flip an SVG horizontally?

Tick “Flip left to right”. That is a horizontal flip, also called mirroring. “Flip top to bottom” is the vertical one.

Does rotating an SVG lose quality?

No. The shapes are not redrawn or resampled; a single transform tells the renderer to draw them turned. Rotate it four times by 90° and the picture is exactly where it started.

Why did my SVG get bigger when I rotated it by 45°?

A tilted rectangle needs a larger upright box to hold it. The drawing is the same size; the frame round it grew, and its corners are empty. Use Crop SVG afterwards to trim the frame to the drawing itself.

Can I rotate one shape and leave the rest?

Not here: this tool turns the whole drawing. For one shape, add transform="rotate(angle x y)" to that element, where x and y are the point to turn about. The SVG viewer lets you edit the code and see the result.

Do I need to mirror a design for iron-on vinyl?

Yes, as a rule: heat transfer vinyl is cut from the back, so the design is cut mirrored and reads correctly once pressed. Flip left to right here, or use the mirror setting in your cutting program, but not both.

Related