SVG(Scalable Vector Graphics)는 XML 형식으로 2D 그래픽과 그래픽 애플리케이션을 표현하기 위한 언어입니다. 작성된 XML 코드는 SVG 뷰어를 통해 화면에 렌더링되며, 대부분의 최신 웹 브라우저는 PNG, GIF, JPG 이미지를 표시하듯 SVG도 별도의 플러그인 없이 바로 렌더링할 수 있습니다.
HTML5 SVG에서 폴리라인 그리기
HTML5 SVG에서 폴리라인을 그리려면 <polyline> 요소를 사용합니다. 이 요소는 여러 개의 직선이 차례로 연결된 열린 도형을 만들 때 사용되며, points 속성에 각 꼭짓점의 x, y 좌표를 지정하면 됩니다.
points 속성에서는 각 좌표의 x값과 y값을 쉼표(,)로 구분하고, 서로 다른 좌표 쌍 사이는 공백으로 구분합니다. 예를 들어 "0,0 0,20 20,20"처럼 작성하면 세 개의 꼭짓점이 순서대로 선으로 연결됩니다.
예제
다음 코드를 실행하면 HTML5 SVG에서 폴리라인을 그리는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 20%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>HTML5 SVG Polyline</title>
</head>
<body>
<h2>HTML5 SVG Polyline</h2>
<svg id="svgelem" width="300" height="300" xmlns="https://www.w3.org/2000/svg">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
</svg>
</body>
</html>실행 결과
위 코드를 실행하면 빨간색으로 채워진 계단 모양의 폴리라인이 다음과 같이 화면에 표시됩니다.
