[Image] SVG와 PNG의 차이

웹 개발을 하다보면 이미지를 많이 쓰게 된다. 어떤 한 프로젝트에서 SVG와 PNG를 같이 쓰는 걸 보고 차이가 궁금해서 찾아보았다.

 

SVG (Scalable Vector Graphics) : 2차원 벡터 그래픽을 표현하기 위한 XML기반의 파일 형식이다. Vector로 되어있다.

PNG(Portable Network Graphics) : 비손실 그래픽 파일 포맷의 하나로 GIF의 문제점을 해결하기 위해 고안된 파일 형식이다. Bitmap으로 되어있다.

 

이 둘의 가장 큰 차이점은 확대할 때 SVG는 그대로 확대되지만 PNG는 aliasing 현상이 일어난다. 즉, 이미지가 깨진다.

SVG 파일의 확대

PNG파일의 확대

 

위와 같이 이미지의 확대에서 차이가 있다. 또한 SVG가 PNG보다 용량도 적으며 출력도 빠르다.

그런데 왜 PNG를 쓰고있었느냐는 질문이 자연스레 나올텐데 SVG는 IE8 이하에서는 지원되지 않기 때문이다.

 

그럼 IE8이하를 신경쓰지 않는다면, SVG를 써도되느냐는 질문이 나올텐데, 꼭 그렇지만은 않다.

SVG는 수학적 계산능력을 요구한다. 단순한 이미지야 신경안써도 되지만, 복잡해지고 크기가 커질수록 속도 저하가 발생된다. 그래서 SVG는 로고와 같은 단순화된 이미지에서 많이 활용된다.

 

그러므로 단순한 이미지가 많을 경우 한국인의 정서에 맞게 용량이 적고 출력 속도가 빠른 SVG를 UI 디자이너들이 많이 사용하는 것이다.