HTML5 그래픽 SVG(Scalable Vector Graphics)

웹에서 자주 사용되는 SVG 이미지 형식에 대해 설명한다.

SVG 요소

svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안이다.
기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었다.

하지만, svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해준다.
따라서 이 요소는 도표나 그래프 등 벡터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적이다.

  • 내용은 XML 기반 텍스트 파일이다.
  • GIF , PNG , JPEG 가 비트맵 형식이 것에 비해, SVG는 좌표 정보에 의한 벡터 형식의 데이터이다.
  • 극도로 확대하거나 Retina 등의 고해상도 디스플레이로 표시해도 비트맵 데이터에 보이는 듯한 픽셀이 눈에 띄지 않는다.
  • <img> 태그로 표시하는 것 외에, HTML 파일내에 직접 기술하는 것도 가능하다.
  • 해상도에 맞추어, 스마트폰용, 고해상도용의 화상 파일을 각각 준비할 필요는 없다.
  • 직선이나 곡선을 조합하여 묘화하는 화상을 향하고 있다. 사진 데이터에는 적합하지 않는다.
  • 투과나 애니메이션에도 사용 가능하다.
  • 기본적으로는 텍스트 데이터이지만, gzip 로 압축한 것도 이용 가능하다.
  • 확장자는 *.svg이고, gzip 압축한 것은 *.svgz이다.
  • MIME 타입은 image/svg+xml 이다.
  • JavaScript와 조합하는 것도 가능하다.
  • XML을 손으로 입력하는 것은 쉽지 않기 때문에 Illustrator 등의 드로우 소프트웨어로 그려 SVG 파일에 출력하는 경우가 많다.
  • 2001년에 W3C가 SVG 1.0을 권고하였고,2003년에 SVG 1.1, 2011년에 SVG 1.1 2nd Edition을 권고하였다.
  • 처음에는 Microsoft는 VML, Adobe는 PGML을 권장하였지만, 업계 표준으로 SVG에 정착되었다.

사양서

지원하는 주요 웹 브라우저

svg 요소를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

요소 ie Edge chrome firefox safari opera
svg 9.0 12 4.0 3.0 3.2 10.1

SVG 쓰기 방법

이미지 파일로 쓰는 방법

SVG는 일반 이미지 파일로 <img>, background-image 등으로 읽을 수 있다.

svg-sample.svg

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="60" fill="#ddd" />
  <polygon points="50 10, 70 30, 50 50, 30 30" fill="#99f" />
</svg>

SVG

HTML에 아래와 같이 하면 표시할 수 있다.

<img src="/images/svg/svg-sample.svg" width="100" height="60">    // 압축되지 않은 경우

SVGZ
혹은, 상기의 *.svg 파일을 gzip 압축해, 확장자를 *.svgz로 변경한 것을 읽어들일 수도 있다.

<img src="/images/svg/svg-sample.svgz" width="100" height="60">   // gzip 압축의 경우

표시

태그로 쓰는 방법

아래와 같이 HTML 안에 직접 장성할 수도 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG Test</title>
</head>
<body>
<svg x="0" y="0" width="100" height="60" style="background-color: #ddd">
  <polygon points="50 10, 70 30, 50 50, 30 30" fill="#99f" />
</svg>
</body>
</html>

Drawing

직선, 사각형, 다각형, 원, 타원, 경로, 애니메이션, 링크를 그리는 방법에 대해서 알아보자.

직선 - line

직선은 아래와 같이 형식으로 그린다.

<line x1= y1= x2= y2=값...>

선을 그리는데 사용하는 line 요소의 속성은 다음과 같다.

속성 설명
x1 선이 시작될 위치의 x좌표를 설정함.
y1 선이 시작될 위치의 y좌표를 설정함.
x2 선이 끝나는 위치의 x좌표를 설정함.
y2 선이 끝나는 위치의 y좌표를 설정함.

다음 예제는 line 요소를 사용하여 선을 그리는 예제이다.
SVG

