PNG와 SVG 이미지의 차이점

안녕하세요.

오늘은 PNG와 SVG 이미지의 차이점에 대해서 간단하게 알아보도록 하겠습니다.

SVG란?

• 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. (위키피디아)
• svg는 벡터(vector) 이미지를 표현하기 위한 포맷으로 w3c에서 만든 벡터 이미지 표준입니다.

PNG란?

• 포터블 네트워크 그래픽스(Portable Network Graphics; PNG)는 비손실 그래픽 파일 포맷의 하나이다. 특허 문제가 얽힌 GIF 포맷의 문제를 해결하고 개선하기 위해서 고안되었다. PNG는 공식적으로는 "핑"(/pɪŋ/)이라고 읽지만, 대부분은 "피엔지"라고 영어 철자 그대로 읽는다.

  PNG 포맷은 컬러 팔레트 화상과 그레이스케일 화상, 그리고 풀 컬러 화상 방식을 모두 지원한다. 그러나 인터넷 상의 이미지 표시를 염두에 두고 개발되었기 때문에 CMYK 등의 색 공간은 지원하지 않는다. (위키피디아)

PNG와 SVG의 차이

• PNG파일은 Bitmap으로 되어있고, SVG파일은 Vector로 되어있어서 이미지 확대시 차이가 발생합니다.

PNG이미지

SVG이미지

이미지 확대시, PNG 이미지의 경우 aliasing 현상이 생기는데 SVG 이미지의 경우 매끄러운 형태가 유지됩니다.

참조

• http://www.endlessicons.com/free-icons/price-tag-icon/ , 이미지(아이콘) 출처 
• https://ko.wikipedia.org/wiki/PNG
• https://opentutorials.org/course/2418/13666 , 생활코딩