How to Flip (Mirror) an SVG
Flip any SVG horizontally or vertically using CSS, SVG transform attributes, or Inkscape — including mirroring for heat transfer vinyl and cutting machines.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Method 1: CSS Transform (Web)
For web display, CSS is the easiest way to flip SVG without modifying the file.
- Flip horizontal: transform: scaleX(-1);
- Flip vertical: transform: scaleY(-1);
- Both: transform: scale(-1, -1);
- Apply to <img>, inline <svg>, or any container div
- Add transition: transform 0.3s for animated flip effect on hover
Method 2: SVG transform Attribute
Modify the SVG file itself using the transform attribute — produces a permanently flipped SVG.
- Add to <svg>: transform='scale(-1,1) translate(-width, 0)'
- Or wrap content in a group: <g transform='scale(-1,1) translate(-100,0)'>...</g>
- For 100px wide SVG: translate(-100,0) to avoid the flipped content going off-canvas
- viewBox approach: use negative viewBox width, e.g., viewBox='100 0 -100 100'
- Inkscape: Object > Flip Horizontal (! key) or Object > Flip Vertical
Method 3: Inkscape (Easiest for File Editing)
Inkscape has one-click flip controls for selected objects.
- Select all (Ctrl+A) or select specific paths
- Object menu > Flip Horizontal (! key)
- Object menu > Flip Vertical (| key)
- Also in the toolbar: click the flip horizontal/vertical icons at the top
- File > Save As to save the flipped version as a new file
Frequently Asked Questions
Why do I need to flip SVG for heat transfer vinyl?
HTV is pressed face-down onto fabric — the design must be mirrored before cutting so it reads correctly after pressing. Enable mirror in Cricut Design Space (toggle Mirror on) or flip the SVG beforehand.
How do I mirror text in an SVG?
Text as SVG paths flips correctly with any mirror method. Text as SVG <text> elements needs the same transform but may look odd — convert to paths first (Path > Object to Path in Inkscape) before flipping.
Does flipping an SVG change its coordinate system?
Yes — path coordinates are mirrored. This doesn't cause visual issues but may confuse scripts that rely on specific coordinate values. Use CSS scaleX(-1) to avoid modifying the coordinate system.
How do I flip just one element in an SVG, not the whole file?
In Inkscape, select only that element and press the flip key. Or in code, apply the transform attribute to just that element's <path> or <g> tag.
Can I flip an SVG to create a symmetrical design?
Yes. Copy the original paths, flip them, and position beside the originals. Use Inkscape's Align and Distribute panel to align the flipped copy exactly opposite the original.
Related guides
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