SVG(Scalable Vector Graphics)는 확장 가능한 벡터 그래픽을 의미하며, XML 형식으로 2D 그래픽과 그래픽 애플리케이션을 기술하기 위한 언어입니다. 작성된 XML 코드는 SVG 뷰어를 통해 화면에 렌더링됩니다.
SVG 기본 예제
먼저 HTML5에서 SVG 원을 그리는 간단한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id = "svgelem" height = "200" xmlns = "https://www.w3.org/2000/svg">
<circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
</svg>
</body>
</html>위 예제는 transform 속성과 left 값을 활용해 SVG 요소의 위치를 조정하는 방식입니다. 하지만 더 간단하고 확실하게 요소를 가운데 정렬하려면 아래와 같은 CSS를 적용할 수 있습니다.
CSS로 SVG 가운데 정렬하기
SVG 요소를 화면 중앙에 배치하려면 다음과 같이 CSS를 추가합니다.
#svgelem {
margin-left: auto;
margin-right: auto;
display: block;
}핵심은 display: block으로 설정해 SVG가 블록 레벨 요소처럼 동작하도록 만들고, 좌우 마진을 auto로 지정하는 것입니다. 이렇게 하면 브라우저가 남은 공간을 균등하게 분배하여 요소가 자동으로 수평 중앙에 정렬됩니다.
이 방법은 별도의 계산 없이 어떤 너비의 SVG 요소든 안정적으로 가운데 정렬할 수 있어, 반응형 웹 페이지에서도 널리 사용되는 표준적인 기법입니다.