SVG vs PNG 비교: 벡터와 래스터 이미지의 차이와 선택 기준

SVG와 PNG는 근본적으로 다른 문제를 해결합니다. SVG는 수학적 도형으로 이미지를 저장해 무한히 확대해도 깨지지 않고, PNG는 색상 픽셀의 격자로 이미지를 저장합니다. 잘못된 포맷을 선택하면 성능이나 시각적 품질, 둘 중 하나를 잃게 됩니다.

SVG와 PNG의 근본적 차이

SVG와 PNG의 차이는 벡터 그래픽과 래스터 그래픽의 차이와 같습니다.

SVG(Scalable Vector Graphics)는 XML 기반 포맷으로, 도형, 선, 곡선, 색상을 수학적 정의로 기술합니다. SVG를 확대하면 브라우저가 각 도형을 새 크기로 다시 계산하고 그려냅니다. 16px 파비콘이든 16,000px 현수막이든 항상 선명합니다.

PNG(Portable Network Graphics)는 래스터 포맷으로, 이미지를 특정 색상 값을 가진 픽셀 격자로 저장합니다. 고정된 해상도를 가지며, 원래 크기보다 확대하면 흐릿하고 픽셀이 보입니다. 축소하면 필요 이상의 데이터를 다운로드하게 됩니다.

이 차이가 파일 크기, 확장성, 편집 워크플로, 각 포맷이 잘 처리하는 이미지 유형까지 모든 것을 결정합니다.

SVG가 더 나은 선택인 경우

SVG는 원래 벡터 아트워크로 제작된 모든 그래픽에 탁월합니다:

• 로고 — 로고는 32px 브라우저 탭 아이콘부터 전체 너비 히어로 배너까지 모든 크기에서 선명해야 합니다. SVG는 하나의 파일로 해결합니다. PNG라면 여러 해상도 파일이 필요합니다.
• 아이콘 — UI 아이콘, 내비게이션 아이콘, 소셜 미디어 아이콘. 실제 사례로, 50개 카테고리 아이콘이 PNG로 총 1.2MB였는데 SVG로 바꾸자 95KB로 줄어든 이커머스 사이트가 있습니다.
• 일러스트레이션과 다이어그램 — 기술 다이어그램, 순서도, 지도, 깔끔한 선과 플랫 컬러의 인포그래픽. SVG에서는 텍스트가 선택 가능하고 검색엔진에 인덱싱됩니다.
• 애니메이션 — SVG 요소는 CSS나 JavaScript로 애니메이션할 수 있어, 가벼운 로딩 스피너, 마이크로 인터랙션, 인터랙티브 차트를 비디오 없이 구현할 수 있습니다.
• 파비콘 — 최신 브라우저는 SVG 파비콘을 지원하며, 어떤 화면 밀도에서도 선명합니다. 파비콘 생성기로 어떤 이미지든 파비콘으로 만들 수 있습니다.

W3Techs에 따르면 전 세계 웹사이트의 65.5%가 SVG를 사용하고 있으며, PNG와 JPEG에 이어 세 번째로 많이 쓰이는 이미지 포맷입니다. 반응형 디자인 수요와 성능 이점 덕분에 매년 약 8%씩 채택률이 늘고 있습니다.

PNG가 더 나은 선택인 경우

픽셀 수준의 디테일이 중요하거나 이미지 콘텐츠가 본질적으로 래스터인 경우 PNG가 정답입니다:

• 투명 배경이 필요한 사진 — 투명 배경의 상품 누끼, 레이어드 합성. PNG는 사진 디테일을 유지하면서 완전한 알파 투명도를 지원합니다. 투명도가 필요 없는 사진이라면 JPEG가 보통 더 적합합니다.
• 스크린샷 — 스크린 캡처에는 정밀한 UI 요소, 안티앨리어싱된 텍스트, 미세한 그라데이션이 포함됩니다. PNG가 이를 정확하게 보존합니다.
• 색상이 다양한 복잡한 아트워크 — 디지털 페인팅, 텍스처, 포토리얼리스틱 일러스트처럼 깔끔한 벡터 도형으로 단순화할 수 없는 이미지.
• 텍스트가 포함된 래스터 그래픽 — 사진과 텍스트가 결합된 콘텐츠의 픽셀 정확도가 필요할 때, PNG는 텍스트 가장자리 주변의 압축 아티팩트를 방지합니다.

파일 크기와 성능 비교

SVG가 잘 처리하는 유형(아이콘, 로고, 단순 일러스트)에서 파일 크기 차이는 극적입니다:

SVG 파일은 Gzip이나 Brotli 압축(대부분의 웹 서버에서 표준)으로 전송 시 50~70% 추가 압축이 가능합니다. 20KB SVG가 네트워크를 통해 6~8KB만 전송되는 셈입니다.

성능 이점은 파일 크기를 넘어섭니다. SVG는 HTML에 직접 인라인하면 HTTP 요청 자체를 없앨 수 있습니다. srcset 속성이나 반응형 이미지 마크업 없이도 기기의 네이티브 해상도로 렌더링됩니다. 텍스트 기반이라 캐시에 유리하고 버전 관리에서 diff 비교도 쉽습니다.

사진, 디테일한 텍스처, 수천 가지 고유 색상을 가진 이미지에는 SVG가 이점이 없습니다. 이런 이미지를 SVG로 변환하면 래스터 데이터를 base64로 임베드하거나(파일이 더 커짐) 단순 도형으로 트레이스해서 디테일이 사라집니다. 이런 이미지에는 PNG, JPEG, 또는 WebP나 AVIF 같은 최신 포맷이 적합합니다.

SVG vs PNG: 한눈에 비교

실전 시나리오: 기업 웹사이트 리디자인

기업 웹사이트를 리디자인한다고 가정합시다. 브랜드 로고, 내비게이션 및 기능 아이콘 30개, 히어로 사진, 제품 스크린샷이 필요합니다. 포맷 배정은 이렇게 합니다:

• 로고 → SVG. 헤더(작게), 푸터(중간), 소개 페이지(크게) 세 곳에 사용하되 하나의 SVG 파일로 해결. 레티나 디스플레이에서도 선명하고 약 5KB입니다.
• 아이콘 30개 → SVG 스프라이트. 30개 아이콘을 하나의 파일에 담아 총 40~60KB. PNG 아이콘 2~3개 무게보다 가볍습니다. CSS로 색상과 크기를 제어합니다.
• 히어로 사진 → SVG도 PNG도 아님. JPEG나 WebP로 가장 작은 파일에 적절한 화질을 유지합니다. 이미지 최적화 가이드에서 자세한 방법을 확인하세요.
• 제품 스크린샷 → PNG. 스크린샷에는 UI 텍스트와 정밀한 픽셀 렌더링이 있어 무손실 보존이 필요합니다.

SVG와 PNG 변환 방법

브라우저에서 바로 두 포맷 사이를 변환할 수 있습니다. 서버 업로드도 소프트웨어 설치도 필요 없습니다. Vizua는 모든 파일을 사용자의 기기에서 로컬로 처리합니다:

• SVG를 PNG로 변환 — 원하는 해상도로 SVG를 래스터화
• 이미지 벡터화 — PNG, JPEG 등 래스터 이미지를 SVG 벡터로 변환
• 파비콘 생성기 — 어떤 이미지든 파비콘으로 생성 (SVG 파비콘 포함)

웹사이트의 모든 이미지에 적합한 포맷을 선택하는 더 넓은 가이드가 필요하다면, 웹용 이미지 파일 크기 가이드에서 용도별 권장 크기와 포맷을 확인하세요.

자주 묻는 질문