SVG viewBox가 없어 아이콘이 잘리거나 작게 보일 때 고치는 방법

viewBox 네 값이 화면에 미치는 영향

viewBox의 첫 두 값은 보이는 좌표의 시작점이고 뒤의 두 값은 내부 영역의 너비와 높이입니다. 브라우저는 이 좌표 영역을 SVG viewport에 맞춰 확대하거나 축소합니다. path가 음수 좌표를 사용하거나 원점에서 떨어져 있으면 `0 0`만 가정했을 때 일부가 잘리거나 한쪽으로 치우칠 수 있습니다.

아이콘이 같은 CSS 크기인데 작아 보이는 이유

도형 주위에 큰 빈 공간이 포함된 viewBox는 빈 공간까지 함께 축소해 viewport에 넣습니다. 그래서 width와 height가 같은 다른 아이콘보다 실제 획이 작게 보입니다. 편집기의 페이지 크기와 아트워크 경계를 비교하고, 의도한 안전 여백을 제외한 불필요한 좌표만 줄이세요.

stroke와 filter 때문에 생기는 가장자리 잘림

path의 기하학적 경계 밖으로 stroke 절반이 확장될 수 있고 linecap이나 linejoin 모양도 더 튀어나옵니다. blur, drop shadow 같은 filter는 추가 영역을 사용합니다. path 경계에 정확히 맞춘 viewBox보다 효과가 실제로 차지하는 만큼 여유를 둔 뒤 여러 배율에서 확인해야 합니다.

반응형 크기와 종횡비를 함께 맞추는 법

viewBox가 있으면 CSS로 너비만 바꿔도 내부 좌표를 비례해서 표시할 수 있습니다. 컨테이너 비율과 viewBox 비율이 다를 때는 preserveAspectRatio 설정에 따라 여백이 생기거나 잘라 채울 수 있습니다. 로고처럼 변형되면 안 되는 자산은 비율 유지 상태를 명시적으로 점검하세요.

단계별로 확인하는 방법

1. 실제 도형 좌표 확인하기

   path, shape, group 변환을 포함해 아트워크의 최소·최대 좌표와 음수 좌표 사용 여부를 확인합니다.

2. 효과 여백 더하기

   stroke 두께, linecap, filter와 shadow가 도형 바깥으로 확장되는 범위를 반영합니다.

3. viewBox와 표시 크기 분리하기

   내부 좌표는 viewBox로 정하고 화면 크기는 width·height 또는 CSS에서 지정합니다.

4. 여러 컨테이너에서 검수하기

   정사각형과 비정사각형 영역, 작은 아이콘 크기와 고배율에서 잘림·치우침·왜곡을 확인합니다.

함께 보면 좋은 글

• SVG 파일 용량을 줄이는 방법
• PNG·JPG·WebP 형식을 고르는 기준

viewBox가 있으면 width와 height는 없어도 되나요?

CSS나 부모 레이아웃이 크기를 정한다면 가능하지만 기본 표시 크기와 레이아웃 안정성을 위해 사용 환경에 맞는 크기 규칙을 제공하는 편이 좋습니다.

viewBox의 width와 height에 px을 붙이나요?

아닙니다. viewBox 값은 내부 사용자 좌표를 나타내는 숫자이며 CSS 길이 단위를 붙이지 않습니다.

path의 getBBox 값만 쓰면 항상 맞나요?

기본 기하 경계만으로는 stroke와 일부 filter 효과가 차지하는 영역이 빠질 수 있습니다. 실제 렌더링까지 확인해 여백을 보정하세요.

아이콘을 꽉 채우려고 preserveAspectRatio를 none으로 써도 되나요?

비율이 다른 컨테이너에서는 도형이 늘어나거나 눌릴 수 있습니다. 의도적인 변형이 아니라면 종횡비를 유지하는 설정이 보통 적합합니다.