[SVG] viewBox

다음 예제에서 svg를 그릴 영역을 컨테이너라고 하겠습니다.

크기 width 300px, height: 300의 노란색 영역이 컨테이너가 될 겁니다.

const App = () => (
  <div style={{ marginTop: '50px', marginLeft: '50px' }}>
    <div style={{ backgroundColor: 'yellow', width: '300px', height: '300px' }}>
      <svg viewBox="0 0 200 200">
        <circle r="100" fill="blue" />
      </svg>
    </div>
  </div>
);

export default App;

viewBox

0 0 200 200에서 앞에 두 요소는 min-x, min-y로 시작점을 의미합니다. 뒤의 두 요소는 width, height입니다. 

 

설명

원의 1/4만 2 사분면에 나와 있습니다. 원의 중심인 cx, cy 속성을 따로 지정해주지 않았으므로 0입니다.

원의 중심이 컨테이너의 (0, 0)에 위치합니다. 크기는 어째서 절반이 나왔을까요.

컨테이너의 크기는 분명 300px * 300px이고 원의 반지름을 100으로 했는데, 출력된 원의 반지름은 150px입니다.

viewBox에서의 숫자는 특정 단위를 의미하지 않고 비율 정도로 생각하면 됩니다.

컨테이너의 width: 300px를 200으로 height: 300px을 200으로 보겠다는 의미입니다.

그러므로 circle의 r 속성을 100으로 두면 실제로는 반지름이 150px이 되는 것입니다.

여기에서 cx, cy에 값을 100씩 부여하겠습니다. 잘 보세요. 이번에도 단위는 없습니다.

어떤 모습으로 출력될지 예상해봅시다.

 

const App = () => (
  <div style={{ marginTop: '50px', marginLeft: '50px' }}>
    <div style={{ backgroundColor: 'yellow', width: '300px', height: '300px' }}>
      <svg viewBox="0 0 200 200">
        <circle r="100" cx="100" cy="100" fill="blue" />
      </svg>
    </div>
  </div>
);

export default App;

예상한 대로 나왔나요? cx, cy에 100을 줬지만 이것은 100px이 아닙니다. 300px을 200으로 표현하므로

cx="100"은 실제 좌표에서 150이 됩니다. 그러므로 300px * 300px 컨테이너를 가득 채운 원을 그릴 수 있습니다.

 

지금 상태에서 원이 2 사분면에만 빼꼼히 나오는 모습을, viewBox를 수정해서 표현할 수 있습니다.

cx, cy가 (0, 0)일 때 2 사분면에 표현됐었습니다.

cx, cy가 (100, 100)일 때 꽉 찬 원을 그릴 수 있으므로

viewBox를 다시 (100, 100)을 이동해주면 됩니다.

컨테이너에 렌더할 수 있는 부분만 화면에서 볼 수 있으므로 초기 이미지와 같은 모습의 이미지가 보입니다.

< 출처 >

https://developer.mozilla.org/ko/docs/Web/SVG/Attribute/viewBox

https://tecoble.techcourse.co.kr/post/2021-10-24-svg-viewBox/