PNG (Portable Network Graphics)
- Raster(비트맵) 이미지 포맷
- 픽셀(pixel)로 이루어진 이미지. 확대/축소 시 품질이 저하될 수 있음.
- 사진, 복잡한 이미지, 고해상도 이미지에 적합. 배경이 투명한 이미지를 저장할 수 있어 UI 요소(아이콘, 버튼) 등에 자주 사용됨.
- 이미지의 해상도와 복잡성에 따라 파일 크기가 커질 수 있음.
- PNG는 알파 투명도(Alpha Transparency)를 지원하여 부분 투명 및 완전 투명 이미지를 사용할 수 있음.
- 모든 웹 브라우저에서 기본적으로 지원.
SVG (Scalable Vector Graphics)
- Vector(벡터) 이미지 포맷
- 수학적 좌표와 경로로 이루어진 이미지. 확대/축소 시 품질 손실이 없음.
- 로고, 아이콘, 단순한 그래픽, 애니메이션 등에서 자주 사용. 해상도와 관계없이 선명한 이미지를 제공하기 때문에 반응형 웹 디자인에 적합.
- 이미지의 복잡성에 따라 다르지만, 일반적으로 복잡한 비트맵 이미지보다 작음.
- SVG도 투명도를 지원하며, CSS로 스타일을 지정하거나 애니메이션을 적용할 수 있음.
- 대부분의 최신 웹 브라우저에서 지원.
- SVG는 XML 기반의 텍스트 파일로, 텍스트 편집기로 수정이 가능하고, CSS나 JavaScript로 동적 제어 및 애니메이션이 가능함.
차이
| 속성 | PNG | SVG |
|---|---|---|
| 포맷 유형 | 래스터 이미지 (비트맵) | 벡터 이미지 |
| 확대/축소 | 확대 시 품질 저하 | 무한 확대 가능, 품질 저하 없음 |
| 용도 | 사진, 복잡한 이미지, 투명 배경이 필요한 경우 | 로고, 아이콘, 단순 그래픽, 반응형 디자인 |
| 파일 크기 | 이미지 해상도에 따라 크기가 커질 수 있음 | 보통 복잡한 비트맵 이미지보다 작음 |
| 투명도 | 알파 투명도 지원 | 투명도 및 CSS 스타일링 지원 |
| 애니메이션 | 애니메이션 지원 없음 | CSS, JavaScript로 애니메이션 가능 |
| 편집 | 이미지 편집 프로그램 필요 (포토샵 등) | 텍스트 편집기에서 직접 수정 가능 |
- PNG는 픽셀 기반 이미지로 사진이나 복잡한 이미지에 적합하며, 투명한 이미지를 사용할 수 있습니다.
- SVG는 벡터 기반 이미지로 로고, 아이콘 등 크기와 관계없이 선명하게 유지되어야 하는 이미지에 적합하며, CSS 및 JavaScript로 제어할 수 있습니다.
슬기로운개발생활🤖