SVG(Scalable Vector Graphics)는 XML 형식으로 2D 그래픽과 그래픽 애플리케이션을 기술하는 언어입니다. 작성된 XML 코드는 SVG 뷰어를 통해 화면에 렌더링되며, 대부분의 웹 브라우저는 PNG, GIF, JPG 이미지를 표시하듯 SVG도 별도의 플러그인 없이 바로 표시할 수 있습니다.
HTML5 SVG에서 타원(ellipse)을 그리려면 <ellipse> 요소를 사용합니다. 이 요소는 중심 좌표(cx, cy)와 가로·세로 반지름(rx, ry) 속성을 통해 타원의 위치와 크기를 자유롭게 정의할 수 있으며, 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>HTML5 SVG Ellipse</title>
</head>
<body>
<h2>HTML5 SVG Ellipse</h2>
<svg id = "svgelem" width = "300" height = "200" xmlns = "https://www.w3.org/2000/svg">
<ellipse cx = "120" cy = "50" rx = "100" ry = "50" fill = "blue" />
</svg>
</body>
</html>위 코드에서 <ellipse> 요소는 중심을 (120, 50)으로 지정하고, 가로 반지름 100px, 세로 반지름 50px를 가진 파란색 타원을 그립니다. rx와 ry 값을 조절하면 원에 가까운 형태부터 납작한 타원까지 다양하게 표현할 수 있습니다.
실행 결과
