SVG(Scalable Vector Graphics)는 XML 기반으로 2D 그래픽과 그래픽 애플리케이션을 기술하기 위한 언어입니다. 작성된 XML 코드는 SVG 뷰어를 통해 화면에 렌더링되며, 대부분의 웹 브라우저는 PNG, GIF, JPG 이미지를 표시하듯 SVG 역시 별도의 플러그인 없이 바로 렌더링할 수 있습니다.
HTML5 SVG에서 사각형을 그리려면 <rect> 요소를 사용합니다. 좌표(x, y), 크기(width, height), 채우기 색상(fill) 등의 속성을 조합하면 원하는 형태의 사각형을 간단하게 만들 수 있습니다.
예제
다음 코드를 실행하면 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>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>
실행 결과
위 코드를 브라우저에서 열면 아래와 같이 초록색으로 채워진 200×100 크기의 사각형이 화면에 표시됩니다.
<rect> 요소의 주요 속성
- x, y: 사각형의 시작 위치를 지정하는 좌표값 (기본값은 0)
- width, height: 사각형의 너비와 높이
- fill: 사각형 내부를 채우는 색상 (색상 이름, HEX 코드 등 사용 가능)
- rx, ry: 모서리를 둥글게 처리하는 반지름 값으로, 지정하면 둥근 사각형을 만들 수 있음