Transforms reshape the coordinate grid an element sits in. Combine translate / rotate / scale / skew, flip the order, and see why a group <g> moves everything inside it at once.
Transforms apply right to left on the coordinate system. translate then rotate is a different result from rotate then translate. Flip the order and watch.
The faint square is the original position. Reorder and you'll see the lime square land somewhere else — same numbers, different grid history.
A <g transform> moves all its children together. Nest an inner <svg x y> and it sets up a fresh local origin — children inside use coordinates relative to it.
One transform on the group repositions the icon, the badge, and the label as a single unit — the foundation of reusable components.