PNGtoSVG 레이어: 색상 제거와 정렬 표시 추가하기
PNGtoSVG의 팔레트에서 색상을 제거하고 색상별 도형에 정합 표시를 추가하세요. 단계마다 SVG를 저장해 내부 경로와 실제로 사용할 수 있는 커팅 조각을 확인합니다.
목차
PNGtoSVG의 팔레트 옵션으로 감지된 색상을 제거하고, 색상별 도형에 서로 맞는 정합 표시를 추가할 수 있습니다. 옵션을 바꿀 때마다 결과를 저장하고 내보낸 SVG를 확인하세요. 화면의 경로 카운터와 SVG 경로 요소 수는 서로 다른 대상을 셀 수 있으므로, 어느 숫자도 실제로 사용할 공예 조각 수를 알려주지는 않습니다.
이 작업은 별도의 Classic 링크가 있는 현재 PNGtoSVG.com 인터페이스를 사용합니다. 같은 원본에서 기본 결과를 저장하고, 흰색을 제거하고, 정합 표시가 있는 파일을 내보냅니다. 여기서 얻는 결과는 검토한 SVG 파일이며, 장비에서 불러오기와 재료 정렬은 별도로 시험해야 합니다.
유지해야 할 색상 정하기
내보내기를 위해서는 허용된 래스터 이미지, 보관된 원본 및 별도의 파일 이름이 필요합니다. 흰색이 원치 않는 배경인지, 의도한 흰색 아트워크인지 또는 둘 다인지 결정합니다. 팔레트는 트레이싱의 색상 세트입니다. 한 가지 색상을 제거하면 해당 채우기가 할당된 모든 영역에 영향을 미칠 수 있습니다.
원래 컨트롤은 불투명 흰색의 384 × 256 RGB PNG였습니다. 흰색 중앙, 청록색 삼각형, 금색 직사각형 및 두 개의 작은 남색 정사각형이 있는 남색 프레임이 있습니다. 우리는 이를 변경하지 않고 재사용하고 2026년 11월 8일에 라이브 웹사이트를 테스트했습니다. 사이트에는 이 소스에 대한 저해상도 경고가 표시되었으며 이는 아래 스크린샷에 계속 표시되어 있습니다.
방법: 3개의 실제 SVG 내보내기를 유지하고 해당 XML, 채우기 및 문서 경계를 비교했습니다. 이것은 사진 품질 벤치마크, PerfectVector 비교 또는 Cricut 가져오기/컷 테스트가 아닌 하나의 작은 기하학적 제어입니다.
기준 결과를 저장한 뒤 팔레트의 흰색 제거하기
- PNGtoSVG.com을 열고 파일 찾아보기를 사용하여 소스를 선택하세요. 원본 이미지 보기에 의존하기보다는 벡터 결과를 기다리십시오.
- 첫 번째 비교를 위해 자동 시작 결과를 유지하세요. 우리의 실행은 로고/클립 아트, 높음, 색상 10, 디테일 84, 스무딩 0, 반점 5 및 모서리 45를 사용했습니다. 감지된 팔레트에는 네 가지 색상이 포함되어 있습니다. 이는 기록된 테스트 설정이며 모든 이미지에 권장되는 사전 설정은 아닙니다.
- 등록 표시를 끄고 다운로드를 사용하여
baseline.svg를 저장하세요. - 흰색 팔레트 항목을 찾아 해당 × 제거 컨트롤을 선택하세요. 결과가 업데이트될 때까지 기다린 후 별도의
white-removed.svg를 저장하세요. - 저장된 결과를 원본과 비교하십시오. 특히 의도한 흰색 세부 사항과 작은 분리된 표시를 비교하십시오.
PNGtoSVG의 팔레트 FAQ에서는 ×를 색상 경로 제거로 설명합니다. 단순히 흰색을 다른 색상으로 칠하는 것이 아니라 기하학적 변화로 간주하십시오. 디자인에 흰색 글자나 흰색 하이라이트가 포함된 경우 이 변형을 유지하기 전에 검사하세요.
저장된 기준 결과에서는 4개의 경로 요소에 흰색을 포함한 4개의 채우기 색상이 포함되어 있습니다. 흰색을 제거한 후 SVG에는 세 개의 경로 요소가 있었고 흰색 채우기는 없었습니다. 웹사이트 비교에서는 네이비 프레임의 중앙이 바둑판으로 보였지만 원본의 중앙은 흰색으로 유지되었습니다.
제거 작업으로 인해 원하는 아트워크가 손실된 경우 색상을 복원하거나 원본을 다시 로드하고 저장된 기준 결과에서 다시 빌드하세요. 이미 중요한 세부 사항에 실패한 결과 위에 팔레트를 계속 변경하지 마십시오.
레이어 수를 세기 전에 색상별 경로 이해하기
인터페이스에는 기준 결과에 대한 11개 경로가 표시되었지만 다운로드한 SVG에는 4개의 <path> 요소가 포함되어 있습니다. 흰색을 제거한 후 인터페이스에는 5개의 경로가 표시되었지만 파일에는 3개의 경로 요소가 포함되어 있었습니다.
복합 경로는 여러 하위 경로를 포함하는 하나의 경로 요소입니다. SVG는 하나의 요소 내에 별도의 윤곽선과 내부 구멍를 포함하여 이러한 구성을 명시적으로 허용합니다. SVG 경로 사양에 해당 관계가 설명되어 있습니다. 이 내보내기에서는 채우기가 동일한 형상이 경로 요소를 공유했기 때문에 XML 요소 수가 인터페이스 카운터와 일치하지 않았습니다.
카운터를 사용하여 도구의 미리보기를 따른 다음 대상 앱이 저장된 형상을 어떻게 표시하는지 검사하세요. 색상 경로에는 연결되지 않은 여러 조각이 포함될 수 있습니다. 모든 시각적 개체에 대해 명명된 편집기 레이어를 증명하지 않으며, 작은 조각을 자르거나 배치하기 쉽다는 것도 증명하지 않습니다.
다음 준비 단계에서는 계층형 SVG 가이드를 통해 색상 구성을 기계에서 바로 사용할 수 있는 프로젝트와 분리합니다. 색상당 하나의 파일이 필요한 경우 SVG 색상을 파일로 분리하는 방법을 참조하세요.
정렬이 필요할 때만 정합 표시 추가하기
PNGtoSVG의 FAQ에서는 등록 표시를 각 색상 레이어에 추가된 일치하는 모서리 형상으로 설명합니다. 이는 색상 아트웍을 위한 정렬 보조 도구입니다. 여기서는 Cricut Print Then Cut 센서 마크나 기계 자체의 인쇄 및 절단 작업 흐름을 대체하는 것으로 입증되지 않았습니다.
흰색이 여전히 제거된 상태에서 등록 표시를 활성화하고 세 번째 SVG를 white-removed-registration-marks.svg로 저장하세요. 해당 파일을 덮어쓰는 대신 표시되지 않은 내보내기와 비교하십시오.
표시된 내보내기에는 여전히 세 가지 경로 요소가 있습니다. 각 색상 경로에는 모서리에 동일한 4개의 8 × 8 정사각형 하위 경로가 포함되어 있습니다. 마크는 viewBox를 0 0 384 256에서 -20 -20 424 296으로 확장했습니다. 너비와 높이도 384 × 256에서 424 × 296으로 변경되었습니다.
viewBox는 그림에 사용되는 SVG 좌표 영역을 설명합니다. 이 예에서 더 큰 경계에는 원본 이미지 영역 외부의 형상이 포함됩니다. 문서 크기를 비교할 때 이러한 차이점을 염두에 두십시오. 이는 중앙 아트웍이 새로운 물리적 크기로 조정되었음을 의미하지 않습니다.
| 내보내다 | SVG 경로 요소 | 바이트 | 저장된 문서 경계 |
|---|---|---|---|
| 기준 결과 | 4 | 3,106 | 0 0 384 256 |
| 흰색이 제거됨 | 3 | 1,648 | 0 0 384 256 |
| 흰색이 제거되고 표시가 나타납니다. | 3 | 2,024 | -20 -20 424 296 |
일치하는 정사각형 형상이 이 파일에서 확인됩니다. 실제 재료의 성공적인 정렬은 테스트되지 않았습니다. 표시되지 않은 복사본을 유지하고 대상 앱에서 추가 모양이 준비 중인 작업에 속하는지 여부를 결정하세요.
공예 작업 전에 저장된 파일 확인하기
웹사이트 미리보기와 별도로 허용된 SVG를 엽니다. 의도한 색상이 남아 있는지, 흰색을 제거해도 원하는 아트워크가 지워지지 않는지, 별도의 색상 조각이 여전히 예상 위치를 차지하고 있는지 확인하세요. 표시가 활성화된 경우 네 모서리 모두와 새 문서 경계를 검사합니다.
자르기의 경우 실제 치수, 작은 세부 사항, 색상 할당 및 정렬 보조 장치에 적용되는 작업 등 나머지 검사는 수신 앱에 속합니다. 프로젝트를 반복하기 전에 간단한 재료 테스트를 실행하십시오. 성공적인 브라우저 다운로드는 해당 단계를 완료하지 않습니다.
Cricut 변환기 선택 가이드에는 다른 시작 경로가 나와 있습니다. 팔레트 컨트롤과 저장된 형상이 작업에 적합하면 PNGtoSVG를 사용하세요. 제한된 테스트 후에도 중요한 영역이 여전히 어색한 경우 다른 트레이싱 또는 수동 편집을 사용하십시오.
자동 트레이싱이 도움이 되는 다음 단계일 때
PerfectVector는 원본 래스터에서 시작하여 공예 준비를 수행하기 전에 자동 트레이싱을 검사하려는 경우에 적합합니다. 자신의 이미지와 함께 SVG for Cricut 페이지를 사용한 다음 필요한 가장 작은 부분, 내부 구멍 및 각 색상 영역을 검사하세요. 이는 별도의 트레이싱 옵션이며, 이 테스트에서 출력이 PNGtoSVG에 대해 측정되었다는 주장이 아닙니다.
PerfectVector의 제품 정보에는 보기 전용 무료 미리보기가 설명되어 있습니다. 결과를 편집하거나 내보내려면 먼저 결과를 잠금 해제해야 합니다. 결과 파일은 여전히 수신 앱에서 확인이 필요합니다. 이미 허용 가능한 형상이 있는 경우 이를 재트레이싱해도 필요한 준비 단계가 추가되지 않습니다.
FAQ
인터페이스에 포함된 SVG 파일보다 더 많은 경로가 표시되는 이유는 무엇입니까? 저장된 색상 경로에는 여러 하위 경로가 포함되어 있으므로 하나의 SVG 경로 요소가 여러 개의 개별 윤곽선을 보유할 수 있습니다. 인터페이스 카운터는 XML 경로 요소 개수나 의미 있는 공예품 개수가 아닙니다.
흰색을 제거하면 배경만 다시 칠해지나요? 아니요. PNGtoSVG는 × 컨트롤을 해당 색상의 경로를 제거하는 것으로 설명합니다. 결과를 수락하기 전에 흰색 아트워크와 외부 배경을 확인하세요.
이 표시는 Cricut Print Then Cut 센서 표시입니까? 이 테스트로는 내보낸 색상별 경로에 서로 맞는 정렬용 사각형이 있다는 점을 확인했습니다. Cricut의 센서 마크 작업 절차와 호환되는지를 검증한 것은 아닙니다. 파일을 받는 앱의 공식 안내를 따르고, 제작 전에 의도한 작업이 가능한지 확인하세요.
출처
- PNGtoSVG — 이미지 벡터화 도구 및 FAQ — 현재 팔레트 제거, 등록 표시 설명 및 이 테스트에 사용된 실제 인터페이스.
- W3C — SVG 2 경로 — 여러 하위 경로가 하나의 경로 요소에 속할 수 있습니다.
- W3C — SVG 2 좌표계 — 표시된 내보내기를 설명하는 데 사용되는 viewBox 및 좌표 영역 구분입니다.
- PerfectVector — 제품 정보 — 무료 미리보기 및 잠금 해제된 편집/내보내기 경계.
PerfectVector에서 나만의 이미지로 무료로 시작한 다음, 공예 앱에서 프로젝트를 준비하기 전에 색상, 입구, 작은 부분을 검사하세요.
