HTML5 그래픽 SVG(Scalable Vector Graphics)
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 1.0 (2001/09/04)
- SVG 1.1 (2003/01/14)
- SVG 1.1 2nd Edition (2011/08/16)
지원하는 주요 웹 브라우저
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차 베지어 곡선
3차 베지어 곡선
애니메이션 - 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>
링크 - link
링크는 아래와 같이 설정한다.
<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>