SVG 이란?


개요

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

  • SVG은 Scalable Vector Graphics의 약어이다.
  • HTML을 표준화하고 있는 W3C가 채택하고 있다.
  • 내용은 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에 정착되었다.
  • Chrome 1.0, Firefox 1.5, IE9, Edge 12, Opera 8, Safari 3 이상에서 사용할 수 있다.

이 페이지에서는 SVG의 일부 기능만을 설명하므로 자세한 내용은 아래 사양 및 기타 참조를 하길 바란다.

사양서

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=...>

x1(시작점의 X 좌표), y1(시작점의 Y 좌표), x2(종료점의 X 좌표), y2(종료점의 Y 좌표) 등을 지정한다.

SVG

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

표시

사각형 - Rect

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

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

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

SVG

<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>

표시

다각형 - Polygon

다격형은 아래와 같이 그린다.

<polygon points=...>

posts 에는 x1 y1, x2 y2, x3 y3, … 와 같이 궤적 점을 지정합니다. 궤적의 끝은 시작점을 향해 닫힌다.

SVG

<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>

표시

원 - Circle

원은 아래와 같이 그린다.

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

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

SVG

<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

<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

<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

<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

<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>

표시