Group Transform

Grouped shapes share a translation, then another group uses translation and rotation to place a second badge.

Program

The g element groups SVG children without drawing anything itself. A transform on the group changes the coordinate system for every child inside it.

group_transform.html

<svg class="demo-svg" viewBox="0 0 360 220" role="img" aria-label="Group transform">
  <rect width="360" height="220" fill="#f8fafc" />
  <g transform="translate(62 38)">
    <rect width="132" height="78" rx="10" fill="#dbeafe" />
    <circle cx="104" cy="28" r="18" fill="#1d4ed8" />
  </g>
  <g transform="translate(184 108) rotate(-8)">
    <rect width="118" height="58" rx="8" fill="#fde68a" stroke="#b45309" stroke-width="4" />
  </g>
</svg>

g element The g element groups SVG children so attributes can apply to them together.

transform A transform changes the coordinate system used to draw an element.