SVGcode 이미지 트레이싱: 내보낸 도형 확인하기
SVGcode에서 Color SVG와 Monochrome SVG를 선택해 같은 이미지를 트레이싱하세요. 내보낸 SVG의 색상, 도형 내부의 구멍, 캔버스를 원본과 비교해 확인합니다.
목차
SVGcode에서 이미지를 트레이싱하려면 래스터 그림을 불러오고 Color SVG 또는 Monochrome SVG를 선택한 뒤 설정을 조정하세요. 최종 판단은 내보낸 SVG 자체를 확인하고 내립니다. 색상, 내부의 구멍, 캔버스를 살펴보세요. 단색 영역으로 구성된 테스트 이미지에서 SVGcode는 실제 경로를 만들고 테두리 안의 구멍을 유지했지만, 두 출력 모두 원래 팔레트와 캔버스는 달라졌습니다.
가지고 있는 이미지를 다른 브라우저 도구에서도 처리해 보려면 PerfectVector에서 무료로 미리보기를 이용하세요. 편집과 내보내기는 잠금 해제 후에 가능합니다. 아래와 같은 도형·색상 확인 기준을 적용하세요. 이 글은 두 도구의 출력 품질을 비교하지는 않습니다.
SVGcode로 트레이싱할 대상과 준비할 내용
SVGcode는 래스터 이미지를 SVG 벡터 그래픽으로 변환합니다. 저자는 색상별로 색상을 트레이싱하는 Potrace 기반 WebAssembly 구현을 설명합니다. 공식 소스 저장소에는 해당 구현이 문서화되어 있습니다. 이것이 접근 방식을 설명하지만 내보낸 파일은 자신의 작품에 대한 증거입니다.
PNG 또는 기타 지원되는 래스터 이미지의 사본, SVGcode에 액세스할 수 있는 브라우저 및 아트워크 처리 권한으로 시작하십시오. 아래 클립보드 경로의 경우 브라우저에서 이미지 클립보드 액세스를 허용해야 합니다. 복사된 SVG 마크업을 저장할 수 있는 일반 텍스트 편집기와 완성 확인을 위한 SVG 뷰어 또는 편집기를 유지하세요.
뚜렷한 색상 영역이 있는 평면 표시는 유용한 첫 번째 입력입니다. 설정을 변경하기 전에 유지해야 하는 색상과 구멍를 기록하십시오. 사진이나 부드러운 그라데이션의 경우 단순화할 수 있는 세부 사항을 결정하세요. 트레이싱은 픽셀에서 의도한 모든 경계를 추론할 수 없습니다. 이미지 벡터화 가이드에서는 래스터-경로 결정에 대해 자세히 설명합니다.
1. 이미지를 불러오고 트레이싱 모드 선택하기
SVGcode를 열고 이미지를 로드하세요. 테스트한 경로의 경우 실제 이미지를 클립보드에 넣고 이미지 붙여넣기를 선택하세요. 무엇이든 조정하기 전에 투명한 영역과 작은 내부 세부 사항을 포함하여 미리 보기에 의도한 이미지가 표시되는지 확인하세요.
별도의 색상 영역이 중요한 경우 색상 SVG를 선택하세요. 단색 실루엣을 원하는 경우 단색 SVG를 사용하세요. 이 연습에서는 전체적으로 컬러 SVG를 사용했습니다. 별도의 흑백 테스트를 보고하지 않습니다.
미리보기 옆에 원본 래스터를 열어두세요. 확대했을 때 가장자리가 부드러워 보이는지 여부만으로 흔적을 판단하지 마십시오. 빈 중앙, 작은 틈 또는 의도적으로 분리된 색상은 매끄러운 외부 가장자리보다 더 중요할 수 있습니다.
2. 확인할 디테일 하나를 정해 설정 바꾸기
작품 외부의 원치 않는 점이나 사라지는 작은 구멍 등 지적할 수 있는 결함 하나부터 시작하세요. 컨트롤 하나를 변경하고 미리보기가 업데이트될 때까지 기다린 후 해당 세부정보를 다시 비교하세요.
반점 억제는 작은 영역을 제거합니다. 높이면 흩어진 점을 제거하는 데 도움이 될 수 있지만 유지하려는 작은 세부 사항을 확인하세요. 입력 이미지 포스터화는 트레이싱 전 색상 변화를 줄입니다. 포스터화는 색상을 더 적은 수준으로 그룹화합니다. 저자의 SVGcode 연습에서는 컨트롤과 채널별 포스터화에 대해 모두 설명합니다.
현재 앱은 획 너비 및 전문가 설정도 표시합니다. 기준 내보내기가 완료될 때까지 필요하지 않은 컨트롤은 그대로 두십시오. 동시 변경 사항이 너무 많으면 어느 것이 결과를 변경했는지 알기가 어렵습니다.
원본 컬러 테스트 이미지에서 확인한 결과
투명한 배경, 구멍가 있는 남색 직사각형 프레임, 금색 직사각형 및 겹치는 청록색 직사각형이 있는 512 × 512 PNG를 만들었습니다. 원본 이미지를 공개 SVGcode 앱에 붙여넣고 Color SVG, Suppress Speckles 2 및 Stroke Width 0을 사용한 다음 두 개의 실제 SVG 출력을 복사했습니다.
첫 번째는 빨간색, 녹색, 파란색이 각각 7단계이고 알파가 1단계인 입력 이미지 포스터화를 사용했습니다. 두 번째는 입력 이미지 포스터화를 선택하지 않은 상태에서 동일한 이미지를 사용했습니다. 두 번째 상태에서는 RGB 및 알파 컨트롤이 비활성화되었습니다.
| 확인하다 | 원본 PNG | 포스터화 사용 | 포스터화 꺼짐 |
|---|---|---|---|
| 단색 영역 색상 | #152b46, #e6aa3c, #3e948d | 검정색, #d4aa00, 청록색 | #002a2a, #d4aa2a, #2a8080 |
| 프레임 오프닝 | 투명한 | 렌더링된 SVG에서 열기 | 렌더링된 SVG에서 열기 |
| 캔버스 | 512 × 512픽셀 | viewBox="0 0 1024 1024" | viewBox="0 0 1024 1024" |
| SVG 구조 | 래스터 입력 | 세 가지 경로, 포함된 이미지 없음 | 세 가지 경로, 포함된 이미지 없음 |
포스터화를 꺼도 이 이미지의 정확한 원래 색상이 복원되지 않습니다. 두 SVG 모두 아트웍을 다른 캔버스에 배치했습니다. 이는 모든 파일에 대한 벤치마크나 예측이 아니라 하나의 제어된 이미지에서 관찰한 것입니다. 색상이나 레이아웃 마스터로 사용하기 전에 실제 내보내기를 확인하는 것이 좋습니다.
3. SVG를 복사하고 실제 마크업 보관하기
미리보기가 준비되면 SVG 복사를 선택하세요. 클립보드를 읽거나 붙여넣기 전에 SVG 최적화가 완료될 때까지 기다리세요. 우리 실행에서는 즉시 읽은 클립보드가 비어 있었습니다. 최적화 후 이를 읽으면 SVG 마크업이 반환되었습니다.
마크업을 일반 텍스트 편집기에 붙여넣고 artwork-trace.svg와 같은 .svg 확장자로 저장합니다. 스크린샷이나 서식 있는 텍스트 문서가 아닌 <svg> 요소와 닫는 </svg>가 포함되어 있는지 확인하세요. 나중에 내보낼 때 참조가 대체되지 않도록 각 설정 변형에 대해 별도의 파일 이름을 유지하십시오.
이것이 우리가 완성한 복사된 마크업 경로입니다. SVGcode에는 SVG 저장도 표시되지만 이 연습에서는 기본 파일 저장 대화 상자 동작이나 다른 앱으로의 성공적인 가져오기를 증명하지 않습니다.
4. 저장된 파일의 색상, 구멍, 캔버스 확인하기
수정되지 않은 소스 옆에 있는 뷰어나 편집기에서 저장된 SVG를 엽니다. 다음 사항을 별도로 확인하세요.
- 팔레트: 중요한 채우기를 의도한 색상 값과 비교합니다. 트레이스는 세 가지 색상을 모두 변경하면서 세 가지 영역을 유지할 수 있습니다. 정확한 색상이 필요한 경우 편집기에서 의도한 채우기를 복원하고 확인하십시오.
- 오프닝: 예술작품 뒤에 대비되는 배경을 배치하세요. 새 배경은 의도한 구멍과 외부 공간을 통해 보여야 합니다. 흰색으로 칠해진 모양은 흰색의 구멍처럼 보일 수 있습니다. 투명 SVG 배경 가이드는 이 둘을 구별하는 방법을 보여줍니다.
- 캔버스: 문서 경계와 아트워크 경계를 검사합니다. viewBox는 SVG의 내부 좌표 직사각형을 정의합니다. 그것은 물리적인 차원을 약속하는 것이 아닙니다. 파일을 사용할 앱에서 여백과 크기를 확인하세요.
- 형상: 중요한 영역을 개별적으로 선택하고 약간 다시 칠하거나 이동한 다음 실행취소하세요. 경로가 포함된 파일에는 의도한 작업에 대한 편집 가능성 검사가 필요합니다.
SVG는 하나의 복합 경로 내부에 여러 윤곽선이 있는 구멍를 나타낼 수 있습니다. SVG 경로 표준은 하위 경로와 구멍을 설명합니다. 보이는 모든 경계에 대해 별도의 경로 요소가 필요하지 않습니다. 반대로, 경로 수가 적다고 해서 의도한 모든 세부 사항이 유지되었음을 증명할 수는 없습니다.
완료 확인은 디지털 방식으로 이루어졌습니다. 복사된 마크업을 검사하고 실제 SVG를 렌더링했습니다. 구멍와 외부 공간은 두 변형 모두에서 투명했습니다. 대상 편집기 가져오기, 인쇄 또는 잘라내기 결과는 테스트되지 않았습니다. 더 폭넓은 파일 전달 검토를 위해서는 벡터 트레이싱 품질 스코어카드를 사용하세요.
확인 중 처음 발견한 문제 해결하기
| 당신이 보는 것 | 다음에 확인할 사항 |
|---|---|
| 흩어진 점들이 남아있습니다 | Suppress Speckles를 조심스럽게 증가시킨 다음 의도적인 작은 부품을 다시 확인하십시오. |
| 작은 기능이 사라집니다 | 관련 없는 컨트롤을 시도하기 전에 소스와 낮은 얼룩 설정을 비교하십시오. |
| 색상이 다릅니다 | 내보낸 채우기를 팔레트와 비교하세요. 계조화를 비활성화하면 정확한 값이 복원된다고 가정하지 마십시오. |
| 구멍이 꽉 차 보이는데 | 대비되는 배경을 테스트한 다음 내부 윤곽이 존재하는지 검사합니다. |
| 작품에 예상치 못한 여백이 있습니다. | 캔버스와 아트워크 경계를 비교합니다. 대상 앱에서 필요한 문서 크기를 설정하세요. |
| SVG 복사는 사용할 수 있는 것이 없습니다. | 최적화를 기다린 후 저장하기 전에 다시 복사하고 붙여넣은 텍스트를 검사하세요. |
| 이미지를 붙여넣을 수 없습니다. | 브라우저에서 클립보드 권한과 앱에 표시되는 기타 이미지 로딩 옵션을 확인하세요. |
구멍이 계속 잘못된 경우 SVG 구멍 문제 해결 가이드는 누락된 트레이싱 형상을 채우기 규칙 해석에서 분리합니다. 직접 정리 도구를 사용한 데스크탑 트레이싱 작업 흐름은 Inkscape 트레이싱 비트맵을 참조하세요.
원본 이미지와 허용된 SVG를 함께 보관하세요. 다음 사람에게 필요할 팔레트 수정이나 캔버스 조정을 적어 두세요. 다른 브라우저 도구에서 기존 작품을 시험해보고 싶다면 PerfectVector를 무료로 시작하고 미리보기의 실루엣과 구멍를 확인하세요.
FAQ
SVGcode가 PNG를 실제 SVG 경로로 트레이싱할 수 있나요?
예. 우리의 원본 평면 컬러 PNG는 세 개의 경로가 포함되고 포함된 이미지가 없는 복사된 SVG 마크업을 생성했습니다. 내보낸 파일을 검사하세요. 그 결과는 모든 이미지에 대해 동일한 구조나 충실도를 보장하지 않습니다.
포스터화를 끄면 원래 색상이 유지되나요?
우리의 통제된 테스트에서는 그렇지 않았습니다. 두 설정 모두 원래 단색 값을 변경했습니다. 내보낸 채우기를 원하는 팔레트와 비교하고 정확한 색상이 중요한 경우 수정합니다.
SVG 캔버스가 내 PNG 크기와 다른 이유는 무엇입니까?
테스트에서 복사된 SVG는 512 × 512 입력의 1024 × 1024 viewBox를 사용했습니다. 소스 픽셀 크기가 유지될 것이라고 가정하는 대신 내보낸 캔버스, 아트워크 경계 및 의도한 디스플레이 크기를 별도로 검사하십시오.
개찰이 투명한지 어떻게 알 수 있나요?
저장된 SVG 뒤에 대비되는 배경을 배치합니다. 오프닝을 통해 보여야 합니다. 그렇지 않은 경우 트레이싱이 내부 윤곽을 잃었는지 아니면 거기에 칠해진 모양이 생성되었는지 검사합니다.
출처
- SVGcode 앱 — 이미지 트레이싱 인터페이스 및 현재 컨트롤.
- web.dev의 SVGcode 작성자 둘러보기 — 색상별 트레이싱, 얼룩 억제 및 포스터라이제이션.
- 공식 SVGcode 저장소 — 프로젝트 구현 및 소스 문서.
- W3C SVG 경로 — 복합 경로, 하위 경로 및 구멍.
