SVG 레이아웃

SVG 코드가 화면에 렌더링 되고, 레이아웃 되는 영역에 대한 개념을 정리해봅니다.

• SVG 캔버스(Canvas) 혹은 뷰포트(Viewport)

• SVG 뷰박스(viewBox)

NOTE. SVG 1.1 표준 문서 "좌표 시스템" 에 따르면 SVG 캔버스는 "SVG 콘텐츠가 렌더링 되는 공간"이라고 기술합니다. 캔버스는 공간 내에서 무한한 좌표 사용이 가능하지만, HTML 문서에서 렌더링은 설정된 캔버스의 너비, 높이 안에서만 이루어집니다. 이 공간을 SVG 뷰포트라고 부릅니다.

SVG 뷰포트(viewport)

뷰포트의 너비(width), 높이(height)를 설정하는 방법은 <img> 요소와 동일합니다.

HTML

<svg width="512" height="512">
  ...
</svg>

SVG 뷰박스(viewBox)

viewBox 속성은 값으로 min-x, min-y, width, height숫자 배열 값을 전달 받습니다. 이 값은 뷰포트에 맵핑 되는 공간을 명시 하며, preserveAspectRatio 속성과 관계를 가집니다.

HTML

<svg 
  width="512" height="512" 
  viewBox="0 0 512 512">
  ...
</svg>

WARNING. width, height 값으로 0, 음수는 허용하지 않습니다.

PreserveAspectRatio

SVG 뷰포트와 뷰박스 크기가 다를 경우, 그래픽의 가로:세로 비율을 유지하거나 크기를 확대/축소하는 스케일링 설정은 preserveAspectRatio 속성을 사용합니다. viewBox 속성과 관련된 속성으로 viewBox 속성이 설정되지 않으면 무시됩니다.

HTML

<svg
  width="512" height="512"
  viewBox="0 0 512 512"
  preserveAspectRatio="xMaxYMin meet">
  ...
</svg>

preserveAspectRatio 속성 값으로 설정 가능한 매개변수 유형은 다음과 같습니다.

• <align>

• <meetOrSlide> (옵션)

정렬 <align>

뷰박스와 뷰포트 크기가 다른 경우, SVG 그래픽 요소를 공간에 정렬하는 설정입니다.

매개변수	설명
none	가로:세로 비율을 보존하지 않습니다. (<meetOrSlide> 매개변수 값 무시)
xMinYMin	가로:세로 비율을 유지합니다. 뷰포트의 왼쪽 x, 상단 y 축 값에 위치 시킵니다.
xMidYMin	가로:세로 비율을 유지합니다. 뷰포트의 가운데 x, 상단 y 축 값에 위치 시킵니다.
xMaxYMin	가로:세로 비율을 유지합니다. 뷰포트의 오른쪽 x, 상단 y 축 값에 위치 시킵니다.
xMinYMid	가로:세로 비율을 유지합니다. 뷰포트의 왼쪽 x, 중앙 y 축 값에 위치 시킵니다.
xMidYMid	가로:세로 비율을 유지합니다. 뷰포트의 가운데 x, 중앙 y 축 값에 위치 시킵니다.
xMaxYMid	가로:세로 비율을 유지합니다. 뷰포트의 오른쪽 x, 중앙 y 축 값에 위치 시킵니다.
xMinYMax	가로:세로 비율을 유지합니다. 뷰포트의 왼쪽 x, 하단 y 축 값에 위치 시킵니다.
xMidYMax	가로:세로 비율을 유지합니다. 뷰포트의 가운데 x, 하단 y 축 값에 위치 시킵니다.
xMaxYMax	가로:세로 비율을 유지합니다. 뷰포트의 오른쪽 x, 하단 y 축 값에 위치 시킵니다.

적당히 채우거나 자름 <meetOrSlice>

<meetOrSlice>매개 변수는 <align> 뒤에 공백으로 구분되며 설정 가능한 옵션 사항으로 선택사항(옵션) 입니다.

매개변수	설명
meet	가로:세로 비율을 유지합니다.
	뷰박스와 뷰포트 크기가 다를 경우, 뷰박스를 뷰포트 안에 모두 표시합니다.
slice	가로:세로 비율을 유지합니다.
	뷰박스와 뷰포트 크기가 다를 경우, 뷰박스를 잘라 화면에 표시합니다

아래 이미지와 각 매개변수를 살펴보면 각각의 설정을 이해하는데 도움이 될 겁니다.

preserveAspectRatio 속성에 따른 그래픽 정렬 / meet, slice