HTML5 SVG로 다각형(Polygon) 그리는 방법 완벽 정리

SVG(Scalable Vector Graphics, 확장 가능한 벡터 그래픽)는 XML을 기반으로 2D 그래픽과 그래픽 애플리케이션을 표현하는 언어입니다. 작성된 XML은 SVG 뷰어를 통해 화면에 렌더링되며, 대부분의 최신 웹 브라우저는 PNG, GIF, JPG 이미지를 표시하듯 SVG도 문제없이 지원합니다.

SVG 다각형의 기본 개념

HTML5 SVG에서 다각형을 그리려면 <polygon> 요소를 사용합니다. 이 요소는 최소 세 개 이상의 변을 가진 도형을 생성하며, points 속성에 각 꼭짓점의 x, y 좌표를 순서대로 나열해 다각형의 형태를 정의합니다.

좌표는 'x,y' 형식으로 작성하고, 각 점 사이는 공백으로 구분합니다. 첫 번째 점과 마지막 점은 자동으로 연결되어 닫힌 도형이 만들어집니다.

예제 코드

아래 코드를 실행하면 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 Polygon</title>
    </head>

    <body>
        <h2>HTML5 SVG Polygon</h2>
        <svg id="svgelem" width="300" height="300" xmlns="https://www.w3.org/2000/svg">
            <polygon points="100, 20 200,180 100,200" style="fill:green;" />
        </svg>
    </body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 초록색으로 채워진 삼각형이 화면에 출력됩니다. points 속성에 정의된 세 좌표 (100,20), (200,180), (100,200)가 연결되어 하나의 삼각형을 이루는 것을 볼 수 있습니다.

주요 포인트 정리

<polygon> 요소: 세 개 이상의 변을 가진 다각형을 생성하는 SVG 기본 도형 요소
points 속성: 다각형의 각 꼭짓점 좌표(x,y)를 공백으로 구분하여 나열
자동 닫힘: 시작점과 끝점이 자동으로 연결되어 닫힌 도형 완성
스타일링: fill, stroke 등 CSS 속성으로 색상과 테두리 자유롭게 지정 가능