Flip an SVG
Mirror a vector drawing left to right or top to bottom without turning it into pixels. The viewBox, IDs and text are kept, and the file never leaves this tab.
Open an SVG to flip
Drop it here or press to choose. It is read in this tab; nothing is sent anywhere.
How it works
Flipping a drawing, not a picture
An SVG is a list of shapes in a coordinate box called the viewBox. To mirror it, nothing about the shapes needs to change: wrap them in one group whose transform reflects every point about the middle of that box. For a viewBox of width W starting at minX, the left-to-right mirror is the matrix (−1, 0, 0, 1, 2·minX + W, 0) — a point at minX lands at minX + W and the other way round. Top to bottom uses the same idea on the height, and both axes combine them.
Because the reflection is applied to the group, gradients, patterns, clip paths and masks used inside it follow automatically, and embedded pictures flip with everything else. The file’s definitions, styles and metadata are left exactly where they were, so IDs that other files or stylesheets point at still work. The previews on this page are the browser drawing your original and the output file, side by side.
Four steps
Running it
- Open the SVG. A logo, an icon, a cutting file or a diagram. It is read as text in this tab and drawn next to its flipped version.
- Choose the axis. Left to right for a mirror image (cutting and transfer files), top to bottom, or both.
- Read the summary. The page shows the viewBox, the one transform it adds, and anything it removed (scripts) or left alone (links to other files).
- Save. The flipped file downloads as SVG — still a vector, the same size on the page, sharp at any zoom.
Real numbers
A worked example
A logo with viewBox="0 0 240 120", flipped left to right, gets transform="matrix(-1 0 0 1 240 0)" on one new group: a point at x = 30 lands at x = 210, and the box itself is unchanged. An icon drawn around its centre, with viewBox="-50 -50 100 100", gets matrix(-1 0 0 1 0 0) — 2 × (−50) + 100 = 0, so the reflection is about x = 0. A cutting file of 3.2 KB typically grows by under 60 bytes: the group and its transform.
- Text reads backwards too. That is the point of a mirror, but a vector editor will show the text inside a flipped group.
- Fonts are not embedded. Text is drawn with the viewer's installed fonts, as in the original. Convert text to outlines in your editor if the font must travel with the file.
- Linked files are not fetched. References to other files are kept as they are and listed; keep those files next to the SVG.
- Percent sizes need a viewBox. Without a viewBox, the page needs a width and height in pixels to know where the middle is.
Asked often