svg <defs>, <use>

svg로 작업을 하던 중 <defs>, <use> 태그가 보여 알아보았다.

<defs>

• 나중에 참조할 그래픽 요소 같은 것들을 담아놓는 공간

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

<use>

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

 

기본 사용법

See the Pen defs, use by pminsun (@pminsun) on CodePen.

곡선 따라 글쓰기

관련 정보를 찾던 중 defs를 활용하여 곡선 따라 글을 쓸 수 있어 따라 해보았다.

곡선을 path로 그려도 되고 일러스트레이터에서 그려 코드를 받아서 사용할 수 있다.

 

⭐ path에 텍스트를 어떻게 적용 방법

• <path>를 참조해서 텍스트를 그려야 하기 때문에, <defs></defs> 태그 안에 <path /> 태그를 옮긴다.
• <path /> id명 지정 후 <text></text> 안에 <textPath></textPath>를 넣은 후 <textPath></textPath> href="" 안에 ****<path /> id명과 동일한 값을 넣는다.

See the Pen 곡선따라글쓰기 by pminsun (@pminsun) on CodePen.

 

 

참고

<defs> - SVG: Scalable Vector Graphics | MDN

 

<use> - SVG: Scalable Vector Graphics | MDN

 

[에스비지] SVG -(10편)- 곡선따라 글 쓰기 (feat. defs, path, text, textPath, href, tspan)