03-3 SVG 이미지

SVG 파일 형식이란?

원래 작은 크기였던 gif나 jpg/jpeg, png파일을 크게 확대해 나타내면 이미지 테두리 부분이 울퉁불퉁해진다. 이런 이미지를 비트맵 이미지(bitmap image)라고 한다. 반면, 이미지를 아무리 확대하거나 축소해도 원래의 깨끗한 상태 그대로 유지되는 이미지를 백터 이미지(vector image)라고 하는데, 그런 이미지가 SVG 이미지이다.

SVG 이미지 삽입하기

SVG 이미지는 어도비(Adobe) 일러스트레이터(illustrator) 프로그램에서 벡터 이미지를 만든 후 svg 파일로 저장해 만든다. 이렇게 저장한 파일은 웹 문서에서 <img> 태그를 이용해 웹 문서에 삽입할 수 있다.

SVG 파일을 지원하지 않는 브라우저를 위해

이런 경우에는 SVG 이미지 파일 대신 PNG 이미지 파일을 사용해야 한다.

이럴 때는 사용자의 브라우저가 svg 파일을 지원하는지 먼저 테스트해 보고 SVG를 지원하지 않는다면 <img> 태그의 src 속성에 png 파일 경로를 지정해 주는 식으로 사용한다. 이렇게 브라우저에서 특정 기능을 지원하는지 여부를 테스트해 주는 툴이 Modernizr(https://modernizr.com/)이다.