SVG는 확대해도 깨지지 않는 XML 기반 벡터 형식입니다. SVG는 최신 브라우저에서는 열리지만 프로그램이나 서비스에 따라 지원이 고르지 않습니다.
PNG는 화질 손실 없이 투명 배경까지 지원하는 범용 무손실 형식입니다. SVG를 PNG로 바꾸면 더 넓은 환경에서 열 수 있고 아래 비교에서 달라지는 점을 확인하세요.
이 변환기는 파일 내용을 읽어 SVG가 맞는지 확인한 뒤 브라우저 안에서 바로 PNG로 바꿔 줍니다. 이미지는 서버로 전송되지 않습니다.
SVG와 PNG, 무엇이 다른가요?
| 항목 | SVG | PNG |
|---|---|---|
| 압축 방식 | 벡터(수식으로 저장) | 무손실 압축 |
| 투명 배경 | 지원 | 지원 |
| 애니메이션 | 지원 | 미지원 |
| 등장 시기 | 2001년 | 1996년 |
| 프로그램·업로드 폼 지원 | 보통 | 거의 모든 곳 |
| 브라우저 직접 표시 | 지원 | 지원 |
| 사진 용량(JPG=1) | 해당 없음 | 약 3배 |
SVG란?
SVG는 픽셀이 아니라 선과 도형, 곡선의 수식을 텍스트(XML)로 저장하는 벡터 형식입니다. 아무리 확대해도 선명하고, 단순한 로고는 수 KB로도 충분합니다.
PNG란?
PNG(Portable Network Graphics)는 1996년 GIF의 특허 문제를 피하기 위해 만들어진 무손실 압축 형식입니다. 저장하고 다시 열어도 픽셀 값이 한 점도 바뀌지 않기 때문에, 편집을 여러 번 거치는 원본 작업물에 적합합니다.
SVG에서 PNG로 바꾸면 달라지는 점
벡터가 지정한 크기의 픽셀 이미지로 고정됩니다
SVG를 PNG로 바꾸면 그 순간 해상도가 정해집니다. 옵션의 가로 px을 먼저 지정해 필요한 크기로 선명하게 그린 뒤 저장하세요. 나중에 키우면 흐려집니다.
움직이는 이미지는 첫 장면만 저장됩니다
PNG는 애니메이션을 담지 못합니다. SVG 파일이 움직이는 이미지라면 첫 프레임 한 장만 변환됩니다.
PNG는 품질 설정이 없습니다
PNG는 무손실 압축 방식이라 품질 슬라이더가 적용되지 않습니다. 대신 SVG에서 바꿀 때 크기(가로·세로 px, 비율)를 조절해 용량을 관리할 수 있습니다.
용량은 이렇게 달라집니다
SVG는 해상도가 없는 벡터라 용량이 도형의 복잡도에 달려 있습니다. 단순한 로고는 SVG가 PNG보다 훨씬 작지만, 래스터로 바꾸면 지정한 크기(가로×세로)만큼의 픽셀 정보가 필요합니다.
PNG가 더 많은 곳에서 열립니다
SVG는 프로그램·문서 도구·업로드 폼에서의 지원이 보통 수준이고, PNG는 거의 모든 곳 수준입니다. SVG가 열리지 않던 곳에 올려야 한다면 변환 후 다시 시도해 보세요.
이럴 때 변환하세요
- SVG를 열지 못하는 프로그램, 메신저, 업로드 폼에 이미지를 올려야 할 때
- 벡터를 지원하지 않는 문서·SNS·프레젠테이션에 로고나 아이콘을 넣을 때
- PNG의 대표적인 용도(로고·아이콘, 스크린샷)로 쓸 이미지를 준비할 때
SVG → PNG 실전 팁
SVG는 해상도가 없으므로 PNG로 바꿀 때 크기를 직접 정해야 합니다. 옵션에서 가로 px을 지정하면 그 크기로 선명하게 그려집니다. 나중에 키울 일이 있다면 처음부터 넉넉하게 지정하세요.
배경은 투명하게 유지됩니다. 흰 배경이 필요하면 PNG 대신 JPG로 변환하면서 배경색을 고르는 방법도 있습니다.
SVG 안에 외부 글꼴이나 외부 이미지가 연결되어 있으면 브라우저에서 그리는 과정에서 빠질 수 있습니다. 글자는 윤곽선으로 변환해 저장된 SVG가 가장 안전합니다.