SVG를 못 넣어 슬펐던 사람

SVG.. 그룹 프로젝트를 할 때 써보긴 했었지만, 그 때는 다른 사람들이 이미 셋팅을 해둔걸 사용하거나
클론 프로젝트라 웹에서 긁어와서 사용하면 됐어서 쉽게 사용했었다.

근데 이제 혼자 개발하게 되고, 카카오톡은 웹이 아니라서 긁어올 수가 없다보니.. 사용을 못하겠더라.
그래서 SVG 얻을 수 있는 사이트 찾고 어떻게 넣나 찾아봤는데.. 시간 낭비만 엄청 했었다.

그나마 도움이 됐던 곳은 https://nykim.work/35 여기였고, https://www.flaticon.com 사이트에서 다운을 받아 쓰면 된다는 걸 알게 됐다.
나는, 바로 svg path 태그를 주는 곳이 있는지 알았는데, 다운 받고 나서 열어서 source에서 긁어서 사용해야 하는 것이었다.

아무튼 그렇게 긁어와 사용을 했지만 또 문제가 발생했다.
SVG마다 다른 것 같기는 한데, 맨 처음에 다운 받았던 그림은 뭔가 잘려서 나왔고.... 이상하게 됐었다.
하다하다 잘 안되니까 다른 그림을 다운받았고 그건 잘 됐었는데 크기 조절이 안됐다.
삽질의 삽질을 하다가.. 속성 값을 지웠다 넣었다 하면서 꼭 필요한 속성이 뭐가 있는지 알게됐다.

다운받은 SVG 파일은

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="235.51px" height="235.511px" viewBox="0 0 235.51 235.511" style="enable-background:new 0 0 235.51 235.511;"
	 xml:space="preserve">
<g>
	<g>
		<path d=..

뭐 이런 형태로 되어있다. 저 svg 태그에 적혀 있는 값들 모두가 꼭 필요한 건 아니다.
이래저래 지워보니

<svg width="50px" height="50px" viewBox="0 0 235.51 235.511">

이렇게만 있어도 되더라. viewBox는 특히 중요한 것 같고. width, height랑 동일하고 veiwBox 설정했더니 안보임....
크기 조절도 잘 되고 그림도 잘 보여서 일단 이렇게 사용을 해보자. 하고 있다. 이제 적절한 svg를 찾아서 적용할 차례다...