SVG 이미지는 아이콘이나 로고 등을 웹 문서에 삽입할 때 많이 사용한다. 특히 CSS 스타일을 조절할 수 있기 때문에 편리하게 사용할 수 있다
SVG는 scale이 가능한 벡터 이미지라는 뜻이다. 여기에서 scalable 이라는 부분이 중요한데 이미지 크기를 늘리거나 줄이더라도 화질에 영향을 받지 않는다는 의미이다.
svg 파일을 사용하면 간단한 코딩을 통해 이미지를 수정할 수도 있다 예를 들어 간단히 색상 값만 수정해서 같은 이미지를 반복 사용할 수 있다
SVG 파일의 수정이 간단한 것은 SVG가 이미지 파일 뿐만 아니라 XML 문법을 기반으로 하는 문서이기 때문이다 그래서 웹페이지에서 svg 이미지를 열면 이미지 프로그램이 아니라 웹 브라우저가 실행되면서 브라우저 창에 소스코드로 표시된다
SVG는 XML 문법으로 이루어진 소스이기 때문에 웹 문서 안에 소스 코드 형태로 삽입할 수 있다 그리고 기존에 알고 있는 CSS 속성을 사용해서 SVG 이미지 전체 또는 일부에 애니메이션이나 CSS3 기능을 적용할 수 있다
반응형 웹의 특성 상 화면 너비에 따라 레이아웃이 바뀌어야 하는데, 이때 로고나 아이콘 이미지는 화면 너비에 맞게 확대하거나 축소해서 표시해야 할 경우가 많다 기본 이미지 파일은 확대하거나 축소했을 때 이미지가 퍼져 보이거나 일그러지는 등 화질에 영향을 많이 주지만 SVG 이미지는 그런 걱정을 덜 수 있다
최근에는 데이터를 텍스트로 풀어 쓰는 것보다 그래프나 이미지로 시각화해서 보여주는 경우가 많은데 이럴 때 사용할 수 있는 이미지 형식이 SVG이다.
위 주소는 머티리얼 아이콘 사이트이다. 이곳에는 머티리얼 디자인 가이드에서 제공하는 아이콘 폰트가 있다 아이콘 폰트란 텍스트를 입력하듯 아이콘 이름만 입력해서 아이콘을 표시하는 방법이다
이곳의 아이콘은 PNG나 SVG 파일로도 제공되므로, 화살표, 플러스,마이너스,장바구니,체크 표시,SNS 아이콘, 검색 아이콘 등 자주 사용하는 아이콘은 따로 직접 만들지 않아도 이곳에서 구할 수 있다