PNG JPG를 SVG로 변환하고 색상별로 편집하는 방법

2026년 10월 7일 업데이트

PNG·JPG를 편집 가능한 SVG로 바꾸려면 픽셀을 벡터 경로로 추적한 뒤 원본과 비교하고 저장합니다. GadgetPickLab은 변환 후 색상을 숨기거나 바꾸고, 비슷한 색을 합치거나 색상별 SVG로 분리할 수 있습니다. 그라데이션이 많은 사진보다 단순한 로고·아이콘·단색 일러스트가 좋은 시작점입니다.

도구 바로 사용하기

입력과 저장 형식

입력	PNG·JPG 등 지원되는 이미지, 최대 10MB·64MP·한 변 16,000픽셀.
큰 이미지	처리를 위해 작업 이미지를 자동 축소합니다. SVG의 캔버스 크기는 원본 기준으로 유지합니다.
편집	최대 16배 확대·비교, 색상 변경·숨기기, 비슷한 색 합치기, 색상별 파일 저장.
출력	추적한 경로로 구성된 SVG. 원래 글꼴이나 제작자의 원본 레이어를 복원하지 않습니다.
처리 방식	원본 파일을 바꾸지 않고 브라우저에서 처리합니다. 이미지를 처리 서버에 올리지 않습니다.

2026년 10월 6일 검증: 720 × 480 PNG 예제를 SVG 경로 22개로 변환한 뒤 보라색을 청록색으로 변경했습니다. 한 예제의 결과이며 변환 품질이나 파일 크기를 보장하지 않습니다.

벡터 변환에 맞는 원본 고르기

로고·아이콘·색이 단순한 일러스트부터 시작하세요. 투명 배경 PNG는 대상과 배경을 분리하기 좋습니다. JPG에는 경계 주변에 압축으로 생긴 색이 있을 수 있어 정리가 더 필요할 수 있습니다.

사진을 변환한다고 원래 그림이 복원되지는 않습니다. 작은 글자·그림자·그라데이션은 경로가 많아지거나 세부 표현이 줄어듭니다. 원본을 보관하고 실제 사용할 크기에서 비교하세요.

이미지를 SVG로 변환하고 윤곽 확인하기

이미지→SVG 도구에서 PNG·JPG를 고르고 그림에 맞는 시작 설정을 선택합니다.
SVG를 생성하고 원본과 결과를 비교합니다. 확대·이동으로 작은 글자, 구멍, 얼굴의 특징과 바깥 윤곽을 확인하세요.
실제 디테일이 사라지거나 결과가 너무 복잡하면 색 수와 변환 설정을 조절한 뒤 다시 생성합니다.
JPG 경계에 잡색이 생겼다면 경계 정리를 조절합니다. 실제 회색 부분까지 지워지지 않았는지 원본과 비교하세요.

SVG 색상을 바꾸거나 색상별로 분리하기

두 색 아이콘이라면 각 색을 따로 편집할 수 있는 경로가 목표입니다. 먼저 변환한 뒤 색상 목록을 확인하세요. 경계의 비슷한 색이 추가로 잡혔다면 어떤 부분인지 확인한 후 합칠지 결정합니다.

색상 그룹을 선택해 채우기 색을 바꾸거나 숨겨 어느 부분에 적용되는지 확인합니다. 숨긴 부분은 편집한 결과에서 투명해집니다.
비슷한 색 합치기의 후보를 미리 보거나 직접 색을 선택해 합칩니다. 필요하면 마지막 합치기를 되돌립니다.
편집한 전체 SVG를 저장합니다. 겹쳐 쓰는 작업에는 원하는 색상만 개별 SVG로 저장할 수 있습니다.
저장한 파일을 브라우저나 벡터 편집기에서 따로 열어 윤곽, 투명도와 바꾼 색을 확인하세요.

SVG로 바꿔도 파일이 작아지지 않는 이유

SVG는 경로를 기록하는 형식입니다. 복잡한 사진이나 잡음이 많은 JPG는 경로가 많이 생겨 원본보다 커질 수 있습니다. 색 수를 줄이거나 단순한 그림을 사용하되 품질을 비교한 뒤 선택하세요.

큰 입력의 자동 축소는 추적할 수 있는 디테일에도 영향을 줍니다. 원본 캔버스 크기를 유지해도 작업 이미지에서 줄어든 정보가 복원되지는 않습니다.

저장 전에 궁금한 점

확장자만 .svg로 바꾸면 벡터가 되나요?

아니요. 확장자를 바꿔도 벡터 경로가 생기지 않습니다. 변환 후 저장한 SVG를 브라우저나 벡터 편집기에서 확인하세요.

글자가 편집 가능한 텍스트로 바뀌나요?

보이는 픽셀을 경로로 추적하므로 원래 글꼴이나 편집 가능한 텍스트 객체를 복원하지 않습니다.

사진도 변환할 수 있나요?

시도할 수 있지만 사진·그라데이션은 경로가 복잡해지거나 디테일이 단순해질 수 있습니다. 단색 로고·아이콘·일러스트에 더 적합합니다.