SVG viewBox 및 반응형 크기 조정

SVG의 width와 height는 DOM에서 렌더링되는 크기를 설정합니다. viewBox 특성은 내부 좌표 공간을 정의합니다. 이 둘은 서로 독립적이므로 width="200" height="200"과 함께 viewBox가 "0 0 100 100"이면 좌표 공간이 2배로 확대됩니다.

viewBox="min-x min-y width height". 가장 일반적인 viewBox="0 0 100 100"은 원점에서 시작하는 100x100 좌표 공간을 정의합니다. SVG의 좌표값은 픽셀이 아니라 이 좌표 공간을 기준으로 합니다.

반응형 SVG를 만들려면 width 및 height 특성을 생략하거나 100%로 설정하고 viewBox가 비율을 정의하도록 합니다. CSS를 추가합니다: svg { width: 100%; height: auto; }. SVG는 종횡비를 유지하면서 컨테이너에 맞게 크기가 조정됩니다.

preserveAspectRatio는 종횡비가 다를 때 viewBox를 SVG 뷰포트에 맞추는 방법을 제어합니다. 값은 다음과 같습니다: "xMidYMid meet"(기본값 — 여백을 넣어 맞춤), "xMidYMid slice"(채우도록 잘라냄), "none"(종횡비를 유지하지 않고 늘려 맞춤).

min-x와 min-y를 변경하면 SVG 좌표 공간에서 보이는 영역을 이동할 수 있습니다. viewBox="50 50 100 100"은 (50,50)부터 (150,150)까지의 영역을 표시합니다. JavaScript로 viewBox 값을 업데이트하면 대화형 패닝을 구현할 수 있습니다.

viewBox의 크기를 줄이면 확대됩니다: viewBox="25 25 50 50"은 더 작은 영역을 표시하고 이를 SVG 요소 전체에 확대해 채웁니다. 크기를 늘리면 축소됩니다. 휠 이벤트에서 viewBox를 업데이트하면 SVG 요소 자체의 크기를 조정하지 않고 대화형 확대 및 축소를 구현할 수 있습니다.

img 태그 안의 SVG는 object-fit을 사용해 반응형으로 크기를 조정할 수 있지만 CSS로 스타일을 지정하거나 스크립트로 제어할 수 없습니다. 인라인 SVG는 CSS와 JavaScript를 완전히 사용할 수 있지만 HTML 크기가 늘어납니다. 상호 작용이 필요한지에 따라 선택합니다.

아이콘 SVG는 고정된 viewBox(예: "0 0 24 24")를 사용하고 width와 height는 지정하지 않아 CSS로 크기를 정합니다: .icon { width: 1.5rem; height: 1.5rem; }. viewBox를 사용하면 어떤 크기에서도 아이콘이 올바르게 확대·축소되고 선명한 벡터 렌더링이 유지됩니다.

숨겨진 SVG 안의 <symbol viewBox="0 0 24 24"> 요소에 아이콘을 정의합니다. 다음과 같이 참조합니다: <use href="#icon-name">. 각 use 요소에 고유한 width, height, fill 및 color를 지정할 수 있으므로 모든 아이콘을 하나의 스프라이트 파일로 관리할 수 있습니다.

SVG의 fill="currentColor"는 해당 요소나 부모 요소의 CSS color 속성을 상속합니다. SVG 또는 부모 요소에 color: red를 설정하면 아이콘이 자동으로 빨간색으로 채워집니다. 따라서 SVG 전용 스타일을 지정하지 않아도 단색 아이콘이 텍스트 색상을 따르게 할 수 있습니다.

SVG 콘텐츠가 잘려 보이거나 예상하지 못한 위치에 표시되면 viewBox 값을 로그로 기록하거나 검사합니다. 흔한 실수는 렌더링 크기를 고려하지 않고 원본 그래픽의 픽셀 크기를 viewBox에 설정하는 것입니다. 그러면 크기 조정 문제가 발생합니다. viewBox가 SVG 그래픽의 실제 콘텐츠 경계와 일치하는지 확인합니다.

SVG가 어떤 컨테이너 너비에도 반응형으로 맞춰지도록 하려면 어떻게 해야 하나요?

SVG의 viewBox는 렌더링되는 픽셀 크기와 독립적인 내부 좌표 공간을 정의하므로 반응형 크기 조정이 가능합니다. width:100%; height:auto와 viewBox를 설정하면 SVG가 어떤 컨테이너에도 맞게 조정됩니다. symbol+use 스프라이트 패턴, currentColor 테마 지정 및 preserveAspectRatio를 함께 사용하면 유연하고 테마를 적용할 수 있는 SVG를 구현할 수 있습니다.