PNG를 SVG로 벡터화

PNG를 SVG로

PNG를 벡터화한다는 것은 픽셀을 확대, 재색상, 편집할 수 있는 패스로 추적해 바꾸는 것입니다. 이 도구는 브라우저 안에서 Potrace와 ImageTracer 알고리즘을 실행해 단색 계열의 로고, 아이콘, 선화를 깔끔한 SVG로 변환합니다. 사진형 PNG와 부드러운 그라데이션은 벡터화 결과가 좋지 않으므로, 선명한 가장자리와 제한된 색상을 가진 이미지에 사용하세요.

벡터화 작동 방식

  1. 1

    PNG 놓기

    가장 긴 변이 최소 512 px이고, 채움색이 평평한 선명한 원본일수록 결과가 좋습니다.

  2. 2

    모드 선택

    단색 Potrace 추적인 흑백 모드 또는 색상마다 하나의 패스를 만드는 포스터화 팔레트의 다색 모드를 선택합니다.

  3. 3

    임계값과 스무딩 조정

    임계값은 검은색으로 판단할 범위를 정하고, 스무딩은 계단처럼 보이는 픽셀 모서리를 둥글게 만듭니다.

  4. 4

    미리 보고 다운로드

    래스터 이미지와 벡터 버전을 나란히 비교합니다. 만족스러우면 SVG를 다운로드하세요.

벡터화에 잘 맞는 이미지

원본 예상 결과
흰 배경의 검은 로고 단일 패스의 깔끔한 SVG, 픽셀에 가까운 정확도
2–4색 평면 아이콘 선명한 가장자리의 좋은 다중 패스 SVG
손으로 그린 잉크 스케치 스무딩 3–5에서 실용적
사진 나쁨 — 수많은 색이 노이즈 많은 얼룩으로 뭉침
안티앨리어싱된 스크린샷 임계값 처리 후에는 가능하지만 서브픽셀 세부 정보가 사라짐

중요한 설정

  • 임계값(흑백 모드). 채워질 부분과 투명해질 부분을 가르는 기준입니다. 기본값은 128입니다. 얇은 선을 잡으려면 낮추고, 거친 배경을 제거하려면 높이세요.
  • 색상 수(다색 모드). 팔레트 단계 수입니다. 대부분의 로고는 4–8이면 충분합니다. 16을 넘기면 노이즈가 늘고 SVG 뷰어에서 렌더링이 느려질 수 있습니다.
  • 스무딩 / 모서리 임계값. 스무딩이 높으면 모서리가 둥글어집니다. 유기적인 형태에는 좋지만, 날카로운 아이콘 가장자리에는 좋지 않습니다.
  • 패스 단순화. 노드 수를 줄입니다. 강한 단순화는 파일 크기를 줄이지만 얇은 선을 왜곡할 수 있습니다.

내보낸 뒤

SVG를 Illustrator, Inkscape, Figma에서 열어 노드 밀도를 확인하세요. 손으로 정리한 패스는 자동 추적 결과보다 거의 항상 더 작고 매끄럽습니다. 인쇄용 로고라면 벡터 추적 결과를 참고 자료로 삼아 직접 다시 그리는 것도 고려하세요.

자주 묻는 질문

벡터 추적은 색 영역을 패스로 합칩니다. 사진에는 수많은 그라데이션이 있어 추적하면 노이즈가 많은 얼룩 모자이크가 됩니다. 사진에는 JPG나 WebP 같은 래스터 형식이 더 적합합니다.

네. 원본 PNG에 투명 배경이 있으면 추적된 SVG도 그 투명도를 유지합니다. JPG 원본이라면 먼저 배경 제거 도구를 사용하세요.

네. SVG는 절대 좌표를 가진 표준 <path> 요소를 사용하므로, 어떤 벡터 편집기에서도 읽고 노드별로 편집할 수 있습니다.

긴 변 기준 512–2048 px가 이상적입니다. 너무 작은 아이콘은 세부 정보가 사라지고, 너무 큰 이미지는 수천 개의 노드를 만들어 SVG가 커집니다.

아니요. Potrace는 브라우저에서 WebAssembly로 실행됩니다. 아무것도 전송되지 않습니다.

관련 도구