viewport, viewBox 비교

1. Viewport (뷰포트)

viewport는 SVG가 화면에 표시되는 실제 크기와 위치를 정의합니다. 이는 SVG의 픽셀 공간을 결정하며, 일반적으로 HTML 문서에서 SVG 요소의 width와 height 속성에 의해 설정됩니다.

• 픽셀 단위: viewport는 물리적 픽셀 공간으로 동작합니다.
• CSS와 관련: HTML 문서 내에서 CSS를 사용해 크기 조정을 적용할 수 있습니다.
• 설정하지 않으면 기본적으로 SVG의 내용이 포함된 본질적 크기(intrinsic size)를 사용합니다.
• viewport를 설정하지 않고 CSS의 width와 height를 사용하면 외부 컨테이너에 따라 유연하게 변합니다.

<svg width="200" height="100" style="border: 1px solid black;">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

2. ViewBox (뷰박스)

viewBox는 SVG의 내부 좌표 시스템을 정의합니다. viewBox는 다음과 같은 4개의 값으로 구성됩니다.

• 좌표 변환: SVG의 내부 좌표를 viewport와 매핑하는 역할을 합니다.
• 확대 및 축소: SVG 콘텐츠를 viewport에 어떻게 스케일링할지 결정합니다.
• 설정하지 않으면 내부 좌표는 기본적으로 viewport 크기와 동일하게 간주됩니다.

<svg width="200" height="100" viewBox="0 0 400 200" style="border: 1px solid black;">
  <circle cx="200" cy="100" r="80" fill="red" />
</svg>

여기서 viewport 는 크기(픽셀)가 width가 200, height가 100 이며, viewBox 는  박스의 왼쪽 상단 좌표를 0,0 하고 width는 400 만큼, height는 200 만큼으로 좌표를 만드는 것입니다.

 

viewBox가 없으면 내부 좌표는 viewport의 크기와 동일합니다. 따라서 확대/축소 효과가 없습니다.