SVG 컨테이너 요소

<g> 요소

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

<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> 요소들을 그룹 처리

<use> 요소

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

<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> 요소를 재사용

<defs> 요소

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

#cherry-three-group 그래픽 선언 요소를 참조하여 재사용

<symbol> 요소

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

<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 심볼 요소

<svg> 요소

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

<svg id="root-svg">

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

</svg>