비트맵 로고 벡터화: PNG/JPG에서 SVG 변환의 원리 및 적용 범위

VTracer의 색상 계층화 모드에서 벡터화는 첫 단계로 입력된 비트맵의 픽셀을 색상별로 클러스터링하여 동일한 색조와 밝기를 가진 픽셀을 동일한 색상 계층으로 그룹화합니다.

클러스터링이 완료된 후 각 색상 계층의 윤곽을 2차 베지어 경로로 피팅합니다. 다른 색상 계층은 원본 적층 순서대로 편집 가능한 SVG 파일로 출력되어 원본 로고의 계층 구조가 보존됩니다.

벡터 트레이싱의 출력 품질은 입력 이미지의 콘텐츠 유형과 강한 상관관계가 있습니다. 가장자리가 명확하고 색상 블록 수가 제한되어 있으며 연속 그라데이션이 없는 이미지는 안정적으로 소수의 색상 계층으로 클러스터링되어 부드러운 SVG 경로를 얻을 수 있고 노드 수를 제어할 수 있습니다. 이러한 이미지에는 소프트웨어 로고, 애플리케이션 아이콘, 실루엣 그래픽, 흑백 텍스트 등이 포함됩니다.

사진과 그라데이션 일러스트는 벡터화에 적합하지 않습니다: 연조 영역가 수십 개의 색상 계층으로 강제 분할되어 생성된 SVG는 원본 비트맵보다 크기가 더 커지고 시각적으로 색상 밴딩 아티팩트가 나타납니다. 이러한 종류의 콘텐츠는 비트맵 형식으로 유지하고 크기를 축소할 때는 크기 조정 또는 압축 도구를 사용해야 하며 벡터 트레이싱을 사용하지 않습니다.

스캔이나 스크린샷으로 얻은 비트맵 로고에는 종종 고립된 작은 노이즈 픽셀 영역이 존재합니다. 이러한 영역은 벡터화 후에 불필요한 미세 경로를 생성합니다.

filterSpeckle 매개변수는 픽셀 영역 임계값을 통해 노이즈를 필터링합니다. 값이 높을수록 필터링되는 작은 영역의 임계값이 커져 출력 SVG에 불필요한 경로가 적어지고 파일 크기가 작아집니다.

직접 비트맵 업스케일링은 보간 알고리즘에 의존하며 기존 픽셀에서 계산하여 새 픽셀을 생성합니다. 배율이 3배를 초과하면 가장자리가 흐려지거나 계단현상이 발생하여 인쇄 출력 요구 사항을 충족할 수 없습니다.

벡터화로 얻은 SVG는 베지어 경로 좌표를 저장합니다. 몇 배로 확장하더라도 경로 가장자리는 일관되게 부드러움을 유지합니다. 경로 설명은 인쇄 장비에서 직접 파싱할 수 있으며 출력 정확도가 인쇄 요구 사항을 충족합니다.

Figma 데스크톱 버전 2023 이상에서는 출력 SVG 파일을 캔버스에 드래그 앤 드롭한 후 오른쪽 클릭으로 그룹 해제를 선택하면 다른 색상 계층으로 분할되며 각 경로의 색상과 형상을 개별적으로 수정할 수 있습니다.

Adobe Illustrator CS6 이상 버전에서는 출력 SVG 파일을 직접 엽니다. 레이어 패널에서 분할된 색상 계층을 확인할 수 있으며 해당 경로를 선택해 획 또는 채우기 속성을 조정할 수 있습니다.