PNG → SVG
PNG 이미지를 SVG 벡터로 변환 (비트맵 추적 방식)
PNG to SVG 변환기
PNG 이미지를 SVG 형식으로 변환합니다. 다만 "비트맵 추적"이라는 이름과 달리, 실제로는 윤곽선을 곡선으로 단순화하는 진짜 벡터 트레이싱이 아니라 어두운 픽셀 하나마다 1×1 크기의 <rect> 태그를 하나씩 그대로 찍어내는 방식입니다. 그래서 결과 SVG를 확대해 보면 원본 래스터 이미지와 똑같이 계단 현상(픽셀 각짐)이 그대로 보이고, 전경 픽셀 수만큼 XML 요소가 생겨 대부분의 경우 원본 PNG보다 훨씬 큰 파일이 만들어집니다. 또한 투명 PNG의 알파 채널 값을 전혀 읽지 않아, 투명 영역 밑에 저장된 RGB 값이 검은색(0,0,0)인 경우(투명 픽셀에 흔한 인코딩 방식) 배경이 아니라 검은 전경으로 잘못 처리되어 로고 뒤에 검은 사각형이 나타날 수 있습니다. 마지막으로 원본이 400px보다 크면 자동으로 400px 이하로 축소한 뒤 변환합니다.
자주 묻는 질문
이 도구가 만드는 SVG는 실제로 곡선 경로(path)로 이루어져 있나요?
아니요. "추적(tracing)"이라는 표현과 달리 윤곽선을 곡선으로 단순화하지 않고, 임계값보다 어두운 픽셀 하나하나를 1×1 크기의 <rect> 태그로 그대로 찍어냅니다. 즉 전경 픽셀 수만큼 <rect> 요소가 생기며, 결과물을 확대하면 매끈한 곡선이 아니라 원본과 동일한 계단식 픽셀 경계가 그대로 보입니다.
투명 배경의 PNG(로고 등)를 넣으면 정말 배경이 흰색으로 처리되나요?
실제로는 그렇지 않을 수 있습니다. 코드가 픽셀의 알파(투명도) 값을 전혀 읽지 않고 RGB 밝기만으로 전경/배경을 판정하기 때문에, 완전히 투명한 픽셀이라도 그 밑에 저장된 RGB 값이 어두운 색(흔히 검정 0,0,0)이면 어두운 전경으로 인식되어 검게 칠해집니다. 그 결과 투명 배경 로고를 넣었는데 배경 자리에 검은 사각형이 나타나는 경우가 생길 수 있습니다.
큰 이미지를 넣으면 원본 해상도 그대로 변환되나요?
아니요. 가로나 세로가 400px를 넘으면 자동으로 400px 이하로 비율을 유지한 채 축소한 뒤 변환합니다. 고해상도 원본을 넣어도 결과 SVG는 이 축소된 크기를 기준으로 생성됩니다.
SVG가 원본 PNG보다 훨씬 커질 수 있나요?
네, 상당히 자주 그렇습니다. 전경으로 판정된 픽셀 하나마다 <rect> 요소가 하나씩 생기는 구조라, 단순한 아이콘이 아닌 이상 파일 크기가 원본 PNG를 크게 웃도는 경우가 많습니다.
임계값은 무엇인가요?
픽셀을 전경(검정)과 배경(흰색)으로 구분하는 밝기 기준입니다. 값이 높을수록 더 많은 픽셀이 전경으로 처리됩니다.
결과 SVG를 편집할 수 있나요?
네, 일반 SVG 파일이므로 Inkscape, Illustrator, Figma 등에서 열어 편집할 수 있습니다. 다만 매끄러운 경로가 아니라 수많은 사각형으로 이루어져 있어 편집이 번거로울 수 있습니다.
파일이 서버로 전송되나요?
아니요. 이미지를 Canvas에 그려 픽셀 데이터를 읽은 뒤 각 픽셀을 <rect> 요소로 변환해 SVG 문자열을 생성하는 과정이 모두 브라우저 안에서 실행되므로 원본 이미지가 외부로 전송되지 않습니다.
사진도 SVG로 변환되나요?
기술적으로는 가능하지만, 사진처럼 픽셀 값이 다양한 이미지는 전경 픽셀 수가 매우 많아져 SVG 파일이 지나치게 커지고 브라우저가 느려질 수 있습니다.