SVG란

SVG란

 

• SVG는 Scalable Vector Graphics의 약어이며, 확장 가능한 벡터 그래픽이다.
• 2차원 그래픽 애플리케이션과 이미지, 관련 그래픽 스크립트 인터페이스 집합을 기술하기 위한 마크업 언어이다.
• 픽셀을 이용하여 그림을 그리는 png, jpg 파일들과 다르게 벡터를 기반으로 이미지를 표현한다.
  - 크기를 조절함에 따라 깨지는 것이 없고, 용량이 작기 때문에 웹에서 자주 사용하는 이미지 형식이다.
• SVG 이미지는 마크업으로 쓰이므로 텍스트 에디터로 작성하고 또 작성된 이미지를 수정할 수도 있다.
• 벡터를 기반으로 그려지므로 사이지를 크게 해도 깨지지 않는다.
• XML 포맷으로 파일이 작성되므로 JS나 CSS로 조작이 가능하다.
• [장점]
  - 애니메이션을 적용할 수 있다.
  - 편집 가능한 레이어가 있다.
  - 반응형이며, 화면 크기에 따라 그래픽 크기가 변경된다.
  - CSS로 사용자가 정의할 수 있다.
• [단점]
  - 사진에 적합한 형식이 아니다.
  - 오래된 브라우저 및 이메일 응용 프로그램은 때때로 SVG를 읽을 수 없다.
  - 인쇄에 적합하지 않다.

 

PNG란

 

• PNG는 Portable Network Graphics을 나타낸다.
• 래스터 이미지 파일 형식이다.
  (모든 PNG 이미지와 그래픽이 픽셀로 구성되어 있음을 의미)
• 벡터 그래픽과 같이 크기를 조절할 수 없다.
• 웹에 게시 된 이미지에 일반적으로 사용되는 파일 형식이다.
• JPEG보다 해상도가 더 좋고 디지털 디자인에 좋다.
• 투명한 배경을 가진 로고 및 일러스트레이션을 위한 파일 유형이다.
• [장점]
  - 투명한 배경을 지원한다.
  - 컷 아웃 로고를 모든 유형의 디자인에 추가할 수 있다.
  - 디지털은 JPEG보다 품질이 좋다.
• [단점]
  - 확대하면 픽셀화 된다.
  - 반응형 디자인에서 크기는 데스크톱에서 모바일로 동일하게 유지된다.
  - 레이어가 없다.
  - 쉽게 편집할 수 없다.