[HTML] SVG 사용하기 (폰트 적용 / 직접 그리기)

1. SVG 파일 첨부

https://icomoon.io/app/#/select 에서 Generate Font를 사용하여 svg파일을 폰트로 변경하면,

fontawesome에서 제공하는 아이콘처럼 <i> 태그로 첨부할 수 있다.

 

2. SVG 직접 그리기

(1) 기본 도형 태그

• <rect> : 사각형
• <circle> : 원
• <ellipse> :  타원
• <line> : 선
• <polyline> : 다각형 (자동닫힘 x)
• <polygon> : 다각형 (자동닫힘 o)

See the Pen Untitled by Seonu (@parkseonup) on CodePen.

(2) Path 태그

• <path> : 일러스트레이터 펜툴과 유사한 그리기
• 속성 d="" 선언시 드로잉 시작

See the Pen Untitled by Seonu (@parkseonup) on CodePen.