이미지 SVG 변환 — PNG·JPG 로고를 벡터로 바꾸기
비트맵 이미지를 색 수·디테일 슬라이더로 조절해 SVG 벡터로 바꾸는 변환기
브라우저에서 처리 · 서버로 전송되지 않음
색을 몇 가지로 줄인 뒤 같은 색 영역의 윤곽을 선과 곡선으로 따는 방식이에요. 로고, 아이콘, 글자, 단순한 그림에 잘 맞고, 사진은 포스터처럼 단순해지며 파일이 매우 커질 수 있어요. 원본의 그라데이션이나 흐릿한 경계는 그대로 살릴 수 없어요.
SVG로 바꿀 이미지를 여기로 끌어다 놓으세요
JPG, PNG, WebP, GIF, BMP 한 장(50MB까지). Ctrl+V(맥은 ⌘V)로 붙여 넣어도 돼요. 이미지는 서버로 올라가지 않아요.
결과 SVG에 쓰일 색의 최대 개수예요. 로고는 2~8, 일러스트는 16 이상을 권해요.
높을수록 윤곽을 촘촘히 따라가고 작은 점도 남지만 파일이 커지고 시간이 더 걸려요. 1은 단순하게, 5는 원본에 가깝게예요.
이미지 → SVG 변환이란?
PNG나 JPG 같은 비트맵 이미지를 SVG 벡터로 바꿔 주는 도구예요. 비트맵은 픽셀로 이루어져 있어 크게 키우면 계단처럼 깨지지만, SVG는 선과 곡선으로 저장되어 아무리 키워도 매끈해요. 로고 원본 파일을 잃어버려 작은 PNG만 남았을 때, 아이콘을 웹사이트에 넣거나 레이저 커팅·자수·스티커 작업용 벡터가 필요할 때 쓸 수 있어요.
변환 방식에 한계가 있다는 점은 먼저 알아 두세요. 이미지를 몇 가지 색으로 줄인 다음 같은 색끼리 모인 영역의 윤곽을 따라 그리기 때문에, 그라데이션이나 흐릿한 경계, 사진의 세밀한 질감은 그대로 살릴 수 없어요. 단순한 색 면으로 이루어진 이미지일수록 결과가 깔끔해요.
사용법
- 이미지를 끌어다 놓거나 이미지 선택을 눌러 고르세요. Ctrl+V로 붙여 넣어도 돼요.
- 색 수를 정해요. 흑백 로고는 2, 몇 가지 색의 로고는 4~8, 일러스트는 16 이상이 알맞아요.
- 디테일을 1~5 중에서 골라요. 높을수록 윤곽을 촘촘하게 따라가요.
- 오른쪽(휴대폰은 아래) 미리보기에서 원본과 비교한 뒤 SVG 저장을 누르거나 코드를 복사해요.
변환 기준
- 색 줄이기: 이미지에서 고른 대표색으로 모든 픽셀을 나눈 뒤 세 번 다듬어요. 같은 이미지와 설정이면 항상 같은 결과가 나와요.
- 윤곽 따기: 같은 색 영역의 경계를 직선과 2차 곡선으로 맞춰요. 디테일 1은 오차 4px까지 허용하고 32점보다 작은 도형을 지우며, 디테일 5는 0.25px까지 따라가고 작은 점도 남겨요.
- 분석 크기: 속도를 위해 긴 변을 디테일 1은 300px, 3은 700px, 5는 1400px로 줄여 분석하고, 좌표를 원래 크기로 되돌려 저장해요.
- 정리: 완전히 투명한 색의 도형은 빼고, 원본 크기의 width·height와 viewBox를 넣어요.
- 벡터 변환에는 imagetracerjs(퍼블릭 도메인)를 써요.
예시
| 원본 | 설정 | 결과 |
|---|---|---|
| 검은 글자 로고 PNG 800×300 | 색 2, 디테일 3 | 검은 글자와 흰 바탕 두 색, 작은 파일 |
| 4색 아이콘 PNG 512×512 | 색 4, 디테일 4 | 색 4가지, 매끈한 곡선 |
| 풍경 사진 JPG 4000×3000 | 색 16, 디테일 2 | 포스터 느낌, 로고보다 훨씬 큰 파일 |
벡터를 다시 PNG로 바꾸려면 SVG → PNG 변환을, 웹사이트 아이콘 세트가 필요하면 파비콘 생성기를 써 보세요.
자주 묻는 질문
사진도 SVG로 바꿀 수 있나요?
바꿀 수는 있지만 결과는 포스터처럼 몇 가지 색 면으로 단순해지고, 디테일을 높이면 파일이 수 MB까지 커져요. 사진은 JPG나 WebP로 두는 편이 낫고, 이 도구는 로고·아이콘·글자·단순한 그림에 맞아요.
결과에 자잘한 점이 많아요.
디테일을 낮추면 작은 얼룩이 사라지고, 색 수를 줄이면 비슷한 색이 하나로 합쳐져요. 원본에 JPG 압축 잡음이 많다면 색 수를 2~8로 낮추는 것이 가장 효과가 커요.
투명 배경은 유지되나요?
네. 완전히 투명한 부분은 도형을 만들지 않으므로 SVG에서도 비어 있어요. 반투명한 부분은 해당 색의 불투명도(opacity)로 들어가요.
저장한 SVG의 크기는 어떻게 되나요?
원본 이미지와 같은 픽셀 크기(width·height)에 viewBox가 들어 있어서, 웹이나 디자인 프로그램에서 원하는 크기로 늘려도 깨지지 않아요.
이미지가 서버로 전송되나요?
아니요. 이미지 분석과 벡터 변환 모두 내 브라우저 안에서 이루어져요.
