PLOTCASTER Photo to line art

Flip an SVG

Choose an SVG and it is mirrored left to right at once. Press “Top to bottom” to flip it the other way, or both for upside down, then download the file. The frame and the size stay exactly as they were.

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 flip an SVG

  1. Choose your SVG, drop it on the box, or paste SVG code. It is shown beside its mirror image straight away.
  2. Under “Flip it”, “Left to right” is already pressed. That is the horizontal flip, the one a mirror makes. Press “Top to bottom” for the vertical flip; press either again to take it off.
  3. Compare the two pictures and download the SVG. It is saved under the same name with “-flipped” added.

What the tool writes

One group round everything the file draws, with one transform on it. Nothing else changes: the outer <svg> tag, with its width, height and viewBox, is written back character for character, and so is every shape. Definitions, style sheets and the title stay outside the group, where they were.

The sample on this page is 240 × 160. Flipped left to right it gets <g transform="translate(240 0) scale(-1 1)">. The scale(-1 1) is the mirror: it turns every x into minus x, which on its own would throw the whole drawing off the left edge of the frame. The translate in front brings it back, and its number is twice the x of the mirror line, here the middle of the frame at 120.

That is where flips typed by hand go wrong. A frame need not start at 0: for viewBox="100 0 240 160" the middle is at 220, so the group needs translate(440 0), not 240. The tool reads the viewBox and works the number out; a file with no viewBox is mirrored about the middle of its width and height.

Left to right, top to bottom, or both

  • Left to right is a horizontal flip: left and right change places, as in a mirror. It is also called mirroring or reflecting an SVG.
  • Top to bottom is a vertical flip: the drawing stands on its head, like a reflection in water. It is written translate(0 160) scale(1 -1) for the sample.
  • Both together are the same picture as a half turn. They are written as one transform, translate(240 160) scale(-1 -1).

What to know

  • The mirror line is the middle of the picture, not the middle of the drawing. A drawing that sits to the left of its frame ends up to the right of it. To mirror a drawing about its own middle, crop the SVG to the drawing first.
  • Text reads backwards after a flip left to right. That is correct for iron-on vinyl, which is cut face down, and wrong for almost anything else.
  • Shadows and gradients flip too. A shadow that fell to the right falls to the left, and a gradient that ran from red to blue runs from blue to red.
  • A frame of another shape. If the width and height do not have the proportions of the viewBox, and the file pins the drawing to one side with preserveAspectRatio, more shows on one side than the other. The tool then mirrors about the middle of what shows.
  • CSS can flip the view only. transform: scaleX(-1) on an image in a web page mirrors it on that page and leaves the file as it was.

Questions

How do I flip an SVG horizontally?

Choose the file: “Left to right” is pressed already, and that is the horizontal flip. Download the result. For a vertical flip press “Top to bottom” and press “Left to right” again to take it off.

Does flipping change the size or the quality?

No. The width, height and viewBox are untouched, no shape is redrawn, and the file grows by about 50 bytes: one group and its transform.

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

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

Can I flip one shape and leave the rest?

Not here: this tool flips the whole drawing. For one shape, give that element its own transform in the code, translate(2x 0) scale(-1 1), where x is the middle of the shape. The SVG editor shows the code beside the picture.

How do I undo a flip?

Keep the original, or flip the flipped file again: two flips the same way give back the first picture. The second flip adds a second group; it does not remove the first.

Related