이미지 SVG 변환 (벡터화)
벡터화는 픽셀을 색 면의 윤곽선(도형)으로 다시 그리는 일이에요. 색이 몇 가지로 나뉜 로고·아이콘·선화일수록 깔끔하게 바뀌고, 사진은 포스터처럼 단순해져요.
도구를 준비하고 있어요.
이용자 평가
아직 등록된 리뷰가 없어요. 이 도구를 써 보셨다면 첫 리뷰를 남겨 주세요.
이미지 SVG 변환 (벡터화) 상세 가이드
사용법과 예제를 살펴보고, 궁금한 내용은 주제별로 찾아보세요.
시작 전에 한눈에 보기
- 받는 파일
- PNG·JPG·WebP·GIF·BMP·AVIF, 20MB까지예요. 가로·세로 8px 이상, 4,000만 화소 이하여야 해요.
- 방식
- 로고·아이콘(2~16색), 흑백 선화(검정 한 색), 그림·사진(8~48색) 세 가지예요. 세밀함은 1~5단계예요.
- 결과
- SVG 파일 크기·색 수·경로 수와 쓰인 색 견본을 보여 주고, SVG로 저장하거나 코드를 복사해요.
- 크기
- 빠르게 그리려고 긴 변을 로고 1,600px·선화 2,000px·그림 1,000px로 줄여 따라 그리고, SVG는 원본 크기로 열려요.
- 개인정보
- 이미지는 이 브라우저 안에서만 처리하고 서버로 보내지 않아요.
이미지 SVG 변환 (벡터화) 사용 순서
이미지를 넣으세요
파일을 끌어다 놓거나 ‘파일 선택’을 누르세요. 먼저 해 보고 싶으면 ‘예제 로고로 해 보기’를 누르세요. 넣자마자 SVG로 바꿔 보여 줘요.
이미지 종류를 고르세요
색이 몇 가지인 로고·아이콘은 ‘로고·아이콘’, 손글씨·서명·도장·스캔한 선은 ‘흑백 선화’, 색이 많은 그림은 ‘그림·사진’을 고르세요.
색 수·세밀함을 맞추세요
슬라이더를 움직이면 손을 멈춘 뒤 바로 다시 그려요. 로고는 실제 색 수에 맞추고, 선이 울퉁불퉁하면 세밀함을 낮추세요. 선화는 ‘검정으로 칠할 밝기’로 연한 선을 남기거나 지워요.
비교하고 저장하세요
막대를 움직여 원본과 비교하고 ‘3배 확대’로 매끈한지 보세요. ‘SVG 저장’을 누르면 ‘원래이름.svg’로 저장되고, ‘SVG 코드 복사’로 웹페이지에 바로 붙여 넣을 수도 있어요.
이런 작업에 활용하세요
비트맵과 벡터는 무엇이 다른가요
PNG·JPG는 작은 점(픽셀)을 바둑판처럼 늘어놓은 비트맵이라 크게 키우면 계단처럼 깨지거나 흐려집니다. SVG는 “이 점에서 저 점까지 이런 곡선, 안은 파란색”처럼 도형을 적은 벡터라 어떤 크기로 키워도 매끈합니다. 그래서 간판·현수막·스티커 인쇄, 웹사이트 로고, 레이저 커팅처럼 크기가 바뀌거나 선이 필요한 곳에는 벡터 파일을 씁니다.
세 가지 방식 고르기
‘로고·아이콘’은 이미지를 정한 수의 색으로 묶고 가장자리 번짐 색을 빼서 또렷한 면으로 만듭니다. ‘흑백 선화’는 밝기 경계로 검정·흰색만 남겨 손글씨·서명·도장·스캔한 그림을 한 색 도형으로 만듭니다. ‘그림·사진’은 색을 많이(8~48색) 써서 색이 많은 그림을 여러 색 면으로 나눕니다.
깔끔하게 나오게 하는 요령
원본이 클수록, 배경이 단색일수록, JPG 얼룩이 적을수록 결과가 좋습니다. 로고는 실제 색 수에 맞춰 색 수를 줄이고, 선이 울퉁불퉁하면 세밀함을 낮추세요. 작은 글자가 뭉개지면 세밀함을 올리거나 큰 원본으로 다시 하세요. 결과가 어떻게 바뀌는지는 설정을 움직이면 바로 다시 그려져 확인할 수 있습니다.
처리 방식과 개인정보
색 묶기(k-평균)와 외곽선 따라 그리기(imagetracerjs, 공개 저작물)를 이 브라우저의 별도 작업 공간에서 돌립니다. 이미지는 서버로 올라가지 않고, 같은 이미지·설정이면 늘 같은 결과가 나옵니다.
예제로 결과 이해하기
4색 로고
파랑·주황·검정 도형이 흰 바탕에 있는 400×400 PNG, 로고·아이콘 6색색 4개 · 경로 7개 · 약 2.7KB바탕 지우기
같은 로고를 JPG(화질 60)로, 바탕색 지우기 켬흰 바탕이 빠진 3색 SVG선화 자동 경계
흰 바탕의 검은 선 그림, 흑백 선화오츠 방법으로 고른 밝기 경계로 검정 한 색 SVG세 방식 고르기
표를 좌우로 밀어 나머지 내용을 확인하세요.
| 방식 | 잘 맞는 이미지 | 알아 둘 점 |
|---|---|---|
| 로고·아이콘 | 단색 면으로 된 로고, 아이콘, 스티커, 도형 | 가장자리 번짐 색을 빼서 테두리에 얇은 테가 생기지 않아요. 결과 색은 고른 수보다 적을 수 있어요. |
| 흑백 선화 | 손글씨, 서명, 도장, 스캔한 선 그림 | 검정 한 색만 남아요. 색이 있는 로고에 쓰면 밝기만으로 나뉘어 모양이 합쳐질 수 있어요. |
| 그림·사진 | 색이 많은 일러스트, 사진 | 명암이 몇 단계 색 면으로 나뉘어 포스터처럼 보여요. 경로가 많아 파일이 커질 수 있어요. |
결과가 예상과 다를 때
도형 테두리가 울퉁불퉁해요
세밀함을 낮추면 작은 흔들림을 직선·곡선으로 펴 줘요. 원본이 작거나 JPG 얼룩이 많으면 큰 원본·PNG로 다시 해 보세요.
작은 글자가 뭉개지거나 사라져요
세밀함을 올리면 작은 조각도 남겨요. 글자가 원본에서 몇 픽셀밖에 안 되면 원본을 키워서(AI 화질 개선 등) 다시 하세요.
바탕이 안 지워져요
가장자리의 60% 이상이 한 색이어야 바탕으로 봐요. 그라데이션 바탕이나 사진 바탕은 남아요. 이때는 배경 제거 도구로 먼저 바탕을 지운 PNG를 넣으세요.
SVG 파일이 너무 커요
사진처럼 색이 많은 이미지는 경로가 수천 개가 돼요. 색 수와 세밀함을 낮추거나 ‘로고·아이콘’ 방식으로 바꾸세요.
알아두면 쉬운 용어
- 벡터화
- 픽셀 이미지를 색 면의 윤곽선(도형)으로 다시 그려 벡터 파일로 바꾸는 일이에요. 트레이싱이라고도 해요.
- SVG
- 도형을 글(XML)로 적은 벡터 이미지 형식이에요. 크기를 바꿔도 깨지지 않고 웹에서 바로 쓸 수 있어요.
- k-평균
- 비슷한 색끼리 정한 수의 무리로 묶는 방법이에요. 무리마다 평균 색 하나로 칠해요.
- 오츠 방법
- 밝기 분포를 어두운 쪽·밝은 쪽 두 무리로 가장 잘 나누는 경계를 자동으로 고르는 방법이에요.
이미지 SVG 변환 (벡터화) 자주 묻는 질문
정말 무료인가요? 워터마크가 붙나요?
무료이고 워터마크·회원가입·횟수 제한이 없습니다. 변환을 내 브라우저에서 해 서버 비용이 들지 않기 때문입니다.
사진도 벡터로 바꿀 수 있나요?
‘그림·사진’ 방식으로 바꿀 수는 있지만, 부드러운 명암이 몇 단계 색 면으로 나뉘어 포스터처럼 보이고 파일이 커집니다. 사진을 그대로 크게 쓰려면 벡터화보다 AI 화질 개선이 맞습니다.
일러스트레이터나 피그마에서 열리나요?
표준 SVG라 일러스트레이터·피그마·잉크스케이프·캔바 등에서 열고 색과 모양을 고칠 수 있습니다. 색마다 한 묶음(그룹)으로 저장해 색을 바꾸기 쉽습니다.
투명 배경으로 만들 수 있나요?
‘바탕색 지우기’를 켜면 가장자리의 60% 이상을 차지한 한 색을 바탕으로 보고 뺍니다. 원본이 이미 투명한 PNG면 투명한 부분은 처음부터 그리지 않습니다.
AI(인공지능)로 바꾸나요?
아니요. 학습한 모델이 아니라 색 묶기와 외곽선 따라 그리기라는 정해진 계산으로 바꿔요. 그래서 같은 이미지·설정이면 늘 같은 결과가 나와요.
여러 장을 한 번에 할 수 있나요?
지금은 한 장씩 해요. ‘다른 이미지로 하기’를 누르고 새 이미지를 넣으면 같은 설정이 그대로 적용돼요.