HTML5 SVG로 별 모양 그리기: polygon 요소 활용법

SVG(Scalable Vector Graphics)는 XML 형식으로 2D 그래픽과 그래픽 애플리케이션을 기술하는 언어입니다. 작성된 XML은 SVG 뷰어를 통해 화면에 렌더링되며, 대부분의 웹 브라우저는 PNG, GIF, JPG 이미지를 표시하듯이 SVG도 손쉽게 렌더링할 수 있습니다.

SVG polygon 요소란?

HTML SVG에서 다각형을 그리려면 <polygon> 요소를 사용합니다. 이 요소는 최소 세 개의 변을 가진 도형을 생성하며, points 속성에 각 꼭짓점의 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 Star</title>
</head>
<body>
    <h2>HTML5 SVG Star</h2>
    <svg id="svgelem" width="300" height="300" xmlns="https://www.w3.org/2000/svg">
        <polygon points="100,10 40,180 190,60 10,60 160,180" fill="blue"/>
    </svg>
</body>
</html>

코드 설명

points 속성: "100,10 40,180 190,60 10,60 160,180"처럼 쉼표로 x, y 좌표를 묶고, 공백으로 각 점을 구분합니다. 브라우저는 이 점들을 순서대로 연결해 닫힌 다각형을 만듭니다.
fill 속성: 도형의 내부 색상을 지정합니다. 위 예제에서는 파란색(blue)으로 채워집니다.
width / height: SVG 캔버스의 크기를 결정합니다.

실행 결과

위 코드를 브라우저에서 열면 다섯 개의 좌표가 연결된 파란색 오각별이 화면에 표시됩니다. 좌표 값을 조정하면 별의 크기와 비율을 자유롭게 변경할 수 있으며, fill 속성을 바꿔 원하는 색상으로 채울 수도 있습니다.