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 1.0 (2001/09/04)
- SVG 1.1 (2003/01/14)
- SVG 1.1 2nd Edition (2011/08/16)
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차 베지어 곡선
3차 베지어 곡선
애니메이션 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>
표시
링크 link
링크는 아래와 같이 설정한다.
<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>
표시