HTML5에서 SVG로 도형 그리기 – 사각형 예제와 기본 사용법

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

HTML5에서 SVG로 그릴 수 있는 도형

HTML5에서는 SVG를 활용해 원(circle), 사각형(rectangle), 선(line), 타원(ellipse), 다각형(polygon) 등 다양한 도형을 간단하게 그릴 수 있습니다. 각 도형은 전용 태그를 사용하며, 속성을 통해 크기·색상·위치 등을 자유롭게 지정할 수 있습니다.

<rect> : 사각형
<circle> : 원
<line> : 직선
<ellipse> : 타원
<polygon>, <polyline> : 다각형 및 다중 선

예제: SVG로 사각형 그리기

아래 코드는 HTML5 문서 안에서 <rect> 요소를 사용해 초록색 사각형을 그리는 예제입니다. <svg> 태그로 캔버스 영역을 정의하고, 그 안에 <rect> 태그로 도형을 배치합니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 10%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
   </head>
   <body>
      <h2>HTML5 SVG Rectangle</h2>
      <svg id="svgelem" width="300" height="200" xmlns="https://www.w3.org/2000/svg">
         <rect width="200" height="100" fill="green"/>
      </svg>
   </body>
</html>

코드 설명

width="300" height="200" : SVG 캔버스의 가로·세로 크기를 지정합니다.
xmlns : SVG 네임스페이스를 선언하여 브라우저가 이 요소를 SVG로 인식하도록 합니다.
<rect width="200" height="100" fill="green"/> : 가로 200px, 세로 100px 크기의 사각형을 초록색(green)으로 채워 그립니다.

실행 결과

위 코드를 브라우저에서 실행하면 페이지에 초록색 사각형이 출력됩니다. fill 속성 값을 변경하면 색상을, width·height 값을 조정하면 도형의 크기를 손쉽게 바꿀 수 있습니다.