아이콘을 내보낼 때 보통 SVG와 PNG 두 가지 선택지가 있습니다. 화면에선 똑같아 보여서 차이를 무시하기 쉽지만 — 레티나 화면에서 아이콘이 흐릿해지거나, 2 KB짜리 그래픽이 50 KB로 불어나는 순간 차이가 드러납니다. 이 글은 둘의 실제 차이와 각각 언제 써야 하는지 정리합니다.
핵심 차이
PNG는 래스터(raster) 포맷으로, 고정된 픽셀 격자를 저장합니다. SVG는 벡터(vector) 포맷으로, 브라우저가 어떤 크기로든 다시 그리는 수식(path·도형·선)을 저장합니다. 아래의 거의 모든 차이가 이 하나의 구분에서 나옵니다.
SVG가 유리할 때
- 웹이나 최신 앱 UI를 만들 때. SVG는 모든 크기와 픽셀 밀도에서 선명함을 유지합니다.
- CSS로 색상을 바꾸거나 애니메이션을 주고 싶을 때.
- 파일 크기가 중요할 때 — 단순한 아이콘은 고해상도 PNG보다 SVG가 더 작은 경우가 많습니다.
- 폰·4K 모니터·인쇄 스타일시트에서 모두 통하는 하나의 에셋이 필요할 때.
PNG가 유리할 때
- 대상이 SVG를 지원하지 않을 때 — 다수의 이메일 클라이언트, 일부 레거시 CMS, 일부 채팅/마켓플레이스 도구는 여전히 래스터 이미지만 받습니다.
- 파비콘, 앱스토어 에셋, OG/소셜 미리보기처럼 고정 픽셀 크기가 필요할 때.
- 아이콘이 매우 세밀하거나 사진에 가까워 벡터 path의 이점이 없을 때.
원칙: 브라우저에서 렌더되는 것은 기본적으로 SVG, 특정 대상이 고정 래스터 이미지를 요구할 때만 PNG로 내보내세요.
색상과 선 두께에 대하여
SVG는 그저 마크업이라 나중에도 색상이나 선 두께를 바꿀 수 있습니다 — currentColor를 쓰면 CSS 한 줄로도 가능합니다. PNG는 색상이 영구히 박혀 있어 바꾸려면 다시 내보내야 합니다. 라이트/다크 모드나 hover 상태처럼 아이콘에 테마를 입힐 계획이라면 SVG가 중복 에셋을 크게 줄여 줍니다.
Icony에서는 색상·크기·선 두께를 정확히 지정한 뒤 같은 아이콘을 SVG 또는 PNG로 내보낼 수 있어, 페이지를 떠나지 않고 필요한 포맷을 바로 받을 수 있습니다.