<svg>의 크기 조정은 일반적인 이미지와 매우 다르게 작동하므로 어려운 작업이 될 수 있습니다. 

<svg>를 이미지로 생각하는 대신 사고 방식을 바꾸자.

https://wattenberger.com/guide/scaling-svg 

<svg> 요소는 다른 세계로의 망원경입니다.

다른 웹 페이지의 <iframe> 내부에 있는 모든 것과 마찬가지로 <svg> 요소 내부의 모든 것은 다른 세계에 있습니다.

우리의 망원경은 기본적으로 보통 줌 레벨로 설정되어 있습니다. "단위"는 하나의 픽셀과 같습니다. 그러나 외부 width와 height를 설정하면 망원경을 확대 또는 축소 할 수 있습니다. 망원경의 확대 / 축소를 설정하기 위해 viewBox 속성을 사용합니다.

viewBox 속성은 망원경의 설정을 변경하는 방법입니다.

viewBox는 공백으로 구분 된 4 개의 숫자를 포함하는 문자열로 설정해야 합니다.

• x와 y는 뷰 박스의 왼쪽 위 모서리 위치를 설정합니다. 이 값을 변경하면 우리의 시야가 좌우됩니다.
• width와 height는 보기 상자 내부에 표시되는 "단위"수를 설정합니다. 이 값을 변경하면 뷰가 확대됩니다.

10x10 픽셀 흰색 격자를 사용하여 간단한 svg에 대한 다양한 망원경 설정을 살펴 보겠습니다.