Vectorpea 비트맵 트레이싱 설정과 SVG 내보내기
Vectorpea에서 래스터 이미지를 선택하고 Vectorize Bitmap으로 트레이싱하세요. 설정을 검토해 SVG로 내보낸 뒤 실제 경로와 채우기, 도형 내부의 구멍을 확인합니다.
목차
Vectorpea에는 Vectorize Bitmap 트레이싱 기능이 내장돼 있습니다. 래스터 이미지를 선택하고 도구 모음에 나타나는 Vectorize Bitmap 버튼을 누른 뒤, 설정을 검토하고 확정해 SVG로 내보내세요. 원본인 3색 PNG를 테스트했을 때 의도한 채우기와 테두리 중앙의 구멍을 유지한 실제 SVG 경로 세 개가 만들어졌습니다. 캔버스에서 매끄럽게 보이는 것보다 저장된 파일을 확인하는 일이 더 중요합니다.
같은 이미지를 다른 온라인 도구에서도 처리해 보려면 PerfectVector로 무료로 시작하고 원본과 미리보기의 실루엣, 색상 영역, 구멍을 비교하세요. 편집과 내보내기는 잠금 해제 후에 가능합니다. 이 글은 Vectorpea의 내장 기능으로 작업을 마치는 절차이며, 두 도구의 출력 품질을 비교하지는 않습니다.
현재 Vectorpea 앱에서 비트맵 선택하기
Vectorpea를 열고 원본 래스터 이미지의 별도 사본을 보관하세요. 저장된 파일 확인을 위해서는 브라우저 액세스, 아트워크 처리 권한, SVG 뷰어 또는 일반 텍스트 편집기가 필요합니다. 아래의 클립보드 로딩 경로에도 이미지 클립보드 액세스가 필요합니다.
검색 결과를 따라갈 때 앱 이름을 확인하세요. Photopea Vectorize Bitmap 안내는 Photopea의 Image 메뉴를 설명하므로 다른 앱의 작업 절차입니다. Vectorpea 이슈 72 같은 과거 논의는 배경을 이해하는 데 참고하고, 이 글에서 완료한 작업은 현재 Vectorpea의 옵션과 실제 내보낸 파일을 기준으로 판단해야 합니다.
이번 실행에서는 새 문서를 생성하고 편집 → 붙여넣기를 통해 원본 PNG를 붙여넣었습니다. 래스터는 image.ai라는 문서에 나타났습니다. 캔버스에서 해당 래스터 이미지를 선택합니다. 그러면 비트맵 벡터화 버튼이 기본 메뉴 아래 도구 모음에 나타납니다. 테스트된 세션에서 불투명도 제어 직전이었습니다.
버튼이 없으면 먼저 무엇을 선택했는지 확인하세요. 문서, 경로 그룹 및 실제 비트맵은 서로 다른 입력입니다. 비트맵 관련 명령을 찾기 전에 트레이싱하려는 래스터를 선택하세요. 기존 SVG의 경우 SVG 객체 유형 가이드를 통해 경로, 그룹, 삽입된 이미지를 구분하는 데 도움이 됩니다.
트레이싱 설정을 바꾸기 전에 기준 결과 기록하기
비트맵 벡터화를 클릭하여 기본 대화상자를 엽니다. 테스트된 대화 상자는 색상, 만화/사진, 노이즈 감소 및 색상 병합을 노출한 후 OK을 선택했습니다. 캡처한 앱 세션에서는 한국어 인터페이스 라벨을 사용했습니다. 여기에 있는 이름은 영어로 동일합니다.
우리는 원래의 평면 색상 컨트롤에 대해 관찰된 설정 상태를 사용했습니다.
| 제어 | 테스트된 상태 | 트레이싱을 승인하기 전에 검사할 세부정보 |
|---|---|---|
| 그림 물감 | 20 | 의도한 색상 영역이 뚜렷하게 유지되는지 여부 |
| 방법 | 만화 | 실루엣과 모서리가 작품에 어울리는지 여부 |
| 소음 감소 | 끄다 | 작은 흔적이 의도적인 디테일인지, 흩어진 조각인지 |
| 색상 병합 | ~에 | 별도의 색상이 필요한 영역이 구별 가능하게 유지되는지 여부 |
이를 범용 사전 설정이 아닌 기록된 기준으로 간주합니다. 모든 조합을 비교하거나 별도의 사진 모드 실험을 실행하지 않았습니다. 자신의 이미지에 대한 설정을 변경하는 경우 한 번에 하나씩 변경하고 작은 구멍나 인접한 두 색상과 같은 특정 세부 사항을 비교하십시오.
트레이싱을 적용하려면 OK을 클릭하세요. 문서에서 레이어 패널은 Background 아래에 Path 0, Path 1 및 Path 2를 표시했습니다. 이러한 항목은 트레이싱을 보고 있지만 내보낸 SVG에는 여전히 검사가 필요하다는 것을 먼저 확인하는 데 유용합니다.
트레이싱 결과를 SVG로 내보내기
트레이싱된 아트워크가 있으면 파일 → 다른 이름으로 내보내기 → SVG를 선택한 다음 내보내기 흐름에서 저장을 선택하세요. 원본 PNG를 별도로 보관하고 SVG에 고유한 파일 이름을 지정하면 나중에 두 파일을 비교할 수 있습니다.
우리의 실행은 SVG 내보내기를 완료하고 실제 파일을 유지했습니다. .ai로 끝나는 문서 탭이 내보낸 형식을 결정하지 못했습니다. 선택한 SVG 내보내기가 수행되었습니다. 이 연습에서는 기본 파일 다시 열기 또는 이후 수동 편집 통과를 증명하지 않습니다.
뷰어에서 저장된 SVG를 열고 텍스트나 개체 구조를 검사합니다. 경로, 포함된 이미지, 중요한 채우기 값 및 문서 경계를 찾으세요. 이미지 기반 또는 혼합 콘텐츠의 경우 SVG 래스터 콘텐츠 검사 가이드에서 이미지 요소가 참조하는 내용을 확인하는 방법을 설명합니다.
원본 테스트 이미지에서 실제로 만들어진 결과
투명한 배경에 남색 프레임과 빈 중앙, 금색 삼각형과 청록색 직사각형이 있는 비민감 320 × 240 PNG를 만들었습니다. 원본 래스터를 Vectorpea에 붙여넣고 기록된 기본 설정을 적용한 후 결과 SVG를 저장했습니다. 그런 다음 실제 마크업을 검사하고 저장된 파일을 독립적으로 렌더링했습니다.
| 확인하다 | 이 테스트 참조의 저장된 결과 |
|---|---|
| 경로 요소 | Path 0, Path 1 및 Path 2로 명명된 3개 |
| 삽입된 이미지 요소 | 없음 |
| 솔리드 채우기 값 | #17324d, #e7b64c, #298d83, 세 개의 원래 단색 영역과 일치 |
| 프레임 구멍 및 외부 공간 | 렌더링된 SVG에서 투명함 |
| 캔버스 | viewBox="0 0 320 240" |
| 파일 크기 | 660바이트 |
색상 값은 20이었지만 이 내보내기에는 세 개의 경로 요소가 포함되었습니다. 해당 설정 값은 모든 결과에서 다시 읽을 수 있는 개체 개수가 아닙니다. 보다 일반적으로, 경로 수만으로는 올바른 세부 정보가 유지되었는지 여부를 알 수 없습니다.
프레임 경로는 fill-rule="evenodd"를 사용했습니다. 채우기 규칙은 경로의 어느 부분이 내부로 간주되는지 결정합니다. SVG 채우기 규칙 사양에서는 닫힌 하위 경로가 어떻게 구멍를 남길 수 있는지 설명합니다. 흰색으로 보이는 중앙이 투명하다고 가정하는 대신 대비되는 배경 위에 저장된 렌더링을 확인하세요.
이 결과는 간단한 기하학적 이미지 하나와 설정 한 가지에서 나온 것입니다. 테스트에서 채우기 색이 정확했다는 사실만으로 모든 로고, 스캔, 사진의 색이 정확하게 보존된다고 판단할 수는 없습니다. 다른 편집기에서 불러오기, 원래 앱의 문서 형식으로 다시 열기, 수동 색상 변경, 실물 출력은 시험하지 않았습니다.
트레이싱을 마치기 전에 자신의 파일 확인하기
저장된 SVG 옆에 있는 손대지 않은 래스터를 사용하고 다음 네 가지를 검사합니다.
- 실루엣 및 간격: 외부 윤곽선, 모서리, 카운터 및 좁은 간격을 필요한 크기로 비교하세요.
- 색상 영역: 중요한 채우기를 의도한 팔레트와 비교하세요. 가까이 보이는 영역에는 여전히 의도적인 색상 교정이 필요할 수 있습니다.
- 빈 공간: SVG 뒤에 대비되는 배경을 배치하세요. 필요한 구멍와 외부 영역을 통해 보여야 합니다.
- 객체 및 캔버스: 경로 구조와 문서 경계를 검사합니다. 추가 편집이 필요한 경우 사본에서 의도한 편집을 시도하고 저장된 결과를 확인하십시오.
| 문제 | 다음 확인 |
|---|---|
| 벡터화 비트맵이 표시되지 않습니다. | 기존 경로나 그룹 대신 래스터 이미지를 선택하세요. |
| 작은 기능이 사라집니다 | 소스를 기준 결과 및 변경한 단일 설정과 비교하세요. |
| 색상이나 지역이 일치하지 않습니다. | 색상과 관찰된 병합 설정을 다시 확인한 다음 새 내보내기를 검사합니다. |
| 문자나 프레임의 중앙이 채워져 나타납니다. | 대조되는 배경을 확인하고 내부 윤곽선/채우기 규칙을 검사합니다. |
| 내보낸 파일에 여전히 이미지가 포함되어 있습니다. | 실제로 내보낸 내용과 기본 트레이싱이 적용되었는지 확인 |
더 완전한 전달을 위해서는 벡터 트레이싱 품질 스코어카드를 사용하세요. 래스터에서 중요한 윤곽선이 모호한 경우 설정을 반복적으로 변경하는 것보다 수동으로 다시 그리는 것이 더 유용할 수 있습니다. 동일한 소스로 다른 경로를 시도하고 싶다면 PerfectVector로 무료로 시작하고 미리보기의 실루엣, 색상 영역 및 구멍를 원본과 비교하세요.
FAQ
Vectorpea에는 기본 벡터화 비트맵 기능이 있나요?
예. 테스트된 현재 앱에서 붙여넣은 래스터를 선택하면 벡터화 비트맵 도구 모음 버튼이 표시됩니다. 대화 상자를 적용하면 표시되는 경로 항목이 생성되었으며 실제 SVG 내보내기에는 포함된 이미지가 없는 경로가 포함되었습니다.
Vectorpea에서 Photopea의 이미지 메뉴 지침을 따라야 합니까?
현재 Vectorpea 컨트롤을 사용하세요. 우리의 Vectorpea 실행은 래스터 선택 후에 나타나는 도구 모음 버튼을 사용했습니다. Photopea의 문서화된 이미지 메뉴는 별도의 앱 작업 흐름에 속합니다.
색상 20은 SVG에 경로가 20개 있다는 뜻인가요?
아니요. 테스트 참조에서는 Colors 20을 사용하고 세 가지 경로를 내보냈습니다. 설정값을 보장된 경로 개수로 다루기보다는 실제 객체와 의도한 영역을 검사합니다.
테스트에서 원래 색상과 프레임 오프닝이 유지되었나요?
예, 이 오리지널 3색 제어용입니다. SVG에는 세 가지 정확한 솔리드 채우기 값이 포함되어 있으며 렌더링된 프레임 구멍와 외부 공간은 투명했습니다. 이는 모든 이미지에 대해 동일한 결과를 보장하지 않습니다.
출처
- Vectorpea 앱 — 기본 트레이싱 컨트롤 및 완성된 SVG 내보내기 워크플로입니다.
- Photopea Vectorize 비트맵 문서 — 검색 결과에 나타날 수 있는 별도의 Photopea 메뉴 워크플로를 식별합니다.
- Vectorpea 문제 72 — 현재 앱 증거와는 다른 과거 기능 요청 컨텍스트입니다.
- W3C SVG 채우기 규칙 — 포함된 하위 경로 및 짝수 채우기 규칙.
