SVG vs PNG 비교: 벡터와 래스터 이미지의 차이와 선택 기준
SVG와 PNG는 다른 문제를 풉니다. SVG는 벡터 형상을 설명하고 래스터도 내장할 수 있으며 PNG는 고정 픽셀 격자를 저장합니다. 선택은 원본 작품, 보안 경계, 접근성, 편집 경로, 렌더링과 측정 크기에 달립니다.
SVG와 PNG의 핵심 차이
SVG-PNG 구분은 벡터와 래스터 그래픽 차이입니다.
SVG는 XML 기반으로 형태, 경로, 글자, 필터, 스타일과 내장 자원을 설명합니다. 벡터 부분은 렌더 크기에 다시 그려지지만 선명도는 형상, 선, 효과, 픽셀 정렬과 내장 래스터에 달립니다.
PNG는 고정 픽셀 격자를 저장합니다. 확대에는 재표본화가 필요해 흐리거나 픽셀화될 수 있습니다. 표시 칸보다 훨씬 큰 원본은 반응형 후보가 브라우저 선택을 돕지 않으면 전송과 디코드 작업을 늘립니다.
이 차이가 크기, 확대, 편집 흐름과 각 형식에 맞는 이미지 종류를 결정합니다.
SVG를 쓸 때
SVG는 보안, 접근성, 렌더링과 내장 요구를 이해한 검토된 벡터 작품의 강한 후보입니다.
- 로고 — 깨끗한 SVG 하나가 래스터 확대 없이 여러 크기를 담당합니다. 매우 작은 표시는 단순화, 선 조정 또는 전용 변형이 필요할 수 있습니다.
- 아이콘 — UI, 탐색과 소셜 아이콘은 형상과 스타일을 공유합니다. SVG가 여러 래스터 해상도보다 작을 수 있지만 복잡한 경로나 인라인 반복은 반대일 수 있습니다.
- 일러스트와 다이어그램 — 깨끗한 선과 평면색. SVG 글자가 텍스트면 선택할 수 있지만 접근성과 색인에는 정확한 마크업과 내장이 필요합니다.
- 애니메이션 — CSS, JavaScript 또는 SVG 방식으로 움직입니다. 동작 선호, CPU, CSP, 접근성과 상호작용을 검토하세요.
- 파비콘 — 현재 주요 브라우저는 SVG를 쓰지만 완전한 세트는 래스터나 ICO가 필요할 수 있습니다. 파비콘 생성기로 일반 출력을 만드세요.
SVG는 현재 브라우저와 디자인 도구에서 널리 지원됩니다. 인기만으로 자산이 벡터여야 하는 것은 아닙니다. 복잡성, 안전, 캐시, 접근성과 렌더링을 비교하세요.
PNG를 쓸 때
PNG는 무손실 래스터 픽셀이나 알파가 중요하고 결과 크기가 예산에 맞을 때 강한 후보입니다.
- 투명 사진 — PNG는 알파와 무손실 픽셀을 제공하지만 세밀한 사진은 큽니다. 지원 대상에서는 알파 WebP/AVIF를 비교하고 투명이 필요 없으면 JPEG와 최신 사진 형식을 시험하세요.
- 스크린샷 — PNG는 코딩 픽셀을 보존할 수 있습니다. 프로필, 메타데이터, 크기 조절과 팔레트는 별도 문제입니다.
- 다색 복잡한 작품 — 깨끗한 벡터 형태로 단순화할 수 없는 그림, 질감과 사실적 일러스트.
- 글자 래스터 — 픽셀 정확한 글자 경계가 필요하면 PNG는 손실 결함을 피합니다.
파일 크기와 성능 비교
아이콘, 로고와 단순 일러스트에서는 형상, 치수, 반복, 압축과 캐시에 따라 SVG나 래스터 중 어느 쪽도 작을 수 있습니다.
| 그래픽 유형 | PNG 크기 | SVG 크기 | 절감률 |
|---|---|---|---|
| 단순 아이콘 | 후보마다 한 래스터 크기 | 흔히 간결한 벡터 형상 | 둘 다 측정 |
| 로고 | 여러 해상도가 필요할 수 있음 | 벡터 원본이 있으면 흔히 적합 | 둘 다 측정 |
| 아이콘 모음 | 분리 파일은 요청과 바이트 추가 | 스프라이트, 외부, 인라인의 캐시 비용이 다름 | 전체 페이지 측정 |
| 단순 일러스트 | 픽셀 치수와 세부에 따라 증가 | 경로, 스타일과 필터에 따라 증가 | 콘텐츠 의존 |
Brotli나 gzip 같은 텍스트 압축은 마크업과 서버에 따라 SVG 전송량을 줄입니다. 디스크 파일뿐 아니라 압축 전송 바이트를 비교하세요.
인라인 SVG는 요청을 피하지만 HTML을 늘리고 따로 캐시되지 않습니다. 외부 SVG는 캐시됩니다. 벡터는 보통 밀도 변형이 필요 없지만 복잡하거나 래스터를 내장한 SVG는 반응형 처리가 필요할 수 있습니다. 페이지를 측정하세요.
사진과 세밀한 질감은 추적할 때 형상이 지나치게 많아지거나 세부가 사라집니다. 래스터를 SVG에 넣으면 컨테이너와 흔히 base64만 더할 뿐 벡터가 되지 않습니다. PNG, JPEG, WebP 또는 AVIF를 쓰세요.
SVG vs PNG: 한눈에 비교
| 항목 | SVG | PNG |
|---|---|---|
| 이미지 종류 | 벡터(형태와 경로) | 래스터(픽셀 격자) |
| 확대 | 벡터 부분 재그림·렌더 세부도 중요 | 고정 격자·확대 시 부드러울 수 있음 |
| 투명도 | 예 | 예(알파) |
| 사진 콘텐츠 | 내장 래스터 외에는 대개 부적합 | 무손실 알파 옵션·크기 비교 |
| 아이콘/로고 | 깨끗하고 검토된 벡터 원본이면 강함 | 준비한 픽셀 치수에서 사용 가능 |
| 애니메이션 | 예(SVG/CSS/JS) | APNG 확장 |
| 코드 편집 | 예(XML) | 아니요 |
| 글자와 접근성 | 정확한 마크업과 내장으로 가능 | 주변 글자 또는 동등 alt 필요 |
| 브라우저 | 현재 주요 브라우저·내장 규칙은 다름 | 매우 넓음 |
| 파일 크기 | 형상과 마크업에 의존 | 치수와 콘텐츠에 의존 |
실전 예: 회사 웹사이트 재설계
로고, 탐색과 기능 아이콘 30개, 메인 사진, 제품 스크린샷을 가진 회사 사이트를 다음처럼 배정합니다.
- 로고 → 깨끗한 벡터 원본이 있으면 SVG. 선과 작은 크기 가독성을 시험하세요.
- 아이콘 모음 → SVG 스프라이트나 컴포넌트로 형상을 재사용하고 접근성, 캐시, CSP와 전송 마크업을 검증하세요.
- 메인 사진 → 같은 치수와 보이는 품질로 JPEG, WebP와 AVIF를 시험하고 필요한 폴백을 둡니다. 최적화 안내도 보세요.
- 제품 스크린샷 → 픽셀 보존이 필요하면 PNG부터 시작해 다른 무손실 후보와 허용 가능한 손실 버전을 비교합니다.
SVG와 PNG 변환 방법
소프트웨어 설치 없이 지원 파일을 브라우저에서 변환합니다. Vizua는 파일을 브라우저에서 처리하고 이미지 서버로 보내지 않지만 페이지 서비스는 네트워크를 쓸 수 있습니다.
- SVG를 PNG로 — 지원 SVG를 가능한 배율로 래스터화하고 결과 확인
- 이미지 벡터화 — 래스터를 근사 경로로 추적하며 원래 벡터 형상을 복구하지 않음
- 파비콘 생성기 — 지원 원본에서 일반 출력 생성
페이지별 치수와 바이트 예산은 이미지 파일 크기 안내를 보세요.
자주 묻는 질문
SVG가 PNG를 완전히 대체할 수 있나요?
아닙니다. SVG는 그래픽, 아이콘과 일러스트에 좋지만 사진을 효율적으로 표현하지 못합니다. 사진을 래스터로 넣으면 매우 크고 형태로 추적하면 세부 정보가 사라집니다. 벡터 콘텐츠에는 SVG, 복잡한 래스터에는 PNG, JPEG 또는 WebP를 쓰세요.
SVG는 웹에서 안전한가요?
SVG는 스크립트, 이벤트, 외부 참조, 링크, CSS, 필터 등을 담을 수 있는 능동 XML입니다. 신뢰하지 않는 SVG는 코드처럼 다루세요. 허용 목록으로 검증하고 관리되는 도구로 정화하며 적절한 타입과 격리로 제공하고 CSP를 적용합니다. 신뢰 출처도 검토를 대신하지 않습니다.
SVG가 흐려 보이는 이유는?
벡터는 래스터 확대 없이 다시 그려지지만 소수점 정렬, 선, 필터, 변환, 안티앨리어싱, 내장 래스터 또는 화면 때문에 부드러워질 수 있습니다. viewBox, 렌더 치수, 선 동작과 래스터를 확인하세요.
SVG와 아이콘 폰트 중 무엇이 좋나요?
SVG는 각 아이콘에 접근 가능한 이름을 주거나 장식이면 숨기고 스타일을 제한할 수 있어 흔히 적합합니다. 자동으로 더 빠르거나 접근 가능한 것은 아닙니다. 인라인은 HTML을 늘리고 외부 스프라이트는 캐시되며 ARIA는 정확해야 합니다.
PNG를 SVG로 바꿀 수 있나요?
예. Vizua 벡터화 도구는 PNG나 JPEG를 근사 SVG 경로로 추적합니다. 색이 적고 경계가 깨끗한 로고, 아이콘과 단순 일러스트에 좋고 복잡한 사진에는 맞지 않습니다.