SVG viewBox란? 아이콘 크기가 안 맞는 이유

아이콘 라이브러리에서 받은 SVG를 버튼에 넣고 크기를 키웠는데, 그림은 그대로거나 한쪽 귀퉁이만 확대되어 잘려 보인 적이 있을 겁니다. 이 현상은 CSS를 잘못 써서가 아니라 SVG 코드 안의 viewBox 값과 width·height 속성이 서로 다른 역할을 하기 때문에 생깁니다. viewBox의 네 숫자만 읽을 줄 알면 코드만 보고도 원인을 바로 찾을 수 있습니다.

요약 ① SVG의 크기는 화면에 보이는 width·height와, 도형 좌표를 담는 viewBox 두 가지로 따로 결정됩니다. ② viewBox가 없으면 브라우저는 width·height 값을 좌표 단위로 그대로 써서, 크기를 키워도 그림은 안 커지고 잘린 것처럼 보입니다. ③ viewBox의 네 숫자(minX minY width height)를 확인하면 잘림·여백·이동 중 어느 원인인지 구분됩니다.

문제 — 크기를 키웠는데 그림이 그대로인 이유

아이콘 세트에서 24×24 크기의 SVG 파일을 내려받아 버튼 안에 넣었다고 가정합니다. style="width:64px;height:64px"로 키웠는데 아이콘 모양은 커지지 않고, 왼쪽 위 한 귀퉁이만 확대된 것처럼 보이거나 오른쪽·아래쪽이 통째로 잘려 나갑니다.

반대로 그림 주변에 이유 없는 여백이 생기는 경우도 있습니다. 두 증상 모두 CSS를 다시 만져도 해결되지 않습니다. 원인이 CSS가 아니라 SVG 코드 내부에 있기 때문입니다.

원인 — width·height와 viewBox는 서로 다른 값입니다

SVG 태그에는 크기와 관련된 값이 두 군데에 나뉘어 있습니다. 하나는 width·height 속성(또는 CSS)으로, SVG가 화면에서 차지할 물리적인 크기를 정합니다. 다른 하나는 viewBox 속성으로, 그 안의 circle·rect·path 같은 도형이 어떤 좌표계 위에 그려지는지를 정합니다.

viewBox가 있으면 브라우저는 이 좌표계를 물리적 크기에 맞춰 자동으로 확대·축소합니다. 사진을 액자 크기에 맞춰 자동으로 리사이즈해 넣는 것과 비슷합니다. 그래서 width·height 값을 바꾸면 그림 전체가 비율대로 커지거나 작아집니다.

문제는 viewBox가 아예 없는 경우입니다. 이때 브라우저는 도형 좌표를 리사이즈해 줄 기준이 없어, width·height 속성값을 좌표 단위 그 자체로 씁니다. 그 상태에서 CSS로 물리적 크기만 키우면 캔버스(보이는 창)만 넓어지고, 그 안의 도형은 원래 좌표 그대로 남아 한쪽에 작게 몰려 있거나 잘린 것처럼 보입니다.

확인 방법 — 코드만 보고 알아내기

별도 도구 없이도 원인은 코드만 보면 구분됩니다.

1. SVG 코드를 열어 <svg ...> 태그를 찾습니다.
2. viewBox="..." 속성이 아예 없다면 그게 원인입니다. 기존 width·height 속성값을 그대로 가져와 viewBox="0 0 너비 높이" 형태로 추가하면 해결됩니다.
3. viewBox는 있는데 세 번째 숫자(너비)나 네 번째 숫자(높이)가 실제 도형 크기보다 작으면 그림 일부가 잘립니다.
4. viewBox의 앞 두 숫자(minX, minY)가 0이 아니면 그만큼 도형이 이동해 보입니다. 도형을 옮긴 게 아니라 보이는 영역(창)을 옮긴 것입니다.

저희 도구로 확인하기. 이 관계를 눈으로 확인하려면 SVG 코드를 붙여넣고 viewBox의 네 숫자를 하나씩 바꿔보면 됩니다. 결과가 실시간 미리보기에 바로 반영되므로, 어느 숫자가 잘림을 만들고 어느 숫자가 이동을 만드는지 직접 비교할 수 있습니다.

직접 해보기 →

자주 막히는 지점

정리

SVG 크기 문제는 대부분 viewBox 네 숫자 중 하나로 설명됩니다. width·height는 화면에 보이는 물리적 크기만 정하고, 도형이 그 안에서 어떻게 배치되는지는 viewBox가 정합니다.

두 값을 같은 것으로 착각하면 원인을 CSS에서만 찾다가 시간을 쓰게 됩니다. 코드에서 viewBox 유무와 네 숫자를 먼저 확인하는 습관을 들이면, 아이콘이 잘리거나 밀리는 문제 대부분을 빠르게 좁힐 수 있습니다.

자주 묻는 질문

viewBox 네 숫자는 각각 무슨 뜻인가요?

순서대로 minX, minY, width, height입니다. 앞의 두 숫자는 좌표계에서 보이는 영역이 시작되는 지점(왼쪽 위 기준점)이고, 뒤의 두 숫자는 그 지점부터 얼마나 넓은 영역을 보여줄지를 정합니다. 도형 자체의 좌표(circle의 cx·cy 등)는 이 값과 무관하게 고정돼 있고, viewBox는 그중 어느 부분을 어떤 배율로 잘라서 보여줄지만 결정합니다.

width·height 속성을 아예 지우고 viewBox만 남겨도 되나요?

네, 실제로 많은 아이콘 라이브러리가 이 방식을 씁니다. width·height 속성이 없으면 SVG는 부모 요소나 CSS가 지정하는 크기를 그대로 채우고, 도형 사이의 비율은 viewBox가 유지합니다. 반응형으로 아이콘 크기를 자유롭게 바꿔야 할 때 흔히 쓰는 구조입니다.

viewBox가 없는 SVG는 어떻게 고치나요?

가장 간단한 방법은 기존 width·height 속성값을 그대로 가져와 viewBox="0 0 width값 height값" 형태로 추가하는 것입니다. 예를 들어 width="24" height="24"였다면 viewBox="0 0 24 24"를 추가합니다. 이후 width·height를 CSS로 바꿔도 도형 비율이 유지된 채 크기가 조정됩니다.