SVG Transform Origin: Where Rotation and Scaling Pivot in Vector Logos and Favicons

The short answer

In SVG, the origin point for transforms is the origin of the current user coordinate system: the point (0,0), which sits at the top-left of the coordinate space defined by the viewBox unless something has shifted it. When you rotate, scale or skew an SVG shape, it pivots around that point by default, not around its own center. This is the main way SVG differs from ordinary HTML elements, which transform around their center by default.

There are three main ways to change the pivot. You can pass a center point to the rotate() function in the transform attribute. You can use the CSS transform-origin property together with transform-box. Or you can wrap the transform in a translate pair yourself. Which method fits depends on whether the file is static artwork, such as a logo or favicon, or something styled and animated with CSS.

How the SVG coordinate system sets the origin

Every SVG drawing has a user coordinate system. The x axis runs to the right and the y axis runs downward, with (0,0) at the top-left. The viewBox attribute sets which region of that coordinate space is visible and how it maps to the rendered size. For example, a favicon with viewBox="0 0 32 32" has its origin at the top-left corner and its center at (16,16).

Transforms on an element are applied in that element's coordinate system. A group (g element) with its own transform creates a new coordinate system for its children, so the effective origin for a nested shape can sit somewhere other than the canvas corner. This is why the same rotate() value can produce different results depending on how the artwork is grouped.

Default behavior: rotating around the corner

In the example below, the rotate(45) function turns the square around (0,0) of the viewBox, not around the square's middle. As a result, the square swings out of position and may be partly clipped.

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <rect x="8" y="8" width="16" height="16" transform="rotate(45)" />
</svg>

Ways to set a different pivot

Pass a center point to rotate(). The SVG transform attribute accepts rotate(angle cx cy). The cx and cy values are a pivot point in user units. This method only works for rotation, but it is the most portable for static files because it does not depend on CSS support.

<rect x="8" y="8" width="16" height="16" transform="rotate(45 16 16)" />

Use a translate sandwich. To scale or skew around a chosen point, move the origin to that point, apply the transform, then move it back. In a transform list, read the functions as successive changes to the coordinate system from left to right. The result is the same as applying them to the shape from right to left.

<rect x="8" y="8" width="16" height="16"
      transform="translate(16 16) scale(1.5) translate(-16 -16)" />

Use CSS transform-origin with transform-box. For SVG elements, the initial transform-origin is 0 0. The transform-box property decides which reference box that origin is measured against:

• view-box: the default for most SVG elements. The origin is measured against the nearest SVG viewport's coordinate system.
• fill-box: the origin is measured against the element's own bounding box, without stroke. With this setting, transform-origin: center pivots around the shape's visual middle.
• stroke-box: like fill-box, but the bounding box includes the stroke.

<style>
  .mark {
    transform-box: fill-box;
    transform-origin: center;
  }
  .mark:hover { transform: rotate(45deg); }
</style>

SVG 2 also defines transform-origin as a presentation attribute that can be written directly on an element. Support and exact behavior have varied between browsers and editors. Check current compatibility documentation before relying on it in a delivered file; this article does not include tested support data.

Comparison of the approaches

Approach | What it controls | Best suited to

rotate(angle cx cy) | Rotation pivot only, in user units | Static logo and favicon files

translate / transform / translate | Any transform around any point | Static files needing scale or skew around a point

CSS transform-origin with transform-box | Pivot relative to the viewport or the element's own box | CSS-styled or animated SVG in web pages

Baked path coordinates | No transform remains; geometry is already in place | Final delivery files where predictability matters most

Why this matters for logo and favicon files

Design tools differ in how they export rotated or scaled artwork. Some apply the transform directly to the path coordinates. Others leave a transform attribute on the element or group. Some keep a tool-specific rotation center in their own namespaced attributes, which browsers ignore. A mark that looks centered in the editor can therefore shift if the file is later edited by hand or animated with CSS. Before adding any new transform, open the exported markup and check whether transforms remain.

For favicons, the usual goal is a mark centered in a square viewBox. Baking transforms into the path data, or using rotate() with an explicit center, keeps the result independent of CSS behavior. If you plan an animated or interactive favicon, check current browser behavior first. Favicon rendering contexts may not support animation or interaction the way an inline SVG on a page does, and this article has no tested data on that.

Transforms move whatever the element contains, but they do not change what kind of content it is. An image element embedded inside an SVG is still raster data, so rotating or scaling it resamples pixels and can blur edges. Vector paths stay sharp. A file with an .svg extension is not proof of editable vector paths. It may wrap a bitmap, and a preview thumbnail is a raster rendering either way. Inspect the markup for path, shape or image elements before deciding how to transform it.

If the logo belongs to someone else, being able to download the file does not grant permission to modify the artwork, fonts or trademark. Rotating, rescaling or recentering the mark for a favicon is a modification, so confirm that the usage terms allow it.

Gaps in this assessment

No subject-specific evidence was supplied. This article does not include browser support tables, version numbers, test results or tool-by-tool export behavior. The explanations above rest on the general SVG and CSS Transforms model. Confirm current browser and editor behavior against up-to-date documentation, especially for the transform-origin presentation attribute and animated favicons.