[HTML] SVG 이미지

 

SVG 파일 형식이란?

 

웹 사이트를 표시할 화면 크기가 다양하기 때문에 같은 이미지라도 작게 표현해야 할 때가 있고 크게 표현해야 할 때가 있습니다. 그런데 원래 작은 크기였던 gif나 jpg/jpeg, png 파일을 크게 확대해 나타내면 이미지가 깨지곤 합니다. 이런 이미지를 비트맵 이미지(bitmap image)라고 합니다. 반면, 이미지를 아무리 확대하거나 축소해도 원래의 깨끗한 상태 그대로 유지되는 이미지를 벡터 이미지(vector image)라고 하는데 이것이 SVG 이미지입니다.

SVG 이미지는 크기를 조정해도 이미지가 깨지지 않고 깨끗이 유지되기 때문에 로고나 아이콘에서 많이 사용되며 최근 많은 관심을 끌고 있는 데이터 시각화에서 차트나 다이어그램, 지도 등을 구현할 때도 많이 사용됩니다.