<svg x="0px" y="0px" width="400px" height="40px" style="background: #ddd">
  <line x1="5" y1="20" x2="100" y2="20" stroke="orange" stroke-width="2"></line>
</svg>

표시

사각형 - Rect

사격형은 아래와 같이 형식으로 그린다.

<rect x= y= width= height=...>

x(왼쪽 위의 X), y(왼쪽 위의 Y), width(가로 폭), height(높이) 등을 지정한다.

사각형을 그리는데 사용하는 rect 요소의 속성은 다음과 같다.

속성 설명
width 도형의 너비를 설정함.
height 도형의 높이를 설정함.
stroke 도형의 테두리 색상을 설정함.
stroke-width 도형의 테두리 굵기를 설정함.
fill 도형을 채울 색상을 설정함.
opacity 도형의 투명도를 설정함.

다음 예제는 rect 요소를 사용하여 사각형을 그리는 예제이다.

예제 1.

<svg width="200" height="150">
    <rect width="200" height="150" stroke="orange" stroke-width="5" fill="yellow"/>
    이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
</svg>

예제 2.

<svg x="0px" y="0px" width="400px" height="40px" style="background: #ddd">
  <rect x="5" y="5" width="30" height="30" stroke="black" fill="#fff" stroke-width="2" />
</svg>

예제 3.
위와 같이 각각의 속성을 사용하여 설정할 수도 있으며, 다음 예제와 같이 style 속성을 사용하여 한 번에 설정할 수도 있다.

<svg width="200" height="150">
    <rect width="200" height="150" style="stroke:orange; stroke-width:5; fill:yellow; opacity:1;"/>
</svg>

둥근 사각형 - rect

rect 요소에 x, y, rx, ry 속성을 추가하여 모서리가 둥근 사각형을 그릴 수 있다.

모서리가 둥근 사각형을 그리는데 사용하는 rect 요소의 속성은 다음과 같다.

속성 설명
x 사각형의 왼쪽 위 꼭짓점의 x좌표를 설정함.
y 사각형의 왼쪽 위 꼭짓점의 y좌표를 설정함.
rx 사각형 모서리 굴곡의 x축 반지름을 설정함.
ry 사각형 모서리 굴곡의 y축 반지름을 설정함.

예제

<svg width="250" height="200">
    <rect width="200" height="150" x="20" y="20" rx="20" ry="20"
        stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

원 - circle

원을 그리는데 사용하는 circle 요소의 속성은 다음과 같다.

속성 설명
cx 원의 중심 x좌표를 설정함.
cy 원의 중심 y좌표를 설정함.
r 원의 반지름을 설정함.

다음 예제는 circle 요소를 사용하여 원을 그리는 예제이다.

예제

<svg width="300" height="300">
    <circle cx="150" cy="120" r="100" stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

타원 - ellipse

타원을 그리는데 사용하는 ellipse 요소의 속성은 다음과 같다.

속성 설명
cx 타원 중심의 x좌표를 설정함.
cy 타원 중심의 y좌표를 설정함.
rx 타원의 x축 반지름을 설정함.
ry 타원의 y축 반지름을 설정함.

다음 예제는 ellipse 요소를 사용하여 타원을 그리는 예제이다.

예제

<svg width="300" height="200">
    <ellipse cx="150" cy="100" rx="120" ry="70" stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

다각형 - polygon

다격형은 그리는 형식은 아래와 같다.

<polygon points=...>

다각형을 그리는데 사용하는 polygon 요소의 속성은 다음과 같다.

속성 설명
points 다각형의 각 꼭짓점이 표시될 위치의 좌표를 설정함.

points 속성은 다각형을 이루는 각 꼭짓점의 x좌표와 y좌표를 명시한다. 즉, x1 y1, x2 y2, x3 y3,… 와 같이 꼭짓점을 지정한다. 이때 첫 번째 꼭짓점부터 시작하여 마지막 꼭짓점까지 차례대로 선으로 연결되어 다각형을 표현하게 된다. 꼭짓점의 끝은 시작점을 향해 닫힌다.

