이미지를 SVG로 변환하기

소개

이 문서는 원본 준비부터 SVG 다운로드의 채택·보류 판단까지 한 번의 변환 과정을 안내합니다. 무엇을 바꿨는지 기록하고 최종 파일을 점검하며 대체할 원본도 남기는 것이 목표입니다.

트레이싱은 픽셀에서 도형을 추정하며 디자인 레이어를 복구하지는 않습니다. 그 차이는 Raster vs Vector에서 설명합니다. 여기서는 변환 전후의 실무 결정에 집중합니다.

변환 여부를 판단하는 세 가지 기준

1. 시각적 구조: 중요한 부분을 관리 가능한 도형으로 표현할 수 있나요?
2. 실제 이점: 현재 원본으로 충족하지 못하는 요구 사항이 무엇인가요?
3. 출력 비용: 최종 다운로드가 용량, 모습, 편집 요구를 만족하나요?

사진이나 복잡한 스크린샷은 명확한 벡터 요구가 있을 때만 테스트합니다. 실패 진단은 When NOT to use SVG에서 다루므로 사진을 올릴 때마다 같은 실험을 반복할 필요는 없습니다.

비교 가능한 입력 준비하기

변경하지 않은 원본을 보관합니다. 표시 크기와 배경, 글자 안의 빈 공간이나 얇은 선처럼 반드시 남아야 할 요소를 정합니다. 불필요한 여백만 자르고, 도형에 속한 부드러운 경계나 그림자는 잘라내지 않습니다.

입력이나 모드는 한 번에 하나만 바꿉니다. 자르기, 배경 제거, 모드 변경을 동시에 하면 어떤 변경으로 디테일이 사라졌는지 알기 어렵습니다. PNG와 JPG 준비 문서에서는 각 형식의 경계 문제를 설명합니다.

업로드 전에 트레이스 모드 선택하기

색상이 의미를 전달하면 Color부터 시작하세요. Line art가 편집 가능한 선 중심선을 보장하지는 않습니다. 모드 이름으로 구조를 추측하지 말고 실제 도형을 확인하세요.

실제 변환 사례: 단순한 로고

2026년 9월 13일 측정한 Color / Original 저장 결과입니다. 절감률만 보지 말고 글자, 마크 안의 틈, 흰 캔버스를 검토하는 연습으로 활용하세요.

원본 PNG

SVGKIT 변환 결과

원본

480,220 B

SVG

19,246 B

경로

177

측정일: 2026-09-13 · 설정: Color / Original

원본 다운로드SVG 다운로드측정 기록 (JSON)

공개 PNG는 480,220바이트이며 저장된 SVG는 19,246바이트, 경로 177개입니다. 약 96.0% 감소는 이 출력만의 결과입니다. 압축 전송량이나 렌더링 시간을 측정한 값도, 디자이너의 원래 객체를 복구했다는 뜻도 아닙니다.

실제 배포할 파일 검토하기

다운로드한 SVG를 도구 밖에서 다시 엽니다. 실제 사용 크기와 확대 상태를 비교하고 사용할 배경에서도 확인합니다. 글자 내부 공간, 빈틈, 작은 점, 경계 색상, 투명해야 하는 배경을 살펴보세요.

원본, 모드, 최종 바이트, 경로 수, 채택 여부를 기록합니다. 보편적인 경로 수 제한은 없습니다. 가끔 쓰는 일러스트와 수백 번 반복되는 아이콘은 조건이 다릅니다. 의미 있는 디테일을 잃었다면 파일이 작아져도 채택하지 않습니다.

흔히 하는 실수

다른 범위로 자른 이미지를 비교하기

같은 캔버스로 비교하세요. 더 좁게 자르면 마크가 크게 표시되어 더 선명해 보일 수 있습니다.

모든 설정을 동시에 바꾸기

변경하지 않은 입력으로 돌아가 하나씩 조정하세요. 그래야 좋아진 결과를 재현할 수 있습니다.

최적화로 사라진 선을 복원하려고 하기

SVGKIT은 트레이싱 뒤 자동 최적화를 적용합니다. 마크업 비용을 줄일 수는 있지만 트레이싱에서 버린 정보를 복구하지는 못합니다.

권장 사항

• -채택한 다운로드를 원본·모드와 함께 구분해 보관합니다.
• -별도 이미지 탭뿐 아니라 실제 삽입 환경에서 확인합니다.
• -나중에 편집하거나 다시 최적화하면 재검토합니다.
• -교체가 승인될 때까지 래스터 원본을 유지합니다.

실무 작업 순서

1. 1
   표시 크기, 배경, 유지해야 할 디테일을 정합니다.
2. 2
   원본을 보관하고 별도 작업 사본을 준비합니다.
3. 3
   트레이스 모드를 선택하고 업로드한 뒤 결과를 기다립니다.
4. 4
   미리보기를 확인하고 최종 SVG를 다운로드해 다시 엽니다.
5. 5
   모습, 바이트, 편집 요구를 원본 기준과 비교합니다.
6. 6
   짧은 기록과 함께 채택하거나 원본을 유지하고 실패를 진단합니다.

자주 묻는 질문

변환할 때마다 SVG Optimizer를 실행해야 하나요?

아닙니다. SVGKIT 변환에는 최적화가 포함됩니다. 편집 후, 다른 도구의 출력 정리, 의도적인 설정 비교에 별도 최적화를 사용하세요.

미리보기가 정상이면 왜 다운로드를 다시 열어야 하나요?

배포하는 것은 미리보기가 아니라 파일입니다. 파일 선택 실수를 확인하고 실제 배경, 표시 크기, 삽입 환경을 검토할 수 있습니다.

트레이싱한 글자도 선택할 수 있나요?

대체로 문자가 아니라 도형이 됩니다. 선택·검색·문구 수정이 필요하면 실제 텍스트를 사용하세요.