SVG 태그에 대해서 알아보자!

SVG란?

SVG란   Scalable Vector Graphics로써, 벡터 그래픽을 표현하기 위한  XML 마크업 언어이다. 픽셀 단위로 이미지를 구성하는 png, jpg와는 다르게 벡터 기반으로 이미지를 표현할 수 있다.

 

벡터 기반이다 보니 이미지를 축소하거나 확대해도 이미지가 깨지지 않고, 용량이 작기 때문에 웹상에서 주로 사용하는 이미지 형식이다.  W3C에서 개발했으며 CSS, DOM, SMIL과 호환된다. 

 

<SVG> 태그란?

웹상에서 벡터 이미지를 구현하기 위해 사용하는 마크업 태그이다. SVG 이미지를 구현하기 위해서는 <svg>태그로 시작하는데 width, height 속성을 사용하여 이미지의 가로와 세로 길이를 조절할 수 있다.

 

HTML 상에 코드를 그대로 넣어줌으로 웹상에서 벡터 이미지를 구현할 수 있는데, 이 장점은 이미지를 따로 로드하지 않아도 된다는 것이다. 이미지 파일을 불러오게 되면 웹페이지가 열릴 때마다 http 요청을 해야하는데 svg로 넣게 되면 요청과 응답이 필요 없기 때문에 로딩되는 속도가 빠르다.

 

다만 이미지가 복잡할 경우 svg 코드가 길어지기 때문에 html 소스가 지저분해진다. 또한 캐싱이 불가능하므로 웹페이지가 열릴 때마다 svg 코드를 다시 읽어야한다. 

 

svg 태그로 원 그리기

svg로 시작한 다음 <circle> 태그를 이용하여 원을 그릴 수 있다. cx와 cy는 원의 중심으로부터 x와 y의 좌표를 정의하는 속성이며 r은 반지름을 정의하는 속성이다. 만약 cx, cy 속성 값이 없는 경우 기본 값은 0이다.

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

<svg>
  <circle cx="50" cy="50" r="40" stroke="red" stroke-width="3" fill="green" />
</svg>

 tip  원형이 아닌 타원을 그리고 싶을 때에는 <ellipse> 태그를 사용한다.

 

svg 태그로 사각형 그리기

직사각형을 그릴 때에는 <rect>를 사용한다. width와 height 너비와 높이를 지정한다. style 속성으로 css를 적용할 수 있다. 

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

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

 

svg 태그로 직선 그리기

직선을 그릴 때에는 <polyline> 태그를 사용한다.

<svg height="200" width="500">
    <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg>
<svg height="180" width="500">
    <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>