SVG(Scalable Vector Graphics, 확장 가능한 벡터 그래픽)는 XML을 사용해 2D 그래픽과 그래픽 애플리케이션을 기술하는 언어입니다. 작성된 XML 코드는 SVG 뷰어를 통해 화면에 렌더링됩니다.
SVG는 파이 차트, X·Y 좌표계 기반의 2차원 그래프 등 벡터 형식의 다이어그램을 표현할 때 특히 유용합니다. 벡터 방식이기 때문에 확대하거나 축소해도 이미지 품질이 저하되지 않는다는 큰 장점이 있습니다.
HTML5에서 SVG 사용하기
HTML5에서 SVG를 사용하려면 <svg>...</svg> 태그를 이용해 SVG 코드를 문서에 직접 삽입하면 됩니다. 기본 문법은 다음과 같습니다.
문법
<svg xmlns="https://www.w3.org/2000/svg">
...
</svg>
주요 도형 요소
HTML5 SVG에서 다양한 도형을 그리려면 아래 요소들을 활용합니다.
<circle>— 원을 그립니다.<rect>— 사각형을 그립니다.<line>— 선을 그립니다.<ellipse>— 타원을 그립니다.<polygon>— 다각형을 그립니다.
또한 <img>, <iframe>, <object>, <embed> 태그를 사용하여 웹 페이지에 SVG를 추가하는 방법도 있습니다. 이번 글에서는 <svg> 태그를 이용해 SVG를 직접 삽입하는 방법을 살펴보겠습니다.
예제: HTML5 SVG로 원 그리기
아래 코드를 실행하면 HTML5에서 SVG를 다루는 방법을 직접 확인할 수 있습니다. 여기서는 초록색 원을 하나 그려보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 10%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>HTML5 SVG Circle</title>
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
<circle id="greencircle" cx="60" cy="60" r="50" fill="green" />
</svg>
</body>
</html>
이 예제에서 <circle> 요소의 cx, cy 속성은 원의 중심 좌표를, r 속성은 반지름을, fill 속성은 채우기 색상을 지정합니다. 이처럼 SVG 속성을 조합하면 별도의 이미지 파일 없이도 코드만으로 다양한 그래픽을 웹 페이지에 구현할 수 있습니다.