<g> 요소는 그룹화하기 위한 컨테이너 요소입니다. 이 요소 내부에 <title>, <desc> 요소를 사용하면 그룹화 된 요소에 접근 가능한 정보를 제공할 수 있습니다. 또한 관련 요소를 그룹화하여 그룹 전체를 개별 부분과 비교하여 조작 할 수 있습니다. 애니메이션을 그룹에 적용 할 수 있기 때문에 이러한 요소를 애니메이션화 할 때 특히 유용합니다. <g> 요소에 포함되지 않은 요소는 자체 그룹 요소로 간주 됩니다.
<use>요소는 문서 전반에 걸쳐 요소를 재사용 할 수 있습니다. x, y, width, height 속성을 사용해 설정이 가능하며, xlink:href 속성을 사용해 재사용 할 요소를 호출(식별자 ID 참조) 할 수 있습니다. 요소를 재사용 함으로서 제작 시간을 아낄 수 있고, 코드를 최소화 할 수 있습니다.
<defs>요소 내에 선언된 그래픽은 SVG 뷰포트에 렌더링 되지 않습니다. 화면에 렌더링 하려면 <use> 요소를 통해 참조를 해야 합니다. 사용 방법은 앞서 다운 <use> 요소와 동일합니다. <defs> 내부에 선언된 그래픽 요소의 id 속성을 <use> 요소의 xlink:href 속성을 통해 참조하여 문서 전체에서 사용할 수 있습니다 .
<svg width="512" height="512" viewBox="0 0 512 512">
<!-- 그래픽 정의 defs -->
<defs>
<!-- 체리 그래픽 3개를 묶은 그룹 요소 선언 -->
<g id="cherry-tree-group">
<g id="fruit-cherry" transform="translate(0 100) scale(0.3)">...</g>
<use xlink:href="#fruit-cherry" x="50" y="100" />
<use xlink:href="#fruit-cherry" x="150" />
</g>
</defs>
<!-- defs 내부에 선언된 체리 그래픽 3개 그룹 재사용 -->
<use xlink:href="#cherry-tree-group" />
<use xlink:href="#cherry-tree-group" x="200" y="100" />
</svg>
<symbol> 요소
<symbol>요소는 <g> 요소와 비슷합니다. 하지만 화면에 렌더링 되지 않는다는 점이 차이점입니다. 마찬가지로 <use> 요소를 사용해 재사용 할 수 있습니다. <defs>, <g> 요소와 달리 viewBox, preserveAspectRatio 속성을 설정할 수 있습니다.
