"PNG를 SVG로 바꿔 주세요"는 흔한 요청이지만, 이 변환은 다른 변환과 성격이 다릅니다. 기대와 다른 결과를 받고 놀라지 않도록 원리와 한계를 먼저 정리합니다.
왜 다른 변환과 다른가요?
PNG를 JPG로 바꾸는 것은 같은 픽셀을 다른 방식으로 저장하는 일입니다. 반면 PNG는 픽셀의 격자이고 SVG는 도형과 곡선의 설명서라서, 둘 사이에는 정보가 대응하지 않습니다. PNG를 SVG로 바꾸려면 프로그램이 이미지를 보고 "여기는 빨간 원이고 저기는 파란 사각형"이라고 추정해서 도형으로 다시 그려야 합니다. 이를 트레이싱(벡터화)이라고 합니다.
- 결과는 원본과 똑같지 않습니다. 가장자리가 조금 달라지고 작은 디테일은 사라질 수 있습니다.
- 확대해도 선명한 것은 새로 그린 도형의 윤곽입니다. 원본에 없던 디테일이 살아나지는 않습니다.
- 그래서 같은 PNG라도 이미지의 종류에 따라 결과가 아주 다릅니다.
직접 측정한 결과
이 사이트의 변환기로 여러 이미지를 SVG로 바꾸고 용량을 쟀습니다. 색 수와 디테일 설정에 따라 달라지는 모습을 함께 봅니다.
| 이미지 | 원본 PNG | 4색 · 단순 | 8색 · 보통 | 16색 · 보통 | 32색 · 정밀 |
|---|---|---|---|---|---|
| 단색 아이콘 128×128 | 2.6KB | 0.6KB | 1.5KB | 1.0KB | 12.4KB |
| 도형 로고 300×300 (3색) | 5.9KB | 2.5KB | 4.3KB | 4.3KB | 10.7KB |
| 글자 있는 로고 300×300 | 9.3KB | 4.9KB | 16.0KB | 13.0KB | 95.2KB |
| 그라데이션 300×200 | 33.7KB | 1.2KB | 3.4KB | 6.2KB | 24.9KB |
| 사진 1280×854 | 2.2MB | 1.0MB | 3.0MB | 4.8MB | 15.6MB |
여기서 읽을 수 있는 것은 이렇습니다.
- 단순한 아이콘과 도형 로고는 SVG가 더 작게 나옵니다. 색이 적고 경계가 뚜렷해서 도형 몇 개로 충분하기 때문입니다.
- 글자가 있는 로고는 설정에 민감합니다. 글자의 곡선은 도형이 많이 필요합니다. 같은 이미지가 4.9KB에서 95KB까지 달라졌고, 8색·보통에서는 원본 PNG보다 1.7배 컸습니다.
- 설정을 높인다고 좋아지지 않습니다. 32색·정밀은 용량만 크게 늘렸습니다. 로고에서는 오히려 낮은 설정이 더 깔끔한 경우가 많습니다.
- 그라데이션은 색 수가 적으면 띠 모양으로 나뉩니다. 4색에서 용량은 가장 작지만 부드러운 변화가 사라집니다.
- 사진은 어떤 설정이든 맞지 않습니다. 가장 낮은 설정에서도 1.0MB이고, 정밀 설정에서는 원본보다 7배 큰 15.6MB(도형 11만 개)가 나왔습니다. 4색으로 줄이면 용량은 작지만 포스터처럼 뭉개진 이미지가 됩니다.
이런 이미지는 잘 됩니다
- 로고, 아이콘, 심볼처럼 색이 적고(대개 2~8색) 경계가 뚜렷한 이미지
- 단색 일러스트, 스티커 같은 그림
- 배경이 투명한 PNG (배경이 투명하면 투명한 그대로 유지됩니다)
- 원본 해상도가 충분히 큰 이미지 (작은 이미지는 윤곽이 거칠게 나옵니다)
이런 이미지는 맞지 않습니다
- 사진이나 실사 이미지. 이 사이트는 색이 많은 이미지를 감지하면 결과 화면에 경고를 띄웁니다.
- 그라데이션, 그림자, 질감이 많은 이미지
- 아주 작은 이미지(예: 16×16 파비콘). 윤곽 정보가 부족해서 도형이 각져 보입니다.
- JPG로 저장되어 압축 노이즈가 있는 로고. 같은 색에도 미세한 얼룩이 섞여 있어 도형이 지저분하게 나뉩니다. 색 수를 낮추고 디테일을 단순으로 해 보세요.
설정은 이렇게
- 색 수: 이미지에 실제로 쓰인 색보다 조금 많게 시작합니다. 3색 로고라면 4~6색으로 충분합니다. 색이 어긋나 보이면 올리고, 용량이 크면 내립니다.
- 디테일: 먼저 단순이나 보통으로 시작하세요. 윤곽이 뭉개질 때만 정밀로 올립니다. 정밀은 도형이 많이 늘어 파일이 급격히 커집니다.
- 크기는 표시 크기일 뿐입니다. SVG는 확대해도 선명하지만, 추적은 한 변 최대 1024px로 줄인 이미지로 하므로 원본의 아주 작은 디테일은 반영되지 않습니다.
변환 후 꼭 확인할 것
- 확대해서 보기: 결과 미리보기를 확대해서 윤곽이 울퉁불퉁하거나 끊어진 곳이 없는지 봅니다.
- 색 비교: 원본과 색이 달라지지 않았는지, 그라데이션이 띠로 나뉘지 않았는지 봅니다.
- 글자: 글자는 글꼴이 아니라 도형이 됩니다. 알아보기 어렵거나 모양이 변했다면 원본 디자인 파일을 쓰세요.
- 용량: 결과가 원본보다 훨씬 크면 색 수와 디테일을 낮춰 다시 변환하세요.
- 배경: JPG처럼 투명이 없는 원본은 배경이 큰 도형으로 들어갑니다. 필요 없다면 편집 프로그램에서 지우세요.
- 용도 점검: 상표나 브랜드 로고는 모양이 조금만 달라져도 문제가 될 수 있습니다. 확대해서 눈으로 확인한 뒤 사용하세요.
한계
- 변환은 한 변 최대 1024px로 줄인 이미지로 합니다. 이보다 큰 이미지는 결과 화면에 알려 드립니다.
- 도형(경로)이 2만 개 이상이면 열거나 편집할 때 느릴 수 있다고 알리고, 20만 개를 넘으면 변환을 중단합니다.
- 색 수는 최대 64색입니다.
- 움직이는 GIF·WebP는 첫 장면만, 여러 페이지 TIFF는 첫 페이지만 변환됩니다.
반대 방향은 SVG를 PNG로 바꿀 때 해상도 정하는 법에, 형식 자체의 설명은 SVG 형식 페이지에 있습니다.