> For the complete documentation index, see [llms.txt](https://a11y.gitbook.io/graphics-aria/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-layout.md).

# SVG 레이아웃

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

* SVG 캔버스(Canvas) 혹은 뷰포트(Viewport)
* SVG 뷰박스(viewBox)

{% hint style="info" %}
**NOTE.**\
\
[SVG 1.1 표준 문서 "좌표 시스템"](https://www.w3.org/TR/SVG11/coords.html) 에 따르면 **SVG 캔버스**는 "SVG 콘텐츠가 렌더링 되는 공간"이라고 기술합니다. 캔버스는 공간 내에서 무한한 좌표 사용이 가능하지만, HTML 문서에서 렌더링은 설정된 캔버스의 너비, 높이 안에서만 이루어집니다. 이 공간을 **SVG 뷰포트**라고 부릅니다. 
{% endhint %}

### SVG 뷰포트(viewport)

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

{% code title="HTML" %}

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

{% endcode %}

### SVG 뷰박스(viewBox)

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

{% code title="HTML" %}

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

{% endcode %}

{% hint style="danger" %}
**WARNING.**\
`width`, `height` 값으로 `0`, `음수`는 허용하지 않습니다.
{% endhint %}

### PreserveAspectRatio

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

{% code title="HTML" %}

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

{% endcode %}

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` | 가로:세로 비율을 유지합니다.                          |
|         | 뷰박스와 뷰포트 크기가 다를 경우, 뷰박스를 잘라 화면에 표시합니다     |

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

<div align="left"><img src="/files/-LEIMvB9zK9OvKD7ULMU" alt="preserveAspectRatio 속성에 따른 그래픽 정렬 / meet, slice"></div>