다음 예제는 polygon 요소를 사용하여 별모양의 다각형을 그리는 예제이다.

예제 1.

<svg x="0px" y="0px" width="400px" height="40px" style="background: #ddd">
   <polygon points="5 20, 20 5, 35 20, 20 35" stroke="black" fill="#fff" stroke-width="2" />
</svg>

 

예제 2.

<svg width="200" height="180" style="background: #ddd">
    <polygon points="10,70 190,70 30,170 100,10 170,170"
       stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

원 - Circle

원은 아래와 같이 형식으로 그린다.

<circle cx= cy= r= ...>

cx(중심점의 X), cy(중심점의 Y), r(반경) 등을 지정한다.

예제

<svg x="0px" y="0px" width="400px" height="40px" style="background: #ddd">
   <circle cx="20" cy="20" r="15" stroke="black" fill="#fff" stroke-width="2" />
</svg>

타원 - Ellipse

타원은 아래와 같이 형식으로 그린다.

<ellipse cx= cy= rx= ry= ...>

cx(중심점의 X), cy(중심점의 Y), rx(X축 방향의 반경), ry(Y축 방향의 반경) 등을 지정한다.

예제

<svg x="0px" y="0px" width="400px" height="40px" style="background: #ddd">
   <ellipse cx="20" cy="20" rx="15" ry="8" stroke="black" fill="#fff" stroke-width="2" />
</svg>

경로 - Path

경로는 아래와 같이 형식으로 그린다.

<path d= ...>

d 에는, 패스 묘화의 명령을 기술합니다. M 5 20 은 x=5, y=20 으로 이동하라(Move to), L 20 5 는 x=20 y=5 에 선을 그려(Line to)를 의미한다.

  • Move to
    • M ( x y )+ : x, y로 이동
  • Lineto
    • L ( x y )+ : x, y에 선 그리기
  • Horizontal lineto
    • H ( x )+ : 수평 방향으로 선 그리기
  • Vertical lineto
    • V ( y )+ : 수직으로 선을 그립니다
  • Shorhand/smooth curveto
    • S ( x1 y1 x y )+ : 제어점(x1, y1), 종점(x, y)으로 하는 2차 베지어 곡선
  • Curveto
    • C ( x1 y1 x2 y2 x y )+ : 제어점 1(x1, y1), 제어점 2(x2, y2), 종점(x, y)으로 하는 3차 베지어 곡선
  • Closepath
    • Z : 경로 닫기

예제

<svg x="0px" y="0px" width="400px" height="40px" style="background: #ddd">
   <path d="M 5 20 L 20 5 L 35 20 L 20 20" stroke="black" fill="transparent" stroke-width="2" />
</svg>

2차 베지어 곡선
(Start) (x, y) (x1, y1)

3차 베지어 곡선
(Start) (x, y) (x1, y1) (x2, y2)

애니메이션 - animate

애니메이션을 수행하는 방법은 아래와 같다.

<animate...>

attributeName으로 지정된 속성을 from에서 to 값까지 dur로 지정된 시간으로 변경한다. repeatCount는 횟수를 지정한다.

예제

<svg x="0px" y="0px" width="400px" height="40px" style="background-color:#ddd">
  <rect x="5" y="5" width="30" height="30" stroke="black" fill="#fff" stroke-width="2">
    <animate attributeName="x" from="-30" to="400" dur="4s" repeatCount="indefinite" />
  </rect>
</svg>

링크는 아래와 같이 설정한다.

<a xlink:href="...">

HTML의 <a>와 마찬가지로 클릭하면 URL로 이동한다.

예제

<svg x="0px" y="0px" width="400px" height="60px" style="background-color:#ddd">
  <a xlink:href="https://www.devkuma.com">
    <polygon id="logomark-polyline" fill-rule="evenodd" clip-rule="evenodd"
      fill="#99f" points="200 10, 220 30, 200 50, 180 30"/>
  </a>
</svg>