웹 개발을 하다 보면, 공통된 디자인의 svg 인데 크기만 다르게 해서 쓰고 싶은 경우가 종종 생깁니다. 이럴 때 무턱대고 모든 사이즈의 svg 를 받아오면 시간이 많이 걸릴 뿐더러 이미지 용량을 인해 프로젝트가 무거워질 수 있다는 문제가 있을 수 있습니다.
이에 대해 stitches.css 를 사용하고 있는 저는 다음과 같은 방식으로 이미지 리사이징을 시도해 보았습니다.
1) S아이콘 컴포넌트를 만들고, width 와 height 지정하기
SVG 는 일반적인 width height 로는 넓이와 높이를 바꿀 수 없습니다.
2) background size 를 이용해 width 와 height 지정하기
구글링을 통해 본 해법이었으나 이 역시 통하지 않았습니다.
3) 구글링을 통해 알게 된 것이,
The reason why it is tricky to scale SVG is that it does not scale like the other image formats. SVG images have a clearly defined aspect ratio: the ratio of width to the height which makes it difficult to scale with the changing parent container. Other images scale easily because the browser determines the height, width, and aspect ratio of the image, and it adjusts everything accordingly.
출처 : https://www.geeksforgeeks.org/how-to-make-an-svg-scale-with-its-parent-container/
SVG 는 크기를 조정하기 어렵다. SVG 이미지는 clear 하게 비율이 정해져 있기 때문에, 부모 컨테이너에서 크기를 조정하기 어렵다. 다른 이미지들은 크기를 조정하기 쉬운데, 그 이유는 브라우저가 높이, 넓이와 비율을 정하기 때문이다. 라는 것이었습니다.
따라서 저는 SVG 의 고정된 값을 유연하게 바꾸면, 리사이징이 수월할 것이라 생각, svg 파일로 들어가 고정된 상수값이었던 height 와 width 를 auto (또는 100%) 로 지정해 주었습니다.
그리고 그 후 각각의 svg 에 width 와 height 를 지정해주어 이미지 리사이징에 성공하였습니다.
일부는 viewport 를 지정하라는 글도 있었으나, viewport 가 이미 지정되어버린 svg 의 경우 해당 방법이 듣지 않았습니다.
저의 방법으로 이미지 리사이징을 할 수 있게 되었으나, 기본값이 없어져 버렸기 때문에, 해당 svg 를 쓰는 곳마다 모두 height, weight 값을 지정해야 한다는 번거로움이 발생하긴 했습니다.
혹시 더 좋은 방법을 찾게 된다면 아티클을 업데이트해보도록 하겠습니다. 읽어주셔서 감사합니다.
