SVG 태그

이번 프로젝트를 하면서 처음으로 SVG태그라는 것을 보았다 평소에 fontawsome에서 아이콘을 쓰고 있었는데 여기에 SVG태그가 사용이 되고 있었고 클론 코딩 중에 SVG태그를 사용할 일이 생겨서 한번 찾아보았다

 

 

 

 

SVG 만능설

이 svg태그는 백터형 이미지 포맷이다 이와 비교되는 것으로는 이미지 파일(jpg,png등) 이 있다. 이 둘의 차이점을 보면

 

이미지 파일을 이루는 것은 작은 픽셀이어서 크기를 키울수록 픽셀이 깨지는 화질 차이가 나지만 svg는 백터로써 크기가 변해도 화질이 깨지지 않는다 svg는 각 좌표에 점을 찍어서 이으는 개념으로 만들어지기 때문이다 그렇다 보니 이미지 파일은 이 픽셀을 저장하기 위해 용량이 svg파일보다 상대적으로 크다.

svg파일은 점을 찍어서 이으는 개념인 백터이므로 애니메이션을 설정할 수 있다. 또한 html태그로 있어 별도의 파일없이 html에 인라인으로 들어갈 수 있다.

 

간단한 정리

	이미지파일	svg
표현 방식	픽셀	백터
용량(상대적으로)	큼	작음
파일여부	저장 파일에서 불러와야함	html에 inline으로 들어감

 

 

 

SVG 태그 사용하기

 

아이콘을 사용하다보면 크기를 똑같이 맞춰야 한다 svg도 마크업 스타일 속성이라 다른 태그와 마찬가지로 css 적용이 된다

<svg witdth="17px" height="17px" preserveAspectRatio="none"></svg>

preserveAspectRatio="none" 속성으로 크기를 강제로 늘리거나 줄일 수 있다. 서로 다른 아이콘의 크기를 맞출 때 사용했다.

 

<svg width="current" height="current">...</svg>

크기를 current로 맞춰주면 React 컴포넌트에서 props를 통해서 크기를 지정해줄수 있다.

 

 

 

 

React에서 사용하기

 

svg파일을 직접 html에 넣어 사용할수 있지만 react에서 사용할 때는 svg폴더를 따로 분류해서 사용을 하였다 따라서 이 svg파일을 import 해야 했다 이는 컴포넌트의 형태로 받아서 사용할 수 있다.

import { ReactComponent as GithubIcon } from '../../svg/github.svg';


<GithubIcon/>//으로 아이콘 사용가능

 

이 방법의 장점으로는 이 svg파일이 컴포넌트이므로 styledcomponent시에 css를 입힐수 있다.

 

const githubCSS = styled(GithubIcon)`
`

 

 

 

 

 

번외) SVG태그 훔쳐오기

 

클론코딩할때 유용하다

깃허브 상단에 있는 navbar이다

위에 깃허브 아이콘을 가져오고 싶다고 하자

 

f12를 눌러 개발자 도구에서 저 아이콘을 선택하면

깃허브 아이콘의 svg태그

대충 이러한 svg 태그가 선택이 된다

 

svg태그에서 오른쪽 클릭을 하고 copy element를 한 후에 사용하고 싶은 파일에 붙여 넣기 하면 된다 말했듯이 svg태그는 백터로 이루어져 있어 코드만 가져오면 어디서든 같은 결과물을 얻을 수 있다.

 

 

 

 

 

 

 

 

추후 애니메이션 기능을 사용하면 한번 적어보도록 하겠다