<g> 태그안에 transform 속성을 별도로 사용하는 이유?

<svg>
  <!-- 그룹화된 요소 -->
  <g transform="translate(0,0)">
    <!-- 중첩된 SVG -->
    <svg x="320" y="150">
      <path d="..." />
    </svg>
  </g>
</svg>

<svg>에 x와 y 좌표로 위치를 지정한다.

그렇다면 왜 다시 한 번 <g>태그로 감싸서 transform으로 설정을 해주는지 의문이 들었다.

✏️ 이유?

1. 드래그 후 원래 위치로 복귀하고 싶을 때, transform 속성만 초기화하면 된다.

   x, y 좌표로 위치를 관리하려면 따로 기억해야한다. (관리의 복잡성)

2. transform은 위치 뿐 아니라 회전, 스케일 조정, 기울이기 등 다양한 변형을 지원한다.

3. 상위의 <g> 태그에 transform을 적용하면 하위 태그들에 모두 적용 가능하다.

4. transform은 GPU 고속으로 처리하여 부드러운 애니메이션 효과를 구현할 수 있다. (퍼포먼스 향상)