How to Move a Group in SVG

To move a group in SVG, add or edit the transform attribute on its <g> element, for example transform="translate(4 2)". The group element has no x or y attributes of its own, so translation is the standard way to shift everything inside it at once. The paths, shapes, text and images in the group all move together, and their own coordinates stay the same.

This article looks at that technique in the context of SVG favicons and other small logo files. In those files a few units of movement are a large share of the canvas, and content pushed past the edge is cut off.

The direct method: translate on the group

A group is a <g> element that wraps other elements. Its transform applies to all of its children, so one attribute repositions the whole mark. The first value is the horizontal shift and the second is the vertical shift. Positive values move right and down, and negative values move left and up.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <g id="mark" transform="translate(2 -1)">
    <circle cx="16" cy="16" r="10" fill="#1a73e8"/>
    <path d="M11 16h10" stroke="#fff" stroke-width="3"/>
  </g>
</svg>

In this example the circle and the stroke move 2 units right and 1 unit up. Neither the cx and cy values nor the path data has been edited.

What the numbers mean

Translate values are measured in the user units of the parent coordinate system. For a group directly inside the root <svg>, the viewBox defines those units. With viewBox="0 0 32 32", translate(2 0) moves the group by one sixteenth of the icon's width, no matter what size the browser displays the favicon at. A group nested inside another transformed group moves in that parent's transformed coordinate space, which may be scaled or rotated.

When the group already has a transform

Editors often write a transform such as rotate, scale or matrix onto the group. Do not replace that value, because replacing it removes the existing effect. Add the translation to the list instead. A transform list is applied as if each entry were a nested wrapper, read from left to right. A translate placed first in the list therefore moves the group in the parent's coordinate system and is not affected by the rotation or scale after it.

<!-- before -->
<g transform="rotate(15 16 16)"> ... </g>

<!-- after: moved 3 units right in the parent's coordinates -->
<g transform="translate(3 0) rotate(15 16 16)"> ... </g>

If you place the translate at the end of the list, the movement happens inside the rotated or scaled space. The result is a different direction or distance than you might expect. If you would rather not edit the existing list, another option is to wrap the group in a new <g> that carries only the translate.

Other ways to move a group

Method | How it works | Practical note

transform attribute on <g> | translate(x y) shifts all children | The standard, portable approach

Wrapper <g> | A new parent group carries the translate | Keeps the original transform untouched

CSS transform | transform: translate(...) set in a stylesheet or style attribute | Overrides the transform attribute instead of adding to it, and only applies where the SVG's CSS is processed

<use> with x and y | Reuses a referenced group at an offset | Useful for repeated marks; the original stays in place

Changing the viewBox | Shifts the visible window | Moves everything in the file, not one group

The CSS override is easy to miss. If a stylesheet sets transform on the group, the attribute value no longer applies. Any rotation or scale in the attribute must be repeated in the CSS rule, or it will be lost.

Moving a group in a vector editor

Selecting a group and dragging it, or typing new X and Y values, in a vector editor produces the same visual result. How the file records the move depends on the editor and its settings. The editor either adds a transform to the group or rewrites the coordinates of the paths inside it. No tool-specific evidence was provided for this article, so check the exported markup if the structure matters. For example, a developer may need a clean group with an id for scripting or theming, or may want coordinates without transforms.

Favicon-specific checks after moving a group

• Keep the group inside the viewBox. Anything moved past the edge is clipped in the rendered icon.
• Check how the result looks at small sizes. A one-unit shift in a 32-unit viewBox is visible in a browser tab.
• To re-center the whole icon, editing the viewBox may be simpler than moving each group.
• If the file has several groups, such as a symbol and a background, moving one changes their alignment. Decide whether the whole artwork or only one element should move.

Vector paths versus embedded images

A file ending in .svg does not guarantee editable vector artwork. An SVG can contain an <image> element holding a PNG or JPEG, sometimes as the only visible content. Moving a group that contains such an image does shift it. However, the bitmap stays a bitmap: its edges will not stay sharp when scaled, and its shapes cannot be edited as paths. To tell the two apart, open the markup and look for <path>, <circle>, <rect> and similar elements versus an <image> element.

Permission to change the artwork

Moving a group is a technically simple edit, but it still changes the logo's composition. Being able to download a logo file does not by itself grant permission to modify its artwork, fonts or trademark. For a logo you do not own, confirm what the brand owner allows before you reposition elements.

Evidence gaps

No source material was supplied about a specific logo, editor version or browser test. The guidance here follows general SVG behavior. Results in a particular editor's export settings or in a particular browser's favicon handling should be confirmed directly.