PNG→SVG 트레이서이란?
PNG to SVG Tracer는 래스터 이미지(PNG, JPG)를 스케일러블 벡터 그래픽으로 변환합니다. 엣지 감지와 경로 추적을 사용하여 어떤 크기로 확대해도 품질 저하 없는 SVG를 생성합니다. 로고, 아이콘, 일러스트레이션에 잘 맞습니다.
자주 쓰는 용도에 맞춰 다섯 가지 프리셋(로고/플랫, 아이콘, 일러스트, 라인 스케치, 사진)이 준비돼 있습니다. 임계값, 스무딩, 디테일, 색상 수, 경로 단순화, 잡티 제거 필터 모두 슬라이더로 노출돼 있어 윤곽을 유지한 채 패스 수만 줄이는 지점까지 맞출 수 있습니다. 반전 토글은 어두운 배경의 밝은 그림을 처리하고, 색상 레이어 편집기로 노이즈가 많은 레이어를 다운로드 전에 숨길 수 있습니다. 평면 로고는 보통 5KB 안에 들어옵니다.
사용 방법
- 벡터화할 PNG 또는 JPG 이미지를 업로드하세요.
- 임계값, 스무딩, 디테일 설정을 조정하여 트레이싱 품질을 제어하세요.
- SVG 결과를 미리 보고 벡터 파일을 다운로드하세요.
사용 시기
- 저해상도 PNG만 남은 옛 회사 로고를 다시 벡터로 살릴 때.
- 디자인 시스템용 아이콘을 16px과 256px 모두에서 선명하게 보이도록 다듬을 때.
- 손으로 그린 스케치 스캔본을 Figma나 Illustrator에서 편집 가능한 벡터 패스로 변환할 때.
결과
디자이너가 200×200 픽셀 로고 PNG를 업로드합니다. 트레이서가 엣지를 감지하고 부드러운 베지에 곡선으로 이루어진 선명한 SVG를 생성하여 대형 광고판에서도 깨끗하게 표시됩니다.
자주 묻는 질문
- 사진에서 쓸 만한 SVG가 나오나요?
- 현실적으로는 어렵습니다. 사진은 연속 톤이라 트레이싱하면 수천 개의 겹치는 패스로 풀려서 파일이 커지고 결과가 얼룩덜룩해집니다. 사진 프리셋은 스타일라이즈된 포스터화 용도로만 쓰고, 실제 사진은 PNG/JPG로 두는 편이 낫습니다.
- 왜 출력에 자잘한 패스가 이렇게 많이 생기나요?
- 대개 원본 PNG의 가장자리에 노이즈나 안티에일리어싱이 있는 경우입니다. 잡티 제거 필터를 올려 트레이싱 전에 고립된 얼룩을 버리고, Simplify를 올려 가까운 점을 합치고, 색상 수를 줄여 미세한 그라데이션이 별도 영역으로 트레이싱되는 것을 막으면 대부분 정리됩니다.
- 임계값과 디테일은 어떻게 다른가요?
- 임계값은 어떤 픽셀을 전경/배경으로 볼지의 흑백 경계를 정합니다. 디테일은 그 판정 이후 패스가 픽셀 가장자리에 얼마나 밀착할지를 조절합니다. 임계값 높음 + 디테일 낮음은 깨끗한 실루엣, 임계값 낮음 + 디테일 높음은 질감을 살립니다.
- 원본 색상을 유지할 수 있나요?
- 가능합니다. Colors 슬라이더를 2 이상으로 올리면 그 개수만큼 색 영역으로 양자화되고, 각 영역이 해당 색의 SVG 패스로 출력됩니다. 평면 일러스트라면 2-6색이 가장 잘 어울립니다.
- SVG가 원본 PNG보다 더 가벼운가요?
- 로고나 아이콘이라면 거의 항상 그렇습니다. 50KB짜리 PNG가 2-5KB SVG가 되는 경우가 많습니다. 다만 복잡한 일러스트는 SVG가 더 커질 수 있어, 그때는 디테일 값을 낮춰 패스 수를 줄이는 편이 좋습니다.