SVG(Scalable Vector Graphics, 확장 가능한 벡터 그래픽)는 XML 형식으로 2D 그래픽과 그래픽 애플리케이션을 기술하기 위한 언어로, 작성된 XML은 SVG 뷰어를 통해 화면에 렌더링됩니다. 대부분의 웹 브라우저는 PNG, GIF, JPG 이미지를 표시하듯이 SVG 역시 별도의 플러그인 없이 바로 표시할 수 있습니다.
HTML5 SVG에서 원을 그리려면 <circle> 요소를 사용합니다. 이 요소는 몇 가지 속성만으로 원의 위치, 크기, 색상을 자유롭게 제어할 수 있어 매우 간편합니다.
예제
아래 코드를 실행하면 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 Circle</title>
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
<circle id="greencircle" cx="60" cy="60" r="50" fill="green" />
</svg>
</body>
</html>실행 결과
코드를 실행하면 초록색으로 채워진 원이 화면에 나타납니다. 여기서 핵심은 <circle> 요소가 사용하는 주요 속성들을 이해하는 것입니다.
circle 요소의 주요 속성
- cx: 원의 중심 x 좌표를 지정합니다.
- cy: 원의 중심 y 좌표를 지정합니다.
- r: 원의 반지름을 지정합니다.
- fill: 원의 내부를 채울 색상을 지정합니다.
예제에서는 cx="60" cy="60"으로 원의 중심을 정하고, r="50"으로 반지름을 설정한 뒤 fill="green"으로 초록색을 적용했습니다. 이 값들을 변경해 보면서 원의 위치와 크기, 색상이 어떻게 달라지는지 실험해 보면 SVG 좌표 체계를 더욱 쉽게 익힐 수 있습니다.