# svg 크기 조절 및 가운데 정렬 방법 ###### tags: `tech sharing` 단순히 svg에 width와 height를 지정하는 것으로는 이미지가 원하는 크기에 맞게 축소가 되지 않았다. ## viewport svg를 볼 수 있는 section을 말한다. `height로` `viewport의` 크기를 지정할 수 있다. ## viewbox viewport와 비슷하지만 수평으로 옆으로 돌리는 `pan`과 확대 축소 기능이 가능하다. ``` viewBox = <min-x> <min-y> <width> <height> ``` 첫 두개의 숫자는 viewbox의 position을 나타낸다. 이것은 panning과 관련이 있다. 뒤의 두개의 숫자는 zoom과 관련이 있다. 이 숫자들이 크면 축소가 된 것처럼 보이고 숫자들이 작으면 확대가 된 것처럼 보인다. ## svg 자식 가운데 정렬 svg에서 자식들을 가운데 정렬하는 방법이 따로 있는 것이 아니라 가로 세로 길이에 따라서 viewbox의 위치를 조절해주어야한다.