Rotate an SVG

To turn an SVG upside down, rotate its content 180 degrees around the center of the artwork, not around the default origin. Inside the file, that means a transform such as rotate(180 cx cy), where cx and cy are the center of the viewBox. On a web page, CSS transform: rotate(180deg) on the whole svg element does the same job visually. This article covers both methods, the pivot-point trap that makes rotated artwork vanish, and what changes when the SVG is a favicon or a logo file meant for delivery.

The short answer: rotate around the center

The SVG rotate transform takes an angle and an optional pivot point: rotate(angle) or rotate(angle cx cy). If you leave out the pivot, the rotation happens around the origin (0,0) of the current coordinate system, which is usually the top-left corner. A 180-degree turn around that corner swings the artwork up and to the left, outside the visible viewBox, so the image appears to disappear. Supplying the center point keeps the artwork in place and only flips its orientation.

For an icon with viewBox="0 0 100 100", the center is 50,50. Wrapping the artwork in a group with that rotation is the simplest edit:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <g transform="rotate(180 50 50)">
    <!-- original paths, shapes and text -->
  </g>
</svg>

If the viewBox does not start at 0,0, calculate the center as min-x plus half the width, and min-y plus half the height. For viewBox="10 20 200 100", the pivot is 110,70.

Equivalent ways to write a 180-degree turn

A half turn can be expressed several ways, and all produce the same result for a 100 by 100 viewBox starting at 0,0:

• rotate(180 50 50) rotates around the center directly.
• translate(100 100) rotate(180) rotates around the origin, then shifts the result back into view.
• translate(100 100) scale(-1 -1) mirrors both axes, which for 180 degrees is mathematically identical to a rotation.

Be careful not to confuse a 180-degree rotation with a single mirror. scale(-1 1) flips horizontally and scale(1 -1) flips vertically. Each of those produces a reversed, mirror-image version of the artwork, including backwards lettering. Only flipping both axes together equals turning it upside down.

Rotating with CSS instead of editing the file

When the SVG is placed inline in an HTML page or loaded through an img element, you can rotate the whole graphic with CSS. For an HTML-level element such as the svg tag or an img, the default transform origin is the element's center, so no extra settings are needed:

.logo-upside-down {
  transform: rotate(180deg);
}

Rotating an individual shape or group inside an inline SVG with CSS behaves differently. For SVG child elements, the transform origin defaults to the top-left of the viewBox rather than the element's own center, which recreates the disappearing-artwork problem. Setting the reference box and origin explicitly fixes it:

.icon-part {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(180deg);
}

CSS rotation only changes how the graphic is displayed in that page. The SVG file itself is untouched, so anyone who downloads it, or any context that ignores your stylesheet, sees the original orientation.

Why favicons need the rotation inside the file

An SVG favicon is loaded by the browser as a standalone image. The stylesheet of the page that references it does not reach into the icon, so a CSS rule cannot rotate a favicon. If the icon must appear rotated in a browser tab, the rotation has to be written into the SVG itself, either as a transform attribute or baked into the path coordinates.

Most sites also ship raster fallbacks alongside the SVG favicon, such as ICO or PNG files for browsers and platforms that do not use SVG icons. Rotating the SVG does nothing to those files. Each fallback needs to be regenerated from the rotated artwork, or users on different browsers and devices will see different orientations. Because favicon support and caching behavior differ between browsers, checking the result in the specific browsers you target is more reliable than assuming a single change propagates everywhere.

Transform attribute or rotated path data?

There are two ways a rotation can live inside an SVG file, and they matter for anyone receiving or editing the artwork later:

Approach | What the file contains | Practical effect

Transform attribute | Original coordinates plus a rotate instruction on an element or group | Easy to read and to undo by removing the attribute; the stored geometry is still the unrotated version

Applied to path data | Recalculated coordinates with no transform | Cleaner geometry for editing and export; reversing it requires another rotation rather than deleting one line

Vector editors and SVG optimizers can produce either form depending on the tool and its settings; some keep transforms as attributes, while others fold them into the coordinates on save or optimization. If a delivery spec requires one form, open the exported file in a text editor and confirm what was actually written rather than relying on the editor's on-screen preview.

Vector paths versus embedded images

A .svg extension does not guarantee the file contains vector artwork. Some SVGs simply wrap an embedded PNG or JPEG inside an image element. A rotate transform will still turn that embedded picture 180 degrees, but the content remains a raster image: it keeps its fixed resolution and will blur or pixelate when scaled, just as it did before rotation. To know what you are rotating, inspect the file's markup for path, shape and text elements versus an image element with embedded data. A small thumbnail or preview of a logo can also be a raster rendering even when the source file is true vector, so judge the file, not the preview.

Rotated text in logos

Logos often contain live text elements rather than outlined letterforms. A rotation applies to text just as it does to shapes, so the wordmark will read upside down, which is the expected result of a 180-degree turn. Live text still depends on the font being available where the SVG is rendered; if it is missing, a substitute font is used and the rotated wordmark may not match the original. Converting text to outlines before delivery avoids that, but it also removes the ability to edit the wording.

Permission to modify a logo

Being able to download a logo file, or to rotate it technically, is separate from being allowed to alter and publish it. Brand guidelines frequently restrict rotating, flipping or otherwise distorting a mark, and the artwork, any fonts it uses and the trademark itself may each carry their own terms. For a logo you do not own, check the owner's usage guidelines or obtain permission before shipping a rotated version, including as a favicon.

What this guide does not cover

No specific logo, editor version or browser test results were supplied for this article, so it describes general SVG and CSS behavior rather than measured outcomes. Exact menu names, export defaults and favicon handling vary by software and browser version; verify those against the tools you actually use.