svg 태그

SVG란?

벡터 그래픽을 표현하기 위한  XML 마크업 언어이다. 픽셀 단위로 이미지를 구성하는 png, jpg와는 다르게 벡터 기반으로 이미지를 표현할 수 있다. 벡터 기반이다 보니 이미지를 축소하거나 확대해도 이미지가 깨지지 않고, 용량이 작기 때문에 웹상에서 주로 사용하는 이미지 형식이다.  W3C에서 개발했으며 CSS, DOM, SMIL과 호환된다.

<SVG> 태그란?

웹상에서 벡터 이미지를 구현하기 위해 사용하는 마크업 태그이다. SVG 이미지를 구현하기 위해서는 <svg>태그로 시작하는데 width, height 속성을 사용하여 이미지의 가로와 세로 길이를 조절할 수 있다. HTML 상에 코드를 그대로 넣어줌으로 웹상에서 벡터 이미지를 구현할 수 있는데, 이 장점은 이미지를 따로 로드하지 않아도 된다는 것이다. 이미지 파일을 불러오게 되면 웹페이지가 열릴 때마다 http 요청을 해야하는데 svg로 넣게 되면 요청과 응답이 필요 없기 때문에 로딩되는 속도가 빠르다.

viewBox

viewBox 속성은 min-x, min-y, width, height를 순서대로 받는다.

• min-x, min-y: 왼쪽 위를 기준점으로 한 뷰박스의 좌표
• width, height: 가로, 세로 뷰박스 사이즈

version

SVG가 어떤 명세를 따르는지 표시

xmlns

XML 문서의 속성으로 namespace를 의미 (요소 간의 이름 충돌 방지)

• 브라우저에서 사용하는 경우 version, xmlns 속성은 필요 없음

<SVG> 태그에서 도형 그리기

 

원 - <circle> 태그

• cx : x  좌표
• cy : y 좌표
• r : 원의 반지름
• stroke : 선의 색상
• stroke-width : 선의 굵기
• fill : 원의 색상

See the Pen svg-circle by pminsun (@pminsun) on CodePen.

 

타원 - <ellipse> 태그

• cs속성 : 타원 중심의 x좌표 정의
• cy속성 : 타원 중심의 y좌표 정의
• rx 속성 : 수평 반경 정의
• ry 속성 : 수직 반경 정의

See the Pen svg-ellipse by pminsun (@pminsun) on CodePen.

 

사각형 - <rect> 태그

• x : x  좌표
• y : y  좌표
• width : 너비
• height : 높이
• opacity : 투명도
• fill-opacity : 사각형의 색상
• stroke-opacity : 선의 투명도
• rx / ry : 각 꼭짓점의 둥근 정도

See the Pen svg-rect by pminsun (@pminsun) on CodePen.

 

직선 - <polyline> 태그

• points : 직선 지점

See the Pen svg-polyline by pminsun (@pminsun) on CodePen.

 

선 - path태그

• 처음 M 으로 좌표를 잡음
• L (L은 line) 직선으로 x500 y100으로 그음
• H (H는 Horizontal) 수평으로 그음
• V (V는 Vertical) 세로 수직으로 그음
• Z 열려있던 패스가 마무리를 지으며 닫힌다.
• d 속성의 값으로 M 으로 시작하고 x좌표 y좌표를 적어 준다.
• 소문자는 상대 위치 값
• 대문자로 쓰이면, 절대 위치 값

곡선 그릴 시

• C는 시작점 좌표 x, y / 조정점(핸들러, 중간점) x, y 끝점 좌표 x, y
• Q는 시작위치를 생략하고 중간점(핸들러)과 끝점만 입력하면 됨

 

See the Pen path by pminsun (@pminsun) on CodePen.

 

참고

https://blog.naver.com/nicholasdw/222233249293

[에스비지] SVG (Scalable Vector Graphics) -(06편)- path(패스)로 그리기 (feat. M, L, Q, C, H, V, Z, A)