SVG와 PNG는 디지털 이미지에 대한 근본적으로 다른 두 가지 접근법을 대표합니다. SVG는 수학적 도형(벡터)으로 그래픽을 정의하여 무한히 확대할 수 있고, PNG는 특정 해상도의 고정 픽셀 격자(래스터)를 저장합니다.
둘 중 어떤 것을 선택하느냐에 따라 파일 크기, 확장성, 편집 가능성, 성능이 달라집니다. 각각의 적합한 용도를 파악하면 아이콘에 PNG를 쓰거나 사진에 SVG를 쓰는 흔한 실수를 피할 수 있습니다.
Comparison Table
| 특성 | SVG | PNG |
|---|---|---|
| 유형 | 벡터 (수학적 경로) | 래스터 (픽셀 격자) |
| 확장성 | 무한 (화질 저하 없음) | 고정 해상도 |
| 단순 그래픽 파일 크기 | 매우 작음 (5 KB 미만인 경우 다수) | 보통 |
| 복잡한 이미지 파일 크기 | 매우 커질 수 있음 | 예측 가능 |
| 투명도 | 기본 지원 | 알파 채널 지원 |
| 애니메이션 | CSS, SMIL, JavaScript | APNG (제한적) |
| CSS 스타일링 | 완전 지원 (인라인 SVG) | 불가 |
| JavaScript 인터랙션 | 전체 DOM 접근 | Canvas만 가능 |
| 사진 | 부적합 | 양호 (무손실) |
| 브라우저 지원 | 우수 | 보편적 |
Detailed Analysis
도형, 경로, 텍스트로 표현할 수 있는 그래픽에는 SVG가 정답입니다. 아이콘, 로고, 일러스트레이션, 차트, 다이어그램은 본질적으로 SVG에 적합합니다. 일반적인 아이콘을 SVG로 만들면 1~5 KB에 불과하면서도 4K 디스플레이, Retina 화면, 모바일 어디서든 완벽하게 선명합니다. 같은 아이콘을 PNG로 만들면 디바이스별로 선명하게 보이려면 여러 해상도(1x, 2x, 3x)를 준비해야 하므로 파일 크기와 복잡성이 배로 늘어납니다.
PNG는 현실 세계의 시각적 복잡성을 담아내는 이미지에 적합합니다. 스크린샷, 사진(보통은 JPEG가 더 낫지만), 텍스처, 스캔 문서 등은 벡터 경로로 의미 있게 표현할 수 없는 이미지들입니다.
성능은 단순하지 않습니다. 경로가 수백 개이고 필터가 적용된 SVG는 브라우저가 매 프레임마다 모든 도형을 계산해야 하므로 PNG보다 느릴 수 있습니다. 매우 복잡한 일러스트레이션의 경우, 필요한 크기의 PNG로 변환하는 것이 오히려 성능상 유리할 수 있습니다.
SVG는 웹에서 고유한 능력을 제공합니다. CSS로 색상·크기·애니메이션을 변경하고, JavaScript로 인터랙션을 추가하며, 검색 엔진이 텍스트를 읽고, 접근성 도구가 구조를 파싱할 수 있습니다. PNG로는 이 중 어떤 것도 불가능합니다.
When to Use SVG
- 모든 크기에서 사용되는 아이콘, 로고, 브랜드 마크
- 차트, 그래프, 데이터 시각화
- 사용자 입력에 반응하는 인터랙티브 그래픽
- 디바이스에 따라 스케일링이 필요한 일러스트레이션
- CSS 테마 적용이 필요한 그래픽 (다크모드 색상 전환 등)
- 접근성과 검색 가능성이 중요한 그래픽
When to Use PNG
- 스크린샷 및 화면 캡처
- 사진 및 자연 이미지 (JPEG의 손실이 과도한 경우)
- 복잡한 래스터 아트워크 및 텍스처
- 스캐너나 카메라로 촬영한 이미지
- 픽셀 단위 디테일이 중요한 게임 에셋
- 벡터 도형으로 표현할 수 없는 모든 이미지
Conclusion
도형과 경로로 정의되는 스케일러블 그래픽에는 SVG를, 실제 세계에서 캡처한 래스터 이미지에는 PNG를 사용합니다. 현대 웹에서 아이콘과 로고는 거의 항상 SVG여야 하며, 사진은 JPEG나 WebP를 기본으로 하되 무손실 품질이나 투명도가 필요한 경우에만 PNG를 사용하면 됩니다.