SVG Viewport 및 ViewBox

SVG 이미지의 시각 영역(Viewport)과 뷰 박스(ViewBox)는 이미지가 보이는 부분의 크기를 설정할 수 있습니다.

viewport와 viewbox의 차이

1viewport는 시각 영역, 디스플레이어 스크린과 동일합니다.

2viewbox는 시각 영역, 스크린에 작은 부분을 캡처하여 전체 스크린으로 확대하는 효과입니다.

3preserveAspectRatio 속성은 viewbox와 viewport의 정렬 방식과 확대 방식을 지정합니다.

시각 영역(Viewport)

시각 영역(Viewport)은 SVG 이미지의 보이는 영역입니다. 논리적으로, SVG 이미지는 원하는 만큼 넓고 높이가 될 수 있지만, 한 번에 이미지의 특정 부분만을 볼 수 있습니다. 보이는 영역은 시각 영역(Viewport)으로 불립니다.

요소의 width와 height 속성을 사용하여 시각 영역(Viewport)의 크기를 지정할 수 있습니다.<svg> 이는 예제입니다：

<svg width="500"　height="300"></svg>

이 예제에서 정의된 시각 영역(Viewport)은500단위 너비와300단위 높이.

좌표 시스템 단위

width와 height 속성에 단위를 지정하지 않았을 경우, 기본적으로 픽셀 단위로 설정됩니다. 즉, width500을 의미합니다5픽셀.

픽셀 단위가 아닌 단위를 사용하고 싶다면 사용할 수 있습니다. 다음은 <svg> 요소와 함께 사용할 수 있는 단위 목록입니다：

SVG 요소에 설정한 단위는 SVG 요소(시각 영역(Viewport))의 크기를 영향을 미칩니다. SVG 이미지에 표시된 SVG 형상의 크기는 각 형상에 설정한 단위에 따라 결정됩니다. 단위가 지정되지 않으면 기본적으로 픽셀 단위로 설정됩니다.

SVG에 단위가 있는 요소 그룹과 각각 자신의 단위 집합을 가진 모양을 포함한 예제를 보여주는 이는 예제입니다：

<svg width="10cm" height="10cm">
　　　　<rect　x="50" y="100" width="50" height="50"
　　　　　　　　　　style="stroke: #000000; fill: none;"/>
　　　　<rect　x="100" y="100" width="50mm" height="50mm"
　　　　　　　　　　style="stroke: #000000; fill: none;"　/>
</svg>

SVG 이미지는 자신의 단위 설정이 있습니다. 이 두 <rect> 요소는 각각 자신의 단위 집합을 가지고 있습니다. 하나는 단위가 명시적으로 설정되지 않은 픽셀을 사용하고 다른 하나는 mm의 width와 height를 사용합니다.

이렇게 생성된 이미지입니다. 왼쪽의 상자보다 오른쪽의 상자가 크다는 것을 주목해 주세요（width와 height 단위는 mm）.

ViewBox

SVG 요소 내부에 단위가 없는 좌표의 의미를 재정의할 수 있습니다. 이를 위해 viewBox 속성을 사용할 수 있습니다. 다음은 예제입니다：

<svg width="500"　height="200" viewBox="0 0　50　20" >
　　　　<rect　x="20" y="10"　width="10"height="5"
　　　　　　　　　　style="stroke:　#000000;　fill:none;"/>
</svg>

이 예제에서 viewBox의 너비는500픽셀, 높이는200의 요소가 viewBox 속성의 네 가지 좌표를 포함하고 있습니다. 이 좌표는 <svg> 요소의 viewBox(ViewBox)를 정의합니다. 좌표는 x y width height로, viewBox의 좌표입니다.

이 경우, viewBox는 0,0에서 시작하며,50너비로20높이. 즉,500 x 200픽셀<svg> 요소는 내부에서 0,0에서 0,0까지의 좌표계를 사용합니다.50,20이며, 내부 모양의 좌표에서 각1단위<svg>가 너비에 해당하기 때문입니다.500/50 = 10픽셀, 높이가200/20 = 10픽셀. 이는 x 위치가20, y 위치는10의 사각형이 실제로 위치한 이유200,100이며, 그 너비（10）와 높이（5）각각100픽셀과50픽셀.

또한, viewBox 속성에서 <svg>의 첫 번째 좌표는 요소의 왼쪽 상단 사용자 좌표를 정의하며, 마지막 두 번째 좌표는 오른쪽 하단 사용자 좌표를 정의합니다. viewBox 내부의 공간은 <svg>에서 ViewBox의 왼쪽 상단 좌표에서 오른쪽 하단 좌표까지로 해석됩니다.

