SVG 색상을 개별 파일로 분리하는 방법

SVG 색상을 개별 파일로 분리하려면 정확한 채우기 색상별로 도형을 묶고 각 그룹을 원본과 동일한 전체 크기의 아트보드에서 내보내세요. 색상마다 자체 경계에 맞춰 자르지 마세요. 빈 공간이 있어야 가져오기, 절단, 스크린 인쇄, 재조립 때 조각이 정렬됩니다.

지원되는 단색 채우기 SVG라면 PerfectVector의 무료 SVG Color Separator가 브라우저 안에서 로컬로 처리합니다. 복잡한 그림은 벡터 편집기에서 채우기별로 객체를 선택하고 각 색상을 수동으로 내보낼 수 있습니다.

안전한 분리 규칙

• 원본 SVG의 수정하지 않은 복사본을 만드세요.
• 분리 전에 거의 같은 색상을 합칠지 결정하세요.
• 정확한 채우기 색상별로 묶고, 그라디언트·패턴·이미지를 단순한 색상으로 취급하지 마세요.
• 모든 출력에서 원본 너비, 높이, viewBox를 유지하세요.
• 각 도형의 원래 위치와 같은 색상 안의 그리기 순서를 유지하세요.
• 모든 파일을 함께 가져와 크기와 정렬을 확인한 뒤 재료를 절단하세요.

모든 색상 파일에 전체 아트보드를 유지해야 하는 이유

왼쪽 위에 파란 꽃잎, 오른쪽 아래에 빨간 꽃잎이 있는 꽃을 생각해 보세요. 두 파일을 도형에 딱 맞춰 자르면 각 꽃잎이 새 문서의 왼쪽 위 모서리로 이동합니다. 두 SVG가 더 이상 좌표계를 공유하지 않아 재조립할 때 위치를 추측해야 합니다.

모든 파일에 원래 아트보드를 유지하면 각 색상이 원래 좌표에 남습니다. 파란색만 있는 파일에는 빈 캔버스가 많을 수 있습니다. 낭비가 아니라 의도한 정렬 정보입니다.

공유 캔버스 개념

SVG의 viewBox는 내부 좌표 공간을 정의합니다. 커팅기, 인쇄기, 제작 파트너가 실제 치수를 중요하게 여긴다면 신뢰할 수 있는 물리 너비와 높이와 함께 유지하세요.

정확한 색상과 눈에 보이는 색상은 다릅니다

SVG에는 #ff0000과 #fe0000이 함께 있을 수 있습니다. 거의 똑같이 보이지만 정확한 값은 두 개이므로 정확한 색상 기준의 작업에서는 파일이 두 개 만들어집니다. 디자이너가 하나의 제작용 색상을 의도했다고 조용히 추측하는 것보다 안전합니다.

분리 전에 팔레트를 살펴보세요.

팔레트 줄이기 작업 과정은 시각적 역할과 제작 역할에 따라 비슷한 색상을 합치는 방법을 설명합니다. 먼저 그 결정을 내리세요. 분리 도구가 대신 정해서는 안 됩니다.

방법 1: 무료 브라우저 분리 도구 사용하기

SVG Color Separator는 그럴듯하지만 잘못된 레이어를 반환하지 않고 파일을 유지할 수 있도록 의도적으로 좁은 SVG 범위만 받습니다.

1. SVG 선택하기

최대 5 MiB의 SVG를 선택하세요. 안전한 미리보기나 다운로드를 만들기 전에 일회용 브라우저 워커 안에서 문서를 확인합니다. SVG 콘텐츠, 파일 이름, 경로, 색상, 미리보기, 생성 파일은 PerfectVector로 전송되지 않습니다.

현재 버전은 불투명 단색 채우기 벡터 그림을 대상으로 합니다. 일반적인 변환을 사용하는 경로, 사각형, 원, 타원, 다각형, 지원되는 폴리라인을 처리합니다. 지원되는 인라인 및 상속된 단색 채우기도 처리합니다.

2. 호환성과 크기 검토하기

허용된 합성 결과, 물리 치수, viewBox, 경로 수, 정확한 색상 팔레트, 경고를 확인하세요. 파일에 viewBox는 있지만 신뢰할 수 있는 물리 너비와 높이가 없다면 치수 하나를 확인하세요. 다른 치수는 비례를 유지합니다.

