PNG와 SVG, 어떤 형식을 써야 할까?

1. 핵심 차이: 픽셀 격자 대 수학적 경로

PNG는 비트맵으로, 이미지를 개별 픽셀로 잘라 각 픽셀의 색을 기록합니다. PNG를 확대하면 그 픽셀들만 늘어나기 때문에 계단 현상과 흐림이 생깁니다. SVG는 벡터 이미지로, 좌표와 베지어 곡선 같은 수학적 지시로 도형을 표현하고 브라우저가 새 크기로 다시 그리므로 어떤 크기에서도 선명합니다. 이 사실 하나가 두 형식의 거의 모든 차이의 뿌리입니다.

투명성은 PNG가 알파 채널을 지원해 투명 배경을 저장할 수 있습니다. SVG는 태생부터 투명합니다. 배경 사각형을 그리지 않는 한 도형 바깥은 모두 투명하게 남습니다. 참고로 JPG는 투명성이 전혀 없습니다. 흰 배경은 이미지에 실제로 칠해진 색입니다.

2. 파일 크기와 로딩 성능

아이콘과 로고 같은 단순 그래픽은 SVG가 수 KB에 불과한 경우가 많아 하나의 파일로 모든 화면 해상도를 처리할 수 있습니다. PNG는 보통 레티나 화면에서 선명하게 보이려면 @2x와 @3x 버전이 필요해 파일 크기가 배수로 늘어납니다. 사진은 정반대입니다. 풍부한 색 변화는 벡터화하면 경로 수가 폭증해 SVG가 JPG나 WEBP보다 훨씬 커지므로 이득이 없습니다.

차이의 원인은 각 형식의 압축 방식에 있습니다. PNG는 픽셀을 무손실 압축으로 기록하므로 이미지가 복잡할수록 파일이 커집니다. SVG는 평문 텍스트라 반복되는 경로 명령과 좌표가 아주 잘 압축됩니다. 그래서 둘 다 무손실 형식임에도 크기 동작이 이렇게 다른 것입니다.

사용 사례	추천 형식	이유
웹사이트 아이콘 / 로고	SVG	모든 해상도에 하나의 파일로 충분하고 CSS로 색 변경 가능
사진	JPG / WEBP	사진 화질 유지하면서 파일이 작음
스크린샷	PNG	픽셀 단위로 정확하고 무손실 압축
데이터 차트	SVG	확대해도 선명하고 인터랙티브 구현이 쉬움
소셜 미디어 프로필	PNG / JPG	대부분의 플랫폼이 비트맵만 허용

3. PNG를 써야 할 때

• 사진, 복잡한 조명, 섬세한 그라데이션;
• 픽셀 단위 정확성이 필요한 스크린샷과 화면 캡처;
• 일부 대시보드의 프로필 업로드처럼 플랫폼이 비트맵만 받는 곳;
• SVG를 지원하지 않는 아주 오래된 환경을 위한 호환용 대체 수단.

4. SVG를 써야 할 때

• 웹사이트 아이콘과 로고: 모든 해상위에 하나의 파일로 충분하고 레티나 화면에서도 선명합니다;
• CSS나 JavaScript로 색을 바꾸거나 획 그리기 애니메이션이 필요한 그래픽;
• 데이터 차트: ECharts 같은 시각화 라이브러리는 기본적으로 SVG를 출력합니다;
• 장비가 벡터 경로를 읽는 인쇄, 레이저 각인, 비닐 커팅.

5. PNG와 SVG는 서로 변환할 수 있나요?

네. PNG → SVG: PolySVG PNG → SVG 도구나 이미지 → SVG 도구에서 파일을 올리고 생성 버튼을 누르면 벡터화됩니다. 아이콘과 로고에는 아주 좋은 결과가 나오고 사진은 일러스트 스타일로 바뀝니다. 변환은 무료이며 투명 PNG는 투명 배경이 그대로 유지됩니다. 만들어진 SVG는 편집기에서 열어 색 변경과 배경 제거를 할 수 있어 작업 흐름이 완성됩니다. SVG → PNG: 온라인 SVG 편집기에서 파일을 열어 필요한 해상도로 PNG를 내보내세요. 문서나 미리보기에 적합합니다.

한 가지 기억할 점은 PNG → SVG가 단순히 다른 이름으로 저장하는 일이 아니라 윤곽을 다시 그리는 벡터화라는 것입니다. 그래픽 자산은 깔끔한 경로로 나오고 사진은 색 블록으로 압축됩니다. 먼저 도구에서 결과를 확인하고 예상한 스타일과 맞는지 본 뒤 내려받는 것이 좋습니다.

한 줄 규칙: 아이콘·로고·차트는 SVG, 사진과 스크린샷은 PNG/JPG/WEBP입니다. 고민되면 그래픽 요소는 SVG를 선호하세요. 더 자세히 보려면 SVG란 무엇인가와 이미지를 SVG로 바꾸는 세 가지 방법을 읽어보세요.