<symbol>
<symbol>
요소는 템플릿 객체를 정의하는데 사용됩니다. 다수의 <symbol>
을 <use>
요소로 인스턴스화 할 수 있습니다. <symbol>
은 너비와 높이를 바꿀 수 없습니다. viewbox
를 작성하면 속성을 변경 할 수 있습니다.
위 코드와 같이 <symbol>
태그안에 있는 요소들은 랜더링 되지 않았고 <use>
태그를 통해 참조하여 1개의 도형만 작성되었습니다. <use>
태그에서 width
와 height
를 지정하게 되면 참조된 <symbol>
태그의 크기는 변하지 않고 크기를 유지하게 됩니다. 따라서 <symbol>
태그에서 선언한 도형보다 작게 되면 위 예제와 같이 짤리게 됩니다.
위 코드와 같이 <symbol>
태그에서 viewbox
를 지정하게 되면 <use>
태그에서 지정한 width
와 height
의 비율만큼 맞춰지게 됩니다.