지원하지 않는 콘텐츠를 제거하는 대신 처리를 멈춥니다. 현재 중단 조건에는 보이는 스트로크, 그라디언트, 패턴, 필터, 클리핑 경로, 마스크, 편집 가능한 텍스트, 포함 이미지, 재사용 참조, 중첩 SVG, 외부 리소스, 스타일시트나 클래스, 스크립트, 이벤트 핸들러, 투명한 절단 색상이 있습니다.

이 범위는 SVG 모델 자체에 따른 것입니다. SVG 2 페인팅 명세는 단색을 그라디언트, 패턴, 채우기 불투명도, 스트로크 동작과 구분합니다. 눈에 보이는 “색상”이 언제나 안전하게 별도 파일로 옮길 수 있는 평면 값 하나는 아닙니다.

3. 정확한 색상별 미리보기 살펴보기

도구는 정확한 불투명 색상마다 미리보기를 하나 만듭니다. 다음을 확인하세요.

• 예상한 도형이 올바른 색상 파일에 표시됩니다.
• 필요한 스트로크, 텍스트, 이미지 콘텐츠가 빠지지 않았습니다.
• 합성 결과의 치수가 원본과 일치합니다.
• 각 레이어가 원래 위치에 남아 있습니다.
• 팔레트의 제작용 색상 수가 의도한 수와 같습니다.

단색 SVG도 유효합니다. 이미 분리된 상태입니다. 정확한 색상이 2~24개인 파일에는 일반 레이어 보기가 제공됩니다. 더 많은 색상도 안전 한계 내에서는 지원되지만 수십 개의 색상이 있다면 대개 팔레트부터 정리해야 한다는 신호입니다. 정확한 색상이 256개를 넘으면 거부됩니다.

4. 파일 다운로드하기

필요한 색상 파일을 개별적으로 다운로드하거나 로컬 압축 파일을 사용하세요. 각 출력은 같은 너비, 높이, viewBox, 좌표계를 유지합니다. 파일 이름과 레이어 순서는 일정한 규칙으로 정해지므로 전달 결과를 반복해서 재현할 수 있습니다.

분리 도구나 레이어 다운로드에는 가입이나 크레딧이 필요하지 않습니다. PerfectVector의 유료 래스터-벡터 다운로드 과정과는 별개입니다.

방법 2: 벡터 편집기에서 색상 분리하기

분리 전에 SVG를 수정해야 한다면 Illustrator, Inkscape, Affinity 등의 벡터 편집기를 사용하세요.

1. 복사본을 열고 문서 너비, 높이, viewBox 또는 아트보드를 기록합니다.
2. 대상 프로그램에 도형이 필요하면 편집 가능한 텍스트를 윤곽선으로 변환합니다.
3. 지원되지 않는 스트로크, 그라디언트, 패턴, 마스크, 클리핑 구조를 확장하거나 의도적으로 교체합니다.
4. 대표 도형 하나를 선택하고 편집기의 Select Same Fill Color 명령을 사용합니다.
5. 선택한 도형을 치수와 원점이 같은 복제 아트보드에 복사합니다.
6. 선택한 도형을 움직이지 않고 다른 색상을 삭제하거나 숨깁니다.
7. 색상 파일을 SVG로 내보내고 반복합니다.
8. 모든 파일을 함께 다시 가져와 정확히 겹치는지 확인합니다.

각 선택 영역에 딱 맞는 새 문서를 만들지 마세요. 원래 아트보드를 복제하거나 경계를 유지하는 내보내기 설정을 사용하세요.

수동 편집에서는 제작에 도움이 될 때 같은 색상 도형을 결합할 수도 있습니다. 구멍, 겹침, 원래 그리기 순서, 이후 편집이 별도 객체에 의존한다면 자동으로 합치지 마세요.

Cricut용 파일 준비하기

Cricut의 현재 이미지 업로드 가이드는 레이어가 있는 SVG가 디자인된 대로 업로드되고 그룹 이미지로 표시되며, 그룹 해제 후 레이어를 따로 이동하고 크기를 바꿀 수 있다고 설명합니다. SVG 경로 5,000개 제한도 나와 있습니다.

절단 전에 다음을 확인하세요.

1. 분리한 파일을 모두 업로드합니다.
2. 치수를 바꾸지 않고 같은 Canvas에 추가합니다.
3. 각 파일에 같은 너비와 높이가 표시되는지 확인합니다.
4. 정확히 겹쳐야 하는 작업이라면 위치 컨트롤이나 공유 정렬 방법을 사용합니다.
5. 각 레이어에 올바른 작업과 재료 색상을 지정합니다.
6. 저렴한 재료로 작게 시험합니다.

