SVG <symbol> 요소

SVG <symbol> 요소는 반복 사용 가능한 심볼을 정의하는 데 사용됩니다. <use> 요소가 참조하지 않으면 <symbol> 내에 포함된 모양은 표시되지 않습니다.

symbol 요소는 그래픽 템플릿 객체를 정의하는 데 사용되며, <use> 요소를 통해 예제화될 수 있습니다. symbol 요소는 그래픽에 대한 역할은 동일한 문서에서 여러 번 사용하여 구조와 의미를 추가하는 것입니다. 구조가 풍부한 문서는 더 생동감 있게 표현될 수 있으며, 발표 자료나 브라일 글자와 같이 접근성을 향상시킬 수 있습니다. 주의할 것은 symbol 요소 자체는 표시되지 않는다는 것입니다. symbol을 참조하는 <use> 요소(즉, symbol을 참조하는 요소)만이 표시됩니다.

심볼 예제

이것은 간단한 심볼 symbol 예제입니다：

<svg width="500"　height="100">
　　　　<symbol　id="shape2">
　　　　　　　　<circle　cx="25"　cy="25"　r="25"　/>
　　　　</symbol>
　　　　<use　xlink:href="#shape2"　x="50"　y="25"　/>
</svg>

<symbol> 요소는 <use> 요소가 참조할 수 있도록 id가 필요합니다.

reserveAspectRatio와 viewBox

<symbol> 요소는 prepareAspectRatio와 viewBox 속성을 가질 수 있습니다. 　<g>는 이 두 속성을 가질 수 없습니다. 따라서 <defs> 요소 내에서 <g> 요소를 사용하는 것보다, <symbol> 요소가 형상을 재사용하는 더 나은 방법일 수 있습니다.