SVG(Scalable Vector Graphics)는 XML 형식으로 2D 그래픽과 그래픽 애플리케이션을 기술하는 마크업 언어입니다. 작성된 XML 코드는 SVG 뷰어를 통해 화면에 렌더링되며, 대부분의 최신 웹 브라우저는 PNG, GIF, JPG 이미지를 표시하듯 SVG도 별도의 플러그인 없이 바로 렌더링할 수 있습니다.
SVG 사각형의 기본: <rect> 요소
HTML SVG에서 사각형을 그리려면 <rect> 요소를 사용합니다. 여기에 모서리가 둥근 사각형을 만들고 싶다면 rx와 ry 속성을 함께 지정하면 됩니다.
- rx: 모서리의 가로 방향 곡률 반경을 설정합니다.
- ry: 모서리의 세로 방향 곡률 반경을 설정합니다.
두 값이 같으면 완전히 대칭인 둥근 모서리가 만들어지고, 값을 다르게 지정하면 타원형 곡선의 모서리도 표현할 수 있습니다. 값이 클수록 모서리가 더 많이 둥글어집니다.
예제 코드
아래 예제를 실행하면 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 x="50" y="20" rx="30" ry="30" width="150" height="150"
style="fill:blue;">
</rect>
</svg>
</body>
</html>코드 설명
위 예제에서 핵심 부분은 다음과 같습니다.
- x, y: 사각형이 그려질 시작 좌표를 지정합니다.
- width, height: 사각형의 너비와 높이를 각각 150px로 설정했습니다.
- rx="30", ry="30": 네 모서리를 반경 30px만큼 둥글게 처리합니다.
- style="fill:blue;": 사각형 내부를 파란색으로 채웁니다.
rx와 ry 값을 조절해 보면서 원하는 곡률의 둥근 사각형을 자유롭게 만들어 보세요. rx나 ry 중 하나만 지정하면 나머지 값이 동일하게 적용되므로, 정방형 둥근 모서리가 필요한 경우 하나의 속성만 써도 됩니다.