[CSS] 간단하게 SVG 적용하는 법

SVG란?

SVG(Scalable Vector Graphics)는 말그대로 확장 가능한 벡터 그래픽입니다.

벡터 그래픽이기 때문에 화질이 선명하며, 용량이 적습니다.

또한 SVG는 그 자체로 이미지 파일이자 소스파일이기 때문에 일러스트레이터와 같은

이미지 툴이나 코드에디터에서 바로 편집이 가능하다는 장점이 있습니다.

하지만 지원하지 않는 브라우저도 있으니 (ie 8이하 또는 안드로이드 2.3이하 버전) 참고해주세요.

 

* SVG 이미지 다운받을 수 있는 사이트 하나 추천해드리겠습니다.

 

Material Design Icons

https://design.google.com/icons/

Material Icons

-

구글에서 제공하는 아이콘이기 때문에 구글 관련 UI에 사용되는 각종 아이콘들을 다운받아 보실 수 있습니다.

또한 웹폰트 뿐만 아니라 안드로이드나 아이폰에서도 적합한 SVG와 PNG 파일로도 제공 하고 있습니다.

 

라이센스 참고

https://creativecommons.org/licenses/by/4.0/

Creative Commons — Attribution 4.0 International — CC BY 4.0

* 상업적으로 이용가능하다고 되어있네요!

 

 

SVG 간단한 적용방법

 

먼저 svg 원본 소스파일을 열어보면 이런식으로 길게 나옵니다.

 

 

그대로 코드를 복사해서 웹 문서에 그대로 삽입해줍니다.

svg에 viewBox와 path에 d를 제외하고 모두 지워주셔도 무방합니다.