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 그래픽 요소를 공간에 정렬하는 설정입니다.

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

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

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

PreviousHTML 문서에 SVG 포함하기NextSVG 기본 도형 그리기

Last updated