[SVG] viewBox에 대한 고찰

우선 베이스가 되는 샘플을 준비해 둡니다

200*200 사이즈로 배경을 회색으로 하고 중간에 오렌지 원을 둡니다. 예술적입니다.
왼쪽 상단에 푸른 원도 더합니다.

<svg width="200" height="200" viewBox="0 0 200 200" style="background: #ddd">
  <circle cx="100" cy="100" r="50" fill="orange" />
  <circle cx="0" cy="0" r="10" fill="blue" />
</svg>

기본적인 것

우선 외부의 <svg width="200" height="200" 부분의 200*200이 뷰포트(그리기 영역)의 크기입니다.
viewBox="0 0 200 200" 하지만 고찰하고 싶은 viewBox입니다만, 이것이 의미하는 곳은.
"vievBox="x y width height""

x : 왼쪽 상단의 x 좌표

y: 왼쪽 위의 y 좌표

width: 폭

height: 높이

라고, 쓴 곳에서.... 모르겠다고 생각하므로, 이하 사례를 쫓아 받는 것이 좋다고 생각합니다.

우선은 확대해 보자

viewBox="0 0 100 100" 로 확대합니다.

<svg width="200" height="200" viewBox="0 0 100 100" style="background: #ddd">
  <circle cx="100" cy="100" r="50" fill="orange" />
  <circle cx="0" cy="0" r="10" fill="blue" />
</svg>

그대로 좌표를 어긋나고(수학으로 말한다) 제1 사분면을 표시해 본다

viewBox="100 0 100 100" 라는 느낌으로, x 좌표를 오른쪽으로 100 옮겼습니다.

<svg width="200" height="200" viewBox="100 0 100 100" style="background: #ddd">
  <circle cx="100" cy="100" r="50" fill="orange" />
  <circle cx="0" cy="0" r="10" fill="blue" />
</svg>

그럼 문제입니다. 다음 소스는 어떻게 될까요?

viewBox="0 0 100 200" 했습니다. xy 좌표가 처음으로 돌아왔습니다.
상자가 사각형이 아닙니다. 100*200의 직사각형입니다. 외부 테두리는 변함없이 200*200 정연합니다.

<svg width="200" height="200" viewBox="100 0 100 200" style="background: #ddd">
  <circle cx="100" cy="100" r="50" fill="orange" />
  <circle cx="0" cy="0" r="10" fill="blue" />
</svg>

어떻게 될까요?

나는 전혀 몰랐다.

정답과 요인

위의 문제이지만 이렇게됩니다.



나는 처음으로 이것으로 찐볶음밥이 되었습니다.

왜 이렇게 되는지는, viewBox와 같은 사이즈 지정의 테두리를 표시시키는 것으로 알기 쉽게 됩니다.

<svg width="200" height="200" viewBox="0 0 100 200" style="background: #ddd">
  <rect x="0" y="0" width="100" height="200" stroke="black" fill="none"/>
  <circle cx="100" cy="100" r="50" fill="orange" />
  <circle cx="0" cy="0" r="10" fill="blue" />
</svg>

중간에 테두리가 있습니다. 이런 것입니다.

무슨 일이야? 초기 설정에 따라 다릅니다.

포인트는, 뷰포트의 영역과 viewBox의 영역의 종횡비가 어긋나고 있을 때, 도대체 어떻게 되는 것인가? 종횡비를 유지할 것인가, 아니면 어느 쪽으로 팽창하거나 할 것인가? 라는 것이 신경이 쓰입니다.

그 확장에 대한 속성이 "preserveAspectRatio"라는 속성입니다.

기본적으로 이렇게 되어 있습니다.

<svg width="200" height="200" viewBox="0 0 100 200" style="background: #ddd" preserveAspectRatio="xMinYMin meet">
  <rect x="0" y="0" width="100" height="200" stroke="black" fill="none"/>
  <circle cx="100" cy="100" r="50" fill="orange" />
  <circle cx="0" cy="0" r="10" fill="blue" />
</svg>

preserveAspectRatio="xMidYMid meet" ←이 녀석입니다.

xMidYMid: 균등한 확장을 강제하고 xy 각각의 중간에 배치.

meet: 종횡비는 유지하고 veiwBox를 가능한 한 크게 배치.

이런 느낌입니다. 그래서 굳이 균등을 무너뜨리면 다음과 같이 할 수도 있습니다.

<svg width="200" height="200" viewBox="0 0 100 200" style="background: #ddd" preserveAspectRatio="none">
  <rect x="0" y="0" width="100" height="200" stroke="black" fill="none"/>
  <circle cx="100" cy="100" r="50" fill="orange" />
  <circle cx="0" cy="0" r="10" fill="blue" />
</svg>

이상 감사합니다.