Mirror an SVG Online: How to Flip Vector Artwork Without Breaking It

Mirroring an SVG means flipping the artwork horizontally (left to right) or vertically (top to bottom) so it renders as a reflection of the original. Because SVG describes shapes with coordinates rather than fixed pixels, a flip can be done without any loss of sharpness, as long as the content being flipped is actually vector. You can do it in a browser-based vector editor, in an online SVG code editor, or by adding a single transform to the file yourself. This article covers what each approach changes, how it affects favicon use, and what to check before relying on the result.

The short answer

To mirror an SVG online, open it in any browser-based tool that supports SVG import and offers a flip-horizontal or flip-vertical command, then export it as SVG again. If you prefer to work in the code, wrap the artwork in a group with a negative scale transform. Both methods produce the same visual result. The difference is whether the tool rewrites the path coordinates or leaves a transform attribute in place, which matters mainly for later editing, not for how the file displays.

No specific online tools, versions or feature lists were supplied as evidence for this article, so it does not name or compare particular services. The guidance below relies on how the SVG format itself works.

Mirroring by editing the SVG code

An SVG file usually declares a viewBox, which defines its internal coordinate area. A negative scale on its own flips the artwork around the origin, pushing it outside the visible area, so it is paired with a translate that moves it back into view. For a file whose viewBox starts at 0 0, the translate distance equals the viewBox width for a horizontal flip, or the height for a vertical flip.

<!-- Original: viewBox="0 0 100 100" -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <!-- Horizontal mirror -->
  <g transform="translate(100 0) scale(-1 1)">
    <!-- existing paths and shapes go here -->
  </g>
</svg>

<!-- Vertical mirror for the same viewBox -->
<g transform="translate(0 100) scale(1 -1)">
  <!-- existing paths and shapes go here -->
</g>

If the viewBox does not start at 0 0, for example viewBox="10 0 100 100", the horizontal translate becomes twice the minimum x value plus the width (in that case 120). Getting this wrong does not damage the artwork; it simply shifts it partly or fully out of view, which is quick to spot in a preview.

Wrapping everything in one group has a practical advantage: gradients, clip paths, masks and strokes inside the group are transformed together, so their relationships stay intact. Definitions placed outside the group, such as gradients that use absolute user-space coordinates, are worth checking in a preview after the change.

Mirroring with an online vector editor

Browser-based vector editors typically handle the translate calculation for you: you select the artwork, choose flip horizontal or flip vertical, and export. Depending on the tool, the exported file may contain a transform attribute like the one above, or the editor may recalculate every path coordinate so no transform remains. Both render identically. A file with baked-in coordinates is often cleaner for further editing; a file with a transform is easier to reverse.

Uploading a file to an online tool means sending it to that service. For unreleased brand artwork or client files, check whether the tool processes files locally in the browser or on a server, and whether that is acceptable under any confidentiality terms you work under.

Display-only flipping with CSS

On a web page, an SVG can be shown mirrored with a CSS rule such as transform: scaleX(-1) applied to the image or inline SVG element. This changes only how that page displays it; the file itself stays unchanged.

img.logo-mirrored {
  transform: scaleX(-1);
}

This approach does not work for favicons. The browser tab and bookmark icon are drawn by the browser interface, not by the page, so page CSS has no effect on them. A mirrored favicon needs a mirrored file.

Favicon-specific considerations

• Many favicon sets include raster fallbacks (PNG or ICO) alongside the SVG; mirroring only the SVG leaves the fallbacks unflipped, so browsers that use the fallback will show the original orientation.
• SVG favicons sometimes contain an embedded style block, for instance a dark-mode color adjustment; wrapping the shapes in a transformed group leaves such styles working, but confirm the selectors still match after editing.
• At favicon sizes, small asymmetries such as a highlight or a cut corner become more noticeable once flipped, so preview the result at actual tab size rather than only at large scale.
• Browsers can cache favicons aggressively, so an updated file may not appear immediately during testing.

Vector paths, embedded images and raster previews

The .svg extension does not guarantee the file contains editable vector paths. Some SVG files simply wrap an embedded PNG or JPEG inside an image element. Mirroring such a file still works visually, because the transform applies to the embedded image too, but the result is still a raster image: it will blur when scaled up and cannot be edited as shapes. To check, open the file in a text editor and look for path, circle, rect or polygon elements versus an image element with a long base64 data string.

Similarly, a thumbnail or preview shown by a download site is often a raster rendering, not the SVG itself. Confirm you are working with the actual SVG file before flipping.

Elements that do not survive a mirror gracefully

• Live text elements are mirrored along with everything else, so lettering becomes reversed and unreadable; if the logo includes a wordmark, you may need to mirror only the symbol and leave the text unflipped.
• Text converted to outlines behaves the same way, since it is just paths; reversing a wordmark usually requires separating it from the symbol.
• Directional effects inside the transformed group, such as drop-shadow offsets or lighting in filters, flip with the artwork, which may contradict lighting elsewhere in a design system.
• Arrows, hands, faces and other directional marks change meaning when reversed, which is a design decision rather than a technical one.

Permission to modify a logo

Being able to download an SVG logo does not mean you are permitted to alter it. Brand guidelines commonly prohibit flipping, rotating or distorting a mark, and trademark rights, artwork copyright and any font licenses involved apply independently of the file's availability. Mirroring your own or your client's artwork with approval is routine; mirroring a third-party logo for publication should be checked against that brand's usage terms.

Quick checklist

• Confirm the file contains vector shapes, not only an embedded raster image.
• Decide between horizontal and vertical mirroring, and whether any text should be excluded.
• Flip using an online editor or a group transform with the correct translate for the viewBox.
• Preview at full size and at favicon size.
• Regenerate any PNG or ICO fallbacks so all formats match.
• Verify you have permission to modify the artwork if it is not your own.