2026-07-28·4 min read
PNG vs SVG: 로고, 아이콘, 그래픽에 어느 형식?
PNG와 SVG 형식의 실용적인 비교 — 로고, 아이콘, 일러스트레이션, 웹 그래픽에 각각을 언제 사용할지.
PNG와 SVG 모두 로고와 그래픽에 인기 있는 형식입니다 — 그러나 매우 다르게 작동합니다. 잘못된 것을 선택하면 흐릿한 로고나 어디서나 열 수 없는 파일이 됩니다. 결정하는 방법을 소개합니다.
PNG vs SVG: 핵심 차이
- PNG(Portable Network Graphics)는 래스터 형식입니다 — 이미지를 픽셀 그리드로 저장합니다. 200×200 PNG는 정확히 40,000개의 픽셀이 있습니다. 확대하면 흐릿해집니다.
- SVG(Scalable Vector Graphics)는 벡터 형식입니다 — 모양을 수학적 지침으로 저장합니다. SVG 로고는 파비콘(16×16)부터 광고판까지 모든 크기에서 완벽하게 선명하게 보입니다.
PNG를 사용할 때
- 복잡한 이미지나 사진: SVG는 복잡한 모양을 설명할 수 있지만 사진에는 비실용적
- 크로스 플랫폼 호환성: PNG는 어디서나 열림 — 브라우저, 워드 프로세서, 이메일, 메시징 앱
- 고정 출력 크기가 필요할 때: 소셜 미디어 게시물, 알려진 DPI 인쇄, 픽셀 완벽한 UI 자산
- 스크린샷 및 UI 목업: 본질적으로 래스터, PNG가 올바른 형식
- SVG를 사용할 수 없을 때: 고해상도 PNG(폭 2000+ 픽셀)가 대부분의 목적에 잘 작동
SVG를 사용할 때
- 로고 및 브랜드 마크: SVG 로고는 모든 크기에서 선명하게 유지 — 웹사이트 헤더, 모바일 앱 아이콘, 인쇄 브로셔
- 아이콘: SVG의 UI 아이콘이 레티나/고DPI 화면에서 완벽하게 확장됨
- 모양으로 만든 일러스트레이션: 차트, 다이어그램, 인포그래픽, 일러스트레이션
- 애니메이션: SVG는 CSS와 JavaScript 애니메이션 지원
- 반응형 웹 디자인: SVG가 브라우저 창과 함께 자동으로 확장
PNG vs SVG 비교
| 기능 | PNG | SVG |
|---|---|---|
| 확장성 | 고정 크기(픽셀) | 무한(벡터) |
| 파일 크기(로고) | 20~200KB | 5~50KB |
| 사진 지원 | 예 | 아니오 |
| 투명도 | 예 | 예 |
| 애니메이션 | 아니오 | 예(CSS/JS) |
| 브라우저 지원 | 보편적 | 모든 최신 브라우저 |
| 이메일 지원 | 보편적 | 제한(이메일에서 피하세요) |
| 편집 가능성 | 래스터 편집기 필요 | 모든 텍스트 편집기 또는 Illustrator |
둘 다 함께 사용하기
- 많은 워크플로우가 두 형식을 모두 사용합니다:
- 편집과 확장을 위해 SVG를 마스터 로고 파일로 유지
- 소셜 미디어, 프레젠테이션, 이메일용으로 특정 크기의 PNG 버전 내보내기
- 레티나 디스플레이용으로 2× PNG(예: 200×200 로고의 경우 400×400) 사용
- PNG 로고만 있으면 이미지 크기 조정기로 고해상도 버전을 만들고 웹 사용을 위해 PNG → WebP를 사용하세요.