이미지 효과:

请注意，<rect> 요소 내부의 모든 좌표는 다음과 같이 해석됩니다1단위.10픽셀.

가로세로비 유지

Viewport과 ViewBox의 가로세로비가 다를 경우, SVG 이미지를 어떻게 표시할지 SVG 뷰어(예: 브라우저)에 지정해야 합니다. 이를 위해 <svg> 요소의 preserveAspectRatio 속성을 사용할 수 있습니다.

preserveAspectRatio 속성은 공백으로 구분된 두 값을 사용합니다. 첫 번째 값은 뷰박스(ViewBox)가 뷰포트(Viewport) 내에서 어떻게 정렬되는지를 설명합니다. 이 값 자체는 두 부분으로 구성되며, 두 번째 값은 비율을 유지하는 방법을 지시합니다(있는 경우).

정렬 방식을 지정하는 첫 번째 값은 두 부분으로 구성됩니다. 첫 번째 부분은 x 정렬 방식을 지정하고, 두 번째 부분은 y 정렬 방식을 지정합니다. x와 y 정렬 값의 목록은 다음과 같습니다：

x 부분과 y 부분을 x 부분 뒤에 추가하여 x 부분과 y 부분을 하나의 값으로 조합할 수 있습니다. 이 두 가지 예제가 있습니다：

xMaxYMax
xMidYMid

이 두 가지 예제는 뷰박스(ViewBox)와 뷰포트(Viewport)의 정렬 방식을 다르게 합니다. 첫 번째 예제는 뷰박스의 오른쪽 경계를 뷰포트(Viewport)의 오른쪽 경계와 정렬합니다. 두 번째 예제는 뷰박스의 중앙을 뷰포트(Viewport)의 중앙과 정렬합니다.

preserveAspectRatio 속성 값의 두 번째 부분은 세 가지 다른 값을 취할 수 있습니다：

preserveAspectRatio 속성 값의 두 번째 부분을 첫 번째 부분에 추가하고 공백으로 구분합니다. 이 두 가지 예제가 있습니다：

preserveAspectRatio="xMidYMid　meet"
preserveAspectRatio="xMinYMin　slice"

아직 preserveAspectRatio 설정들의 효과에 대해 깊이 논의하지 않았기 때문에,让我们来看一下。

设置为500，height를75这意味着沿着x轴，每个坐标单元将对应于 250 75픽셀에 해당합니다.2픽셀입니다만, y축에서는 각 좌표 단위가1픽셀입니다.如您所见，x축의 비율은500/250 = 2، y축의 비율은75/75 = 1이를 통해 이미지가 왜곡될 수 있지만, 다음 예제에서 preserveAspectRatio 설정들이 어떻게 이를 처리하는지 보여드리겠습니다.

