[SVG] preserveAspectRatio 고정종횡비

preserveAspectRatio 고정종횡비

고정종횡비란?

종횡비란 화면의 가로대 세로의 크기비율이라고 합니다. 고정종횡비는 가로세로비율의 크기를 고정시키는걸 고정종횡비라고 합니다.

SVG의 경우 이미지의 가로세로 사이즈변경 작업을 진행할때 고정종횡비로 인해 원하는 풀사이즈로의 가로세로 크기변경이 되지 않습니다.

width 속성과 height 속성을 분명히 변경하였는데 width 속성만 먹힌다거나 height 속성만 먹혀서 원하는 사이즈가 나오지않는다면 곤란하죠.

그런 문제를 해결하기위해 나온 속성이 preserveAspectRatio 속성 입니다.

MDN에 SVG 속성 명세에 따르면 preserveAspectRatio는 10개의 align 속성과 2개의 meetOrSlice 속성을 제공하고있습니다.

<align>

none : 고정종횡비를 해제하여 image의 width ,height 속성에 꽉 들어차게 합니다.

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>

align 속성에 추가되는 속성으로 x y 가 만나거나 자르는 데 사용합니다.

만약 xMinYMax의 경우 width 의 맨왼쪽 과 height 의 맨 아래쪽 즉, x의 최소값과 y의 최대값이 만나는 지점까지 meet 속성을 사용하면 해당위치로 지정되게하고 slice 속성을 사용하면 해당 영역에서부터 잘라냅니다.

위 속성은 예제를 사용하여 보면 더욱 이해하기가 쉽습니다. 보통 고정종횡비를 해제하기위해 none 속성을 가장 많이 사용합니다.

See the Pen OyOBqv by Kang Jun (@shokio) on CodePen.