# SVG 컨테이너 요소

### <**g> 요소**

`<g>` 요소는 그룹화하기 위한 컨테이너 요소입니다. 이 요소 내부에 `<title>`, `<desc>` 요소를 사용하면 그룹화 된 요소에 접근 가능한 정보를 제공할 수 있습니다. 또한 관련 요소를 그룹화하여 그룹 전체를 개별 부분과 비교하여 조작 할 수 있습니다. 애니메이션을 그룹에 적용 할 수 있기 때문에 이러한 요소를 애니메이션화 할 때 특히 유용합니다. \<g> 요소에 포함되지 않은 요소는 자체 그룹 요소로 간주 됩니다.

```markup
<svg width="512" height="512" viewBox="0 0 512 512">
  
  <!-- 그룹 요소 -->
  <g id="fruit-cherry">
    <g id="stems-leaf">
      <path class="stems" fill="none" stroke="#7AA20D" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" d="M54.817,169.848c0,0,77.943-73.477,82.528-104.043c4.585-30.566,46.364,91.186,27.512,121.498" />
      <path class="leaf" fill="#7AA20D" stroke="#7AA20D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M134.747,62.926c-1.342-6.078,0.404-12.924,5.762-19.681c11.179-14.098,23.582-17.539,40.795-17.846 c0.007,0,22.115-0.396,26.714-20.031c-2.859,12.205-5.58,24.168-9.774,36.045c-6.817,19.301-22.399,48.527-47.631,38.028 C141.823,75.784,136.277,69.855,134.747,62.926z" />
    </g>
    <g id="cherrys">
      <path class="r-cherry" fill="#ED6E46" stroke="#ED6E46" stroke-width="12" d="M164.836,193.136 c1.754-0.12,3.609-0.485,5.649-1.148c8.512-2.768,21.185-6.985,28.181,3.152c15.076,21.845,5.764,55.876-18.387,66.523 c-27.61,12.172-58.962-16.947-56.383-45.005c1.266-13.779,8.163-35.95,26.136-27.478   C155.46,191.738,159.715,193.485,164.836,193.136z" />
      <path class="l-cherry" fill="#ED6E46" stroke="#ED6E46" stroke-width="12" d="M55.99,176.859 c1.736,0.273,3.626,0.328,5.763,0.135c8.914-0.809,22.207-2.108,26.778,9.329c9.851,24.647-6.784,55.761-32.696,60.78 c-29.623,5.739-53.728-29.614-44.985-56.399c4.294-13.154,15.94-33.241,31.584-20.99C47.158,173.415,50.919,176.062,55.99,176.859z" />
    </g>
  </g>
  
</svg>
```

![\<g> 요소를 사용해 \<circle> 요소들을 그룹 처리](/files/-LEPN0KEagdEY9VFQ2xD)

### \<use> 요소

`<use>`요소는 문서 전반에 걸쳐 요소를 재사용 할 수 있습니다. `x`, `y`, `width`, `height` 속성을 사용해 설정이 가능하며, `xlink:href` 속성을 사용해 재사용 할 요소를 호출(식별자 ID 참조) 할 수 있습니다. 요소를 재사용 함으로서 제작 시간을 아낄 수 있고, 코드를 최소화 할 수 있습니다.

```markup
<svg width="512" height="512" viewBox="0 0 512 512">
  
  <g id="fruit-cherry" transform="translate(0 100) scale(0.45)">
    <g id="stems-leaf">...</g>
    <g id="cherrys">...</g>
  </g>
  
  <!-- 재사용 요소 -->
  <use xlink:href="#fruit-cherry" x="50" y="100" />
  <use xlink:href="#fruit-cherry" x="150" />
  
</svg>
```

![\<use> 요소를 사용해 \<g> 요소를 재사용](/files/-LEPNmevRFMCcj0pBG6V)

### \<defs> 요소

`<defs>`요소 내에 선언된 그래픽은 SVG 뷰포트에 렌더링 되지 않습니다. 화면에 렌더링 하려면 `<use>` 요소를 통해 참조를 해야 합니다. 사용 방법은 앞서 다운 `<use>` 요소와 동일합니다. `<defs>` 내부에 선언된 그래픽 요소의 `id` 속성을 `<use>` 요소의 `xlink:href` 속성을 통해 참조하여 문서 전체에서 사용할 수 있습니다 .

```markup
<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>
```

![#cherry-three-group 그래픽 선언 요소를 참조하여 재사용](/files/-LEP_NTVJ4F-A-ctO40h)

### \<symbol> 요소

`<symbol>`요소는 `<g>` 요소와 비슷합니다. 하지만 화면에 렌더링 되지 않는다는 점이 차이점입니다. 마찬가지로 `<use>` 요소를 사용해 재사용 할 수 있습니다. `<defs>`, `<g>` 요소와 달리 `viewBox`, `preserveAspectRatio` 속성을 설정할 수 있습니다.

```markup
<svg width="512" height="512" viewBox="0 0 512 512">
  
  <!-- 심볼 요소 등록 -->
  <symbol id="cherry-tree-group" viewBox="0 0 200 512" preserveAspectRatio="xMaxYMid slice">
    <g id="fruit-cherry" transform="translate(0 100) scale(0.45)">...</g>
    <use xlink:href="#fruit-cherry" x="50" y="100" />
    <use xlink:href="#fruit-cherry" x="150" />
  </symbol>
  
  <!-- 심볼 재사용 -->
  <use xlink:href="#cherry-tree-group" />
  
</svg>
```

![viewBox, preserveAspectRatio 속성이 설정된 SVG 심볼 요소](/files/-LEPdBQWfa1nijr4wqaI)

### \<svg> 요소

`<svg>` 요소 내부에 `<svg>` 요소를 중첩할 수 있습니다.

```markup
<svg id="root-svg">

  <svg id="nested-svg" x="55" y="55">
    <!-- svg code -->
  </svg>

</svg>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-container-elements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.