Cricut의 지원하지 않는 항목 가이드는 패턴 채우기, 그라디언트, 클리핑 경로, 편집 가능한 텍스트, 연결된 이미지, 포함된 미지원 이미지를 레이어 벡터 업로드의 문제로 명시합니다. 내보내기 전에 텍스트를 도형으로 바꾸고 해당 기능을 의도적으로 단순화하세요.

더 넓은 점검에는 절단 전 SVG 확인 방법을 사용하세요. 분리 파일이 예상하지 않은 크기로 들어오면 개별 레이어의 크기를 바꾸기 전에 SVG 크기 오류 진단을 사용하세요.

자주 하는 분리 실수

레이어가 더 이상 맞지 않습니다

각 색상을 자체 경계에 맞춰 잘랐거나 원점이 다른 문서에 붙여 넣었을 가능성이 높습니다. 원래 아트보드, 너비, 높이, viewBox를 유지해 다시 내보내세요.

하나의 “색상”이 여러 파일이 되었습니다

SVG에 거의 같은 값이 있습니다. 어떤 값이 같은 역할인지 정하고 의도적으로 합친 뒤 다시 분리하세요.

그라디언트가 사라지거나 거부되었습니다

그라디언트는 정확한 단색 채우기 하나가 아니라 페인트 서버입니다. 의도한 단색 영역으로 바꾸거나 원래 그라디언트 작업 과정을 유지하거나 색조 재현도가 중요할 때 래스터 제작 방식을 사용하세요.

텍스트나 스트로크가 빠졌습니다

편집 가능한 텍스트와 보이는 스트로크는 채워진 윤곽 경로와 다른 구조입니다. 대상 프로그램의 요구 사항에 맞을 때만 벡터 편집기에서 도형으로 변환하세요.

Cricut이 파일을 거부합니다

지원되지 않는 기능과 경로 수부터 확인하세요. 유효한 SVG 파일도 Design Space가 허용하는 범위를 벗어날 수 있습니다.

FAQ

SVG에 여러 색상을 넣을 수 있나요? 네. SVG 도형에는 서로 다른 채우기와 스트로크를 사용할 수 있으며 그라디언트, 패턴, 불투명도, 참조 페인트도 지원됩니다. 정확한 색상 분리는 불투명 단색 채우기에서 가장 간단합니다.

분리 파일에 빈 공간이 많은 이유는 무엇인가요? 빈 공간이 원래 아트보드와 좌표를 유지하기 때문입니다. 파일을 가져오거나 재조립할 때 모든 색상을 정렬된 상태로 유지합니다.

비슷한 SVG 색상이 자동으로 합쳐지나요? 아니요. PerfectVector의 분리 도구는 정확히 같은 색상만 묶습니다. 거의 같은 색상이 하나의 제작용 색상이어야 한다면 분리 전에 의도적으로 합치세요.

그라디언트를 색상 파일로 분리할 수 있나요? 그림을 바꾸지 않고 정확한 단색 레이어로 분리할 수는 없습니다. 그라디언트를 선택한 단색 영역으로 바꾸거나 원래 그라디언트 작업 과정을 유지하거나 부드러운 색조 세부 요소가 중요할 때 래스터 출력을 사용하세요.

SVG Color Separator는 무료인가요? 네. 지원되는 SVG는 계정이나 크레딧 없이 로컬에서 확인, 미리보기, 분리, 다운로드할 수 있습니다. 정적 페이지 자산은 일반적으로 로드되지만 문서 데이터는 브라우저 안에 남습니다.

Sources

1. PerfectVector — SVG Color Separator — 현재 로컬 처리, 정확한 색상, 정렬, 호환성, 다운로드 조건을 설명합니다.
2. W3C — SVG 2 페인팅 — 채우기, 스트로크, 단색 페인트, 그라디언트, 패턴, 불투명도, 참조 페인트를 정의합니다.
3. Cricut — Design Space에 이미지 업로드하기 — 현재 레이어 SVG 가져오기 동작과 경로 제한을 설명합니다.
4. Cricut — 이미지 업로드: 지원하지 않는 항목 — 레이어 벡터 업로드의 현재 그라디언트, 패턴, 클리핑, 텍스트, 이미지 제한을 설명합니다.

---

모든 색상의 정렬을 유지할 준비가 되었나요? 무료 SVG Color Separator를 열고 정확한 색상별 미리보기와 치수를 검토한 뒤 공유 아트보드가 확인을 통과한 후에 다운로드하세요.