SVG Path Inverter Tool
Flip or mirror any SVG horizontally or vertically and copy the transformed code.
Runs entirely in your browser. Your SVG is never uploaded anywhere.
How to use this tool
Paste a full SVG element into the box above, then choose how you want to flip it.
"Flip horizontal" mirrors it left to right, "flip vertical" mirrors it top to bottom,
and "flip both" rotates the artwork by mirroring on both axes at once. Press
Invert SVG to see the original and the mirrored version side by side,
then copy the transformed code or download it as an .svg file. If you do not
have an SVG handy, click Load sample to try the tool right away.
How the SVG path inverter works
Vertical flip: scale(1, -1) translate(0, -height)
Flip both: scale(-1, -1) translate(-width, -height)
Instead of rewriting every coordinate in every path, this tool wraps your existing
shapes in a single group with a CSS-style transform. A negative scale on the
X axis mirrors the drawing horizontally, and a negative scale on the Y axis mirrors it
vertically. Because flipping around the origin would push the artwork off-screen, the
tool reads the SVG viewBox (or its width and height) and adds a matching
translate so the mirrored shape stays perfectly inside the canvas. The result
is a clean, reversible transform wrapper that mirrors any number of paths at once without
touching the original path data.
A real example
Say you have an arrow drawn on a 24 by 24 canvas with the path
M4 12h12l-4-4m4 4l-4 4. To flip it horizontally so the arrow points the other
way, the tool keeps your path exactly as written and wraps it like this:
<g transform="translate(24,0) scale(-1,1)"> ... </g>. The
scale(-1,1) mirrors the X coordinates and the translate(24,0)
shifts the mirrored drawing back into the visible 0 to 24 range. The arrow now points left
instead of right, and the markup stays readable.
Common questions
What does this SVG path inverter tool actually do?
It mirrors your vector graphic across the horizontal axis, the vertical axis, or both, by adding a transform wrapper around your existing shapes. The original path data is preserved, so the change is easy to read and easy to undo.
Will flipping change my original SVG coordinates?
No. The tool does not rewrite each point. It flips the whole drawing using a scale and translate transform, which is the standard way to mirror SVG paths while keeping the source coordinates intact.
Why does my flipped SVG need a translate as well as a scale?
A negative scale mirrors the shape around the origin at the top-left corner, which moves it outside the canvas. The translate shifts it back so the mirrored vectors line up with the original viewBox.
Is my SVG uploaded to a server?
No. Everything happens in your browser using native JavaScript. Nothing is sent anywhere, so you can safely flip private or unreleased artwork.
Does it work with SVGs that have many paths or groups?
Yes. Because the flip is applied to a single wrapping group, every path, circle, and shape inside the SVG is mirrored together in one step.