SVG
SVG 요소

뷰 박스

viewBox 속성은 <svg> 요소에 대한 좌표계를 정의합니다. 이렇게하면 각 개별 요소의 위치와 치수를 조정하지 않고도 SVG 그래픽의 크기와 상대적 비율을 쉽게 변경할 수 있습니다.

<!-- stretches a small icon to 60px square -->
<svg viewBox="0 0 16 16" height="60px" width="60px">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

해당 코드는 다음과 같습니다.

viewBox가 없으면 다음과 같이 보입니다.

preserveAspectRatio

preserveAspectRatio 는 이미지의 크기를 균일하게 조정해야하는지 여부를 나타내는 특성입니다. 경우이 속성은 작동 <svg> 요소도있다 viewBox .

기본값은 xMidYMid 이며, 이는 종횡비를 유지하고 경로를 SVG 컨테이너의 가운데에 배치합니다.

<!-- when not included `preserveAspectRatio` defaults to `xMidYMid` -->
<svg viewBox="0 0 16 16" height="60" width="120">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

preserveAspectRatio 가 none 으로 설정된 경우 아이콘이 상자에 맞게 늘어납니다.

<svg viewBox="0 0 16 16" height="60" width="120" preserveAspectRatio="none">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

preserveAspectRatio 에는 다른 많은 값이 있지만이 두 값은 훨씬 일반적입니다.

preserveAspectRatio - 애트리뷰트 충족 및 슬라이스

preserveAspectRatio 속성은 선택적 매개 변수가 있습니다 meet | slice . 기본 동작은 meet 는 폭 또는 뷰 박스의 높이 중 어느 하나를 채울 때까지 x 및 y 차원 모두의 콘텐츠 뻗어있다. 대안 - slice 는 내용의 종횡비를 보존하지만 뷰 박스의 너비와 높이를 모두 채울 때까지 (그래도 viewBox를 오버 플로우하는 내용을 잘라내어) 그래픽의 크기를 조정합니다.

이것은 slice 를 사용하는 예입니다.

<svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin slice">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />

다음과 같이 렌더링됩니다.

그리고 meet 사용하는 같은 예제

    <svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin meet">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

다음과 같이 렌더링됩니다.