이는 preserveAspectRatio가 xMinYMin meet로 설정된 첫 번째 예제입니다. 이렇게 하면 비율을 유지하고 뷰박스(ViewBox)의 크기를 뷰포트(Viewport)에 맞게 조정할 수 있습니다. 즉, 두 개의纵横비율(이는 y축 비율이1）에서 작은 비율로 뷰박스(ViewBox)를 확대합니다. xMinYMin 부분의 이유로 뷰박스(ViewBox)는 뷰포트(Viewport)의 좌상단에 위치합니다. 이는 코드와 생성된 이미지입니다:

<svg width="500"　height="75"　viewBox="0　0　250　75"　　　　　preserveAspectRatio="xMinYMin　meet"
　　　　　style="border:　1px solid #cccccc;">
　　　　<rect　x="1"　y="1"　width="50" height="50"
　　　　　　　　　　style="stroke:　#000000;　fill:none;"/>
</svg>

두 번째 예제에서 preserveAspectRatio는 xMinYMin slice로 설정되었습니다. 이렇게 하면 비율을 유지할 수 있지만, 큰 비율에 따라 (x축 비율이2）뷰박스(ViewBox)를 확대하여 이미지가 뷰포트(Viewport)에 맞지 않게 되고, 이를 '스ライ스'라고 합니다.

<svg width="500"　height="75"　viewBox="0　0　250　75"　　　　　preserveAspectRatio="xMinYMin　slice"
　　　　　style="border:　1px solid #cccccc;">
　　　　<rect　x="1"　y="1"　width="50" height="50"
　　　　　　　　　　style="stroke:　#000000;　fill:none;"/>
</svg>

세 번째 예제에서 preserveAspectRatio 설정은 none입니다. 이는 뷰박스(ViewBox)가 전체 뷰포트(Viewport)를 채우게 되며, x축과 y축의 비율이 다르기 때문에 이미지가 왜곡됩니다.

<svg width="500"　height="75"　viewBox="0　0　250　75"　　　　　　preserveAspectRatio="none"
　　　　　　style="border:　1px solid #cccccc;">
　　　　　<rect　x="1"　y="1"　width="50" height="50"
　　　　　　　　　　　style="stroke:　#000000;　fill:none;"/>
</svg>

뷰박스(ViewBox) 정렬

현재까지 표시된 모든 예제는 이 xMinYMin 설정을 사용했습니다. 뷰포트(Viewport)에서 뷰박스(ViewBox)를 어떻게 정렬하려고 할지에 따라 다른 설정을 사용할 수 있습니다. 저는 이 설정들이 어떻게 작동하는지 더 깊이 이해하겠지만, 먼저 하나의 예제를 보겠습니다:

<svg width="500"　height="100"　viewBox="0　0　50　50"　　　　
preserveAspectRatio="xMinYMin　meet"　　　　
style="border:　1px solid #cccccc;">　　　　
<circle cx="25" cy="25" r="25"　　　　
style="stroke:　#000000;　fill:none;"/>　　　　
</svg>　　　　
<svg width="500"　height="100"　viewBox="0　0　50　50"　　　　
preserveAspectRatio="xMidYMin　meet"　　　　
style="border:　1px solid #cccccc;">　　　　
<circle cx="25" cy="25" r="25"　　　　
style="stroke:　#000000;　fill:none;"/>　　　　
</svg>　　　　
<svg width="500"　height="100"　viewBox="0　0　50　50"　　　　
preserveAspectRatio="xMaxYMin　meet"　　　　
style="border:　1px solid #cccccc;">　　　　
<circle cx="25" cy="25" r="25"　　　　
style="stroke:　#000000;　fill:none;"/>　　　　
</svg>

이 예제에서 <svg> 요소와 width 요소 그룹을 보여줍니다500과 height를 설정100. viewBox를 0 0로 설정 50 50. 이는 x축의 너비 비율이500/50 = 10y축의 너비 비율은100/50 =2이미지의 원의 반지름은25그를 넓혀서50도 너비, 높이50단위. 따라서, 그는 전체 뷰박스(ViewBox)를 채웁니다(뷰포트(Viewport) 대신).

meet 기호를 사용할 때, 뷰박스(ViewBox)는 y축에 따라 줄이기 때문에 가로 비율이 더 작습니다. 이는 뷰박스(ViewBox)가 y축(垂直)으로 전체 뷰포트(Viewport)를 채우지만, x축(수평)으로만 채우는 것을 의미합니다.2 * 50픽셀= 100픽셀(비율*뷰박스(ViewBox) X 크기) . 뷰포트(Viewport)의 너비는500픽셀, 따라서 뷰포트(Viewport) 내에서 뷰박스(ViewBox)를 수평으로 정렬하는 방법을 지정해야 합니다. 이를 위해 preserveAspectRatio의 첫 번째 부분의 속성 값으로 xMin, xMid, xMax를 사용합니다.

여기에는 xMinYMin meet, xMidYmin meet, xMaxYmin meet를 preserveAspectRatio 속성에 사용하는 예제가 세 개 있습니다. 뷰박스(ViewBox)가 왼쪽, 중앙, 오른쪽에 어떻게 정렬되는지 주목해 주세요(설정에 따라 다릅니다).

동일하게, 이미지가 x축 방향의 가로 비율이 y축 방향보다 작으면 그 y축 정렬을 지정해야 합니다.

이는 이전 예제입니다만, 지금은 width100과 height200：

뷰박스(ViewBox)의 크기는 같기 때문에 y축 방향의 너비 비율(200/50 = 4）가 x축 방향의 너비 비율보다 큽니다(100/50 = 2）。따라서, 뷰박스(ViewBox)는 y축 대신 x축 방향으로 뷰포트(Viewport)를 채웁니다. 이로 인해 뷰박스(ViewBox)에 y축 정렬을 지정해야 합니다.

<svg width="100" height="200" viewbox="0 0　50　50"　preserveaspectratio="xMinYMin　meet"　style="border:　1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>
<svg width="100" height="200" viewbox="0 0　50　50"　preserveaspectratio="xMinYMid　meet"　style="border:　1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>
<svg width="100" height="200" viewbox="0 0　50　50" preserveaspectratio="xMinYMax meet" style="border:　1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>

이 세 장의 이미지는 각각 사용자 부분 값의 가능한 y 정렬 YMin, YMid 및 YMax를 보여줍니다: