SVG와 PNG는 근본적으로 다른 목적을 가집니다. SVG는 벡터 형식으로 도형, 경로, 텍스트를 수학적 설명으로 저장하고 품질 손실 없이 어떤 크기로도 크기 조정됩니다. PNG는 래스터 형식으로 픽셀을 그리드에 저장하며 확대 시 품질이 저하됩니다. 잘못된 형식을 선택하면 파일 크기, 품질, 또는 둘 다를 잃게 됩니다.

SVG란?

SVG(Scalable Vector Graphics)는 XML 기반 벡터 형식입니다. 픽셀을 저장하는 대신 지침을 저장합니다: "X,Y 위치에 반지름 R인 원을 그리고 #FF0000 색상으로 채우세요." 주요 특성:

해상도 독립적: SVG 로고는 16×16 px(파비콘)와 1600×1600 px(인쇄)에서 동일하게 보입니다 — 각 크기에서 출력 픽셀을 새로 계산합니다
단순 그래픽의 작은 파일 크기: 몇 가지 도형이 있는 로고는 SVG로 2~10 KB일 수 있습니다. 인쇄 해상도의 PNG로는 같은 로고가 500 KB~2 MB가 될 수 있습니다
텍스트 편집 가능: SVG 텍스트는 실제 텍스트 — 스크린 리더가 읽을 수 있고, 검색 엔진이 색인화할 수 있으며, 재디자인 없이 폰트를 변경할 수 있습니다
CSS로 스타일 지정 가능: SVG 요소는 CSS와 JavaScript에 반응합니다 — 추가 이미지 파일 없이 색상, 호버 상태, 도형을 애니메이션으로 만들 수 있습니다
사진에는 적합하지 않음: SVG는 사진의 세부 사항을 표현할 수 없습니다. 사진을 벡터로 트레이싱하면 모든 세부 사항을 잃거나 엄청난 파일 크기가 됩니다

PNG란?

PNG(Portable Network Graphics)는 무손실 래스터 형식입니다. 저장 시 품질 손실 없이 정확한 색상 픽셀 그리드를 저장합니다. 주요 특성:

무손실 압축: JPEG와 달리, PNG 저장은 절대 품질을 저하시키지 않습니다 — 매번 정확히 동일한 픽셀을 돌려받습니다
투명도 지원: PNG는 완전한 알파 채널 투명도를 지원합니다 — 각 픽셀이 부분적으로 또는 완전히 투명할 수 있습니다
고정 해상도: 200×200 px PNG는 정확히 200×200 픽셀을 가집니다. 2000×2000 px로 확대하면 소프트웨어가 새 픽셀을 추측(보간)해야 합니다 — 결과가 흐릿합니다
사진과 복잡한 이미지에 적합: PNG는 SVG가 표현할 수 없는 사진의 세부 사항을 캡처합니다
사진의 경우 JPEG보다 파일 크기 큼: 무손실 압축은 복잡한 사진 콘텐츠에서 덜 효율적입니다 — 500 KB JPEG 사진이 PNG로는 3~5 MB가 될 수 있습니다

SVG vs PNG: 직접 비교

확장성: SVG는 어떤 크기로도 완벽하게 확장됩니다. PNG는 기본 해상도 이상으로 확대 시 품질이 저하됩니다
파일 크기 (단순 그래픽): SVG 우세 — 작은 아이콘은 SVG로 1~5 KB, 2× 해상도의 PNG로는 종종 10~50 KB
파일 크기 (복잡한/사진): SVG보다 PNG 우세. 사진을 SVG로 만들면 크기가 엄청나거나 품질이 형편없어집니다
브라우저 지원: 둘 다 최신 브라우저에서 보편적으로 지원됩니다. SVG는 IE9부터 지원됩니다
이메일: PNG가 더 안전합니다 — 일부 이메일 클라이언트(특히 Outlook)는 SVG 지원이 제한적이거나 없습니다
인쇄: 로고와 그래픽에는 SVG가 선호됩니다 — 인쇄 크기에 관계없이 전체 해상도로 인쇄됩니다. PNG는 품질 있는 인쇄 출력을 위해 고DPI(300 DPI+)가 필요합니다

SVG를 사용할 때

로고와 브랜드 마크: SVG는 로고의 업계 표준입니다 — 명함(작은 크기)과 광고판(거대한 크기) 모두에서 선명하게 보여야 합니다
아이콘과 UI 요소: 아이콘 세트는 이제 거의 항상 SVG입니다. 단일 SVG 아이콘 파일이 모든 크기에서 작동합니다 vs. 별도의 @1x, @2x, @3x PNG 파일 필요
플랫하거나 단순한 디자인의 일러스트레이션: 제한된 색상과 기하학적 도형의 플랫 디자인은 SVG로 잘 변환됩니다
애니메이션 그래픽: SVG는 CSS와 SMIL 애니메이션을 지원합니다 — 단순한 애니메이션 로고와 로딩 스피너에 훌륭합니다
차트와 다이어그램: 데이터 시각화는 완벽하게 크기 조정되고 모든 확대/축소 수준에서 텍스트를 읽기 쉽게 유지하는 SVG의 기능을 활용합니다

PNG를 사용할 때

스크린샷: PNG는 스크린샷의 기본값입니다 — 압축 아티팩트 없는 정확한 픽셀 재현
투명도가 있는 사진: 투명 배경이 있는 사진이 필요한가요? PNG는 투명도를 처리하지만 JPEG는 처리하지 않습니다
그라데이션이 있는 복잡한 일러스트레이션: SVG가 제대로 표현하기 어려운 풍부한 그라데이션, 그림자, 복잡한 질감
SVG가 지원되지 않을 때: 구형 이메일 클라이언트, 일부 CMS 도구, 래스터 형식만 허용하는 레거시 시스템
소셜 미디어용 이미지: 소셜 플랫폼은 PNG를 허용하고 직접 변환합니다 — SVG는 일반적으로 허용되지 않습니다

SVG와 PNG 간 변환

SVG를 PNG로 변환하는 것은 간단합니다 — 대상 크기로 SVG를 렌더링하고 PNG로 내보냅니다. 대부분의 디자인 도구(Figma, Illustrator, Inkscape)가 직접 이를 수행합니다.

PNG를 SVG로 변환하는 것은 "벡터화"라고 하며 더 복잡합니다. 단순한 로고와 플랫 그래픽은 자동 트레이싱(Inkscape의 Trace Bitmap, Adobe Illustrator의 Image Trace)으로 괜찮은 결과를 얻을 수 있습니다. 복잡한 사진은 SVG로 의미있게 변환할 수 없습니다 — 결과는 각 픽셀을 도형으로 설명하려는 거대한 SVG가 됩니다.

파일 크기 최적화

SVG 최적화: 디자인 도구에서 내보낸 원시 SVG에는 불필요한 메타데이터, 주석, 중복 경로가 포함되어 있습니다. SVGO 같은 도구는 눈에 보이는 품질 변화 없이 SVG 파일 크기를 30~80% 줄일 수 있습니다
PNG 최적화: 이미지 압축기를 사용해 PNG 파일 크기를 줄이세요 — 무손실 PNG 압축은 정확한 픽셀 품질을 유지하면서 파일을 20~40% 줄일 수 있습니다
웹에는 WebP 고려: 웹 사용의 경우 WebP가 종종 품질과 비슷하면서 파일 크기에서 PNG를 능가합니다. 워크플로우에서 허용된다면 PNG to WebP 변환기를 사용하세요

빠른 결정 가이드

로고, 아이콘, 단순 일러스트레이션 → SVG
사진 → JPEG (웹은 WebP)
투명도가 있는 사진 → PNG
스크린샷 → PNG
이메일 그래픽 → PNG (이메일에는 SVG 비안전)
그라데이션이 있는 복잡한 일러스트레이션 → PNG
웹용 애니메이션 로고 → SVG (또는 Lottie)