Running crop…
``` 다음을 `crop.js`로 저장합니다. 로컬 HTTP 서버로 폴더를 제공하고 `index.html`을 여세요. 스크립트가 같은 폴더의 SVG 파일을 가져옵니다. ```js (async () => { paper.setup(document.getElementById('work')); const source = await (await fetch('source.svg')).text(); const imported = paper.project.importSVG(source, { insert: false, expandShapes: true }); const crop = new paper.Path.Rectangle({ rectangle: new paper.Rectangle(60, 40, 160, 120), insert: false }); const delivery = new paper.Group({ insert: false }); const rows = []; for (const name of ['frame', 'triangle', 'leaf', 'outside']) { const operand = imported.getItem({ name }); if (!(operand instanceof paper.Path || operand instanceof paper.CompoundPath)) { throw new Error('Expected filled path: ' + name); } const result = operand.intersect(crop, { insert: false, trace: true }); if (Math.abs(result.area) < 1e-8) { rows.push({ name, removed: true }); result.remove(); continue; } result.fillColor = operand.fillColor.clone(); result.fillRule = operand.fillRule; result.strokeColor = null; result.opacity = 1; result.name = 'cropped-' + name; delivery.addChild(result); rows.push({ name, result: result.className, fill: result.fillColor.toCSS(true), area: result.area }); } delivery.translate(new paper.Point(-60, -40)); paper.project.activeLayer.addChild(delivery); const output = paper.project.exportSVG({ asString: true, precision: 6, bounds: new paper.Rectangle(0, 0, 160, 120) }); document.getElementById('svg-output').textContent = output; document.getElementById('receipt').textContent = JSON.stringify({ paper: paper.version, rows, export_precision: 6, viewport: [0, 0, 160, 120] }, null, 2); document.getElementById('status').textContent = 'Intersection/export executed. Save the exact visible SVG output as cropped.svg and open that saved file independently.'; })().catch(e => { document.getElementById('status').textContent = 'FAIL: ' + e.message; }); ``` 명시적인 이름 목록은 원본의 그리기 순서를 따릅니다. 남겨진 각 결과에 고유한 단색 채우기를 적용하고 그 순서로 추가합니다. 먼저 전체 아트워크를 하나의 실루엣으로 합치면 보존하려는 개별 색상 영역이 사라집니다. [Paper.js 불리언 가이드](https://perfectvector.com/ko/blog/paperjs-svg-booleans)는 다른 작업인 합집합과 빼기를 다룹니다. 완전히 바깥에 있는 노란 객체의 교차 결과는 비어 있으므로 제외됩니다. 작은 면적 임계값은 이 시험 도형을 위한 방어 조건일 뿐, 임의의 아트워크에서 세밀한 부분을 삭제해도 된다는 뜻이 아닙니다. 남은 도형을 `(-60, -40)`만큼 이동하고 0에서 시작하는 `160 × 120` 뷰포트로 내보냅니다. 이 이동은 출력의 좌표 원점을 바꿉니다. 불필요한 바깥 도형을 제거하는 것은 교차 연산입니다. 원점이나 뷰포트만 바꿔서는 제거되지 않습니다. Paper.js의 [프로젝트 내보내기 참고 문서](https://paperjs.org/reference/project/)는 여기서 사용하는 명시적 경계와 수치 정밀도를 설명합니다. ## 실제 SVG를 저장하고 다시 열어 검사하기 화면에 표시된 SVG 마크업을 그대로 `cropped.svg`에 복사합니다. 프로그램의 메모리 내 미리보기에만 의존하지 말고 저장된 파일을 독립적으로 엽니다. 이 시험에서는 별도 페이지가 저장 파일을 불러와 새 Paper.js 스코프로 가져오고 브라우저의 SVG 이미지 렌더러로 표시했습니다.  *직접 제작한 다각형 아트워크와 실제 저장 파일 검사입니다. 클립은 원래 객체를 유지하지만 교차 연산을 거친 출력에는 남긴 도형만 들어 있습니다. 임의의 SVG나 절단기 호환성을 입증하지는 않습니다.* 파일 구조, 도형, 모양은 나누어 확인합니다. * 내보낸 SVG에는 결과 경로 요소 세 개가 있으며, 프레임의 개구부를 유지하므로 닫힌 윤곽선은 네 개입니다. * 이 통제된 출력에는 자르기 보조 객체, 원래 객체 ID, 클리핑 경로, 마스크, 래스터 이미지, 효과 요소가 없습니다. * 다시 연 모든 윤곽선은 닫혀 있고 직선 구간으로 이루어져 있습니다. 허용 오차 `0.00001` 사용자 단위 안에서 모든 꼭짓점이 출력의 `0…160`, `0…120` 영역에 들어 있습니다. * 의도한 개구부는 채워진 도형 밖으로 남고 렌더링된 파일에서 투명합니다. 확인한 겹침 위치에서는 주황 영역이 여전히 청록색 위에 보입니다. * 브라우저 렌더링 비교로 클립만 적용한 미리보기와 자른 파일을 같은 크기에서 확인하며, 도형 검사와는 별도로 수행합니다. 이 직사각형 영역과 직선 구간 시험 도형에서는 모든 꼭짓점과 닫는 변을 확인하면 저장된 윤곽선이 영역 안에 있음을 입증할 수 있습니다. 핸들이 있는 곡선이나 오목한 자르기 영역에는 다른 포함 여부 검사가 필요합니다. 몇 점을 샘플링하는 것으로 같은 결과를 입증할 수는 없습니다. 이미지 비교에는 `640 × 480` 래스터를 사용하며, 채널 값 차이가 1을 초과할 때 변경 픽셀 0.5%를 허용한다고 정했습니다. 저장 파일 렌더링은 307,200픽셀 중 77픽셀, 약 0.0251%에서 달라 해당 기준을 통과했습니다. 픽셀 단위로 동일하지는 않았으며, 개별 채널의 최대 차이는 255였습니다. 이는 시각적 비교 허용 오차이며 도형 허용 오차가 아닙니다. 가장자리 근처의 안티앨리어싱과 실제로 남아 있는 외부 경로는 다른 문제입니다. 이 연산은 자르기 영역 밖의 도형을 제거합니다. 남겨진 색상 객체 사이의 모든 겹침을 제거하지는 않습니다. 내부 겹침은 그리기 순서에 따라 유지되며, 시험한 겹침 점은 의도한 위쪽 색상을 확인합니다. 가려진 모든 칠하기 겹침을 평면화하는 것은 별도 작업입니다. ## 다른 표현 방식이 필요하면 멈추기 이 예제는 열린 중심선, 스트로크, 곡선 피연산자, 그라디언트, 소프트 마스크, 래스터 이미지, 필터, 임의로 중첩된 클립 스택, 반투명한 겹침 채우기에 대한 지원을 입증하지 않습니다. 그런 기능을 제거하고 모양이 보존되었다고 가정하지 마세요. 스트로크가 적용된 선과 그 스트로크의 채워진 외곽선은 서로 다른 도형입니다. 작업에 보이는 스트로크 면적을 채우기 도형으로 사용할 필요가 있다면 불리언 작업 흐름을 고르기 전에 적절한 편집기에서 외곽선으로 변환한 사본을 준비하고 검사하세요. 편집 가능성이 중요하면 원래 스트로크를 유지합니다. 소프트 마스크의 흐려지는 모든 경계를 보존하면서 이를 딱 잘라내는 교차 연산으로 바꿀 수는 없습니다. 한 번만 편집한다면 필요한 객체를 선택하고 검사하기에 벡터 편집기가 더 쉬울 수 있습니다. 어떤 도구를 선택하든 저장 결과의 구멍, 색상, 경계를 확인하세요. 다음 단계에 사용하기 전에는 내보내기 정밀도와 아주 작은 디테일을 특히 살펴야 합니다. ## 필요한 경우에만 누락된 벡터 아트워크 복원하기 기존의 편집 가능한 SVG가 원본이라면 그 도형을 직접 자르세요. 적합한 래스터 클립아트만 남아 있고 편집 가능한 도형이 필요하다면 [PerfectVector의 클립아트 작업 흐름](https://perfectvector.com/ko/clipart-to-svg)으로 SVG 후보를 먼저 만들 수 있습니다. 자르기 전에 복원된 윤곽선, 개구부, 개별 채우기를 검사하세요. 벡터화는 픽셀에서 경로를 만들지만 원하는 자르기 경계를 식별하거나 불리언 결과를 검증하지는 않습니다. 이 예제의 원본 시험 도형은 직접 제작했으며 트레이싱하지 않았습니다. 질감이 필요하고 전달 형식이 의도한 래스터 자르기를 지원한다면 래스터 일러스트를 유지하세요. 벡터 자르기가 유용한 이유는 다음 단계에 도형이 필요하기 때문이지, 모든 이미지를 SVG로 만들어야 하기 때문은 아닙니다. ## 마스터를 잃지 않고 자르기 완료하기 1. 자르지 않은 마스터를 보존하고 대상인 닫힌 채우기 객체를 식별합니다. 2. 객체와 같은 좌표 맥락에서 자르기 영역을 정의합니다. 3. 각 객체에 교차 연산을 적용하고 시험한 스타일과 그리기 순서를 보존하며, 전달 장면에서 보조 객체와 원본을 제외합니다. 4. 의도한 경계와 정밀도로 남긴 도형만 내보냅니다. 5. 저장 파일을 다시 열고 실제 경로, 개구부, 모양, 의도한 대상 프로그램을 별도로 확인합니다. 저장 파일에 영역 안의 의도한 도형이 들어 있고 필요한 구멍과 색상 관계를 유지하면 범위 자르기가 완료됩니다. 바깥 도형이 남아 있다면 원본 프로젝트 콘텐츠를 내보냈는지, 클립이나 뷰포트만 바꿨는지 검사하세요. 개구부가 채워지면 더 많은 객체를 합치기 전에 복합 경로와 채우기 규칙을 확인합니다. 직접 만든 다각형 시험 도형에 대해서는 저장 파일 작업을 완료했습니다. 절단기로 가져오거나 실제 출력을 시험하거나 일반적인 SVG 호환성 보장을 입증하지는 않았습니다. ## 자주 묻는 질문 **SVG를 클리핑하면 바깥쪽 경로가 영구적으로 삭제되나요?** 클리핑은 참조 도형을 유지하면서 렌더링을 제한합니다. 도형을 영구적으로 자르려면 적절한 경로 연산과 결과만 담은 내보내기가 필요합니다. **도형을 먼저 합쳐서 모든 색상을 자를 수 있나요?** 단일 합집합은 보존하려던 개별 채우기 영역을 없앨 수 있습니다. 이 예제는 단색으로 채워진 각 객체를 따로 교차시키고 원본의 그리기 순서를 유지합니다. **viewBox를 작게 하면 숨은 아트워크가 제거되나요?** 뷰포트 매핑과 표시 영역을 바꿉니다. 그 자체로 영역 밖의 원본 경로를 삭제하지는 않습니다. 미리보기와 함께 저장된 도형도 검사하세요. **결과가 모든 커팅 애플리케이션에서 작동하나요?** 이 브라우저 시험으로는 알 수 없습니다. 의도한 대상 프로그램으로 가져온 도형과 연산을 검사하고 적절한 제작 확인을 수행하세요. ## 출처 1. [MDN: SVG clipPath](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/clipPath) — 클리핑은 참조 요소의 도형을 바꾸지 않고 렌더링에 영향을 줍니다. 2. [Paper.js: PathItem](https://paperjs.org/reference/pathitem/) — 교차 결과와 면적 기반 불리언 옵션을 설명합니다. 3. [Paper.js: Project](https://paperjs.org/reference/project/) — SVG 가져오기, 프로젝트 콘텐츠, 내보내기 경계, 수치 정밀도를 다룹니다. *** 비트맵으로만 남은 클립아트에 경로가 필요한가요? [SVG 후보를 준비하고](https://perfectvector.com/ko/clipart-to-svg) 구멍과 채우기를 검사한 다음, 별도의 작업 사본을 자르고 전달 전에 저장 결과를 다시 여세요. ## Explore - [Read the HTML article](https://perfectvector.com/ko/blog/permanent-crop-svg) - [SVG feComposite: in, out, xor 결과 비교하기](https://perfectvector.com/ko/blog/svg-composite-artwork.md) - [SVG z-index가 작동하지 않나요? 경로 쌓임 순서 고치기](https://perfectvector.com/ko/blog/svg-z-index-order.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)