SVG는 Scalable Vector Graphics(확장 가능한 벡터 그래픽)의 약자로, XML 형식으로 2D 그래픽과 그래픽 애플리케이션을 기술하는 언어입니다. 작성된 XML 코드는 SVG 뷰어를 통해 화면에 렌더링되며, 대부분의 웹 브라우저에서는 PNG, GIF, JPG 이미지와 마찬가지로 SVG 파일도 별도의 플러그인 없이 바로 표시할 수 있습니다.
HTML SVG에서 타원을 그리려면 <ellipse> 요소를 사용합니다. 이 요소는 중심 좌표(cx, cy)와 x축 반지름(rx), y축 반지름(ry) 속성을 받아 타원의 크기와 위치를 결정합니다.
타원을 서로 위에 겹쳐 그리고 싶다면 각 타원의 좌표와 크기를 적절하게 조정하면 됩니다. SVG에서는 먼저 선언된 요소가 아래에 깔리고, 나중에 선언된 요소가 그 위에 덮여 그려집니다. 따라서 겹침 효과를 만들고 싶다면 아래에 놓일 타원을 먼저, 위에 놓일 타원을 나중에 작성하면 됩니다.
예제
아래 코드를 실행하면 HTML5 SVG에서 초록색 타원 위에 노란색 타원이 겹쳐져 그려지는 모습을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 20%;
-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="500" height="200" xmlns="https://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:green" />
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:yellow" />
</svg>
</body>
</html>
실행 결과
위 코드를 실행하면 넓은 초록색 타원 안쪽 위쪽에 더 작은 노란색 타원이 자연스럽게 겹쳐진 형태가 화면에 나타납니다.
