# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.