SVG 구멍이 채워지는 이유와 복원 방법

SVG 구멍은 파일이나 대상 프로그램이 내부 윤곽을 채워진 도형 바깥으로 취급하지 않게 되면 채워집니다. 흔한 원인은 복합 경로 해제, 내부 윤곽을 별도의 채워진 객체로 저장, 채우기 규칙이나 경로 방향 변경, 가져오기에서 관계가 사라짐, SVG 생성 전에 래스터 추적이 빈 공간을 닫아 버린 경우입니다.

먼저 브라우저에서 SVG를 여세요. 이미 그곳에서 구멍이 채워져 있다면 파일을 수정하세요. 브라우저에서는 올바르지만 다른 앱에서 채워진다면 가져오기 단계에 문제가 있을 가능성이 높습니다.

먼저 구멍이 어디서 사라졌는지 찾기

도형을 바꾸기 전에 두 렌더러를 사용하세요.

1. SVG 복사본을 저장합니다.
2. Chrome, Safari, Firefox 등의 브라우저에서 직접 엽니다.
3. 밝은 배경과 어두운 배경 위에 각각 놓습니다.
4. 같은 파일을 대상 앱에서 엽니다.
5. 전체 실루엣뿐 아니라 문제가 되는 구멍을 정확히 비교합니다.

이 비교는 잘못된 SVG와 특정 대상 프로그램의 가져오기 문제를 구분합니다. 가져오기 전에는 올바른 파일을 임의의 경로 작업으로 손상하는 일도 막습니다.

흰색 도형은 구멍이 아닙니다

실제 구멍은 SVG 뒤의 무엇이든 보여 줍니다. 흰색 도형은 흰 캔버스에서만 비어 보입니다. 웹 인터페이스용 그림이라면 SVG pointer-events 가이드가 구멍, 칠해진 영역, 별도 클릭 대상의 클릭 반응을 보여 줍니다.

시험하려면 그림 뒤에 임시로 어두운 사각형을 추가하세요. 구멍으로 생각한 부분이 계속 흰색이면 그 내부 객체를 선택하세요. 의도한 흰색 디자인 요소로 유지할 수는 있지만 커팅기, 각인 도구, 브라우저 오버레이, 3D 가져오기 도구가 빈 공간으로 해석할 것으로 기대하지 마세요.

투명한 빈 공간에는 복합 경로를 사용하거나 외부 도형에서 내부 도형을 빼세요. 마스크로도 투명도를 만들 수 있지만 많은 제작 앱은 마스크보다 단순한 경로 도형을 더 안정적으로 처리합니다. 스크립트 작업에서는 Paper.js로 가져온 경로를 빼고 합치기를 시도한 뒤 내보낸 SVG를 다시 열어 빈 공간을 확인하세요.

고보 그림에서는 올바른 투명 공간이 있어도 별도로 재료를 결정해야 합니다. 강철과 유리 고보 비교는 같은 글자 O를 강철 브리지 배치와 유리 지지 디자인으로 따라가며, 투사되는 밝고 어두운 영역을 반대로 바꾸면 연결해 두어야 할 부분이 달라지는 이유를 설명합니다.

복합 경로가 구멍의 관계를 유지합니다

글자 O, 고리, 가운데가 뚫린 로고는 흔히 여러 닫힌 하위 경로가 있는 경로 요소 하나를 사용합니다. 외부 윤곽은 실루엣을 정의하고 둘러싸인 하위 경로는 글자 안쪽 공간이나 오려낸 부분을 정의합니다. SVG 경로 모델은 하나의 경로 안에 여러 하위 경로를 허용합니다.

그래서 Ungroup, Break Apart, Release Compound Path는 서로 같은 명령이 아닙니다. 복합 경로를 해제하면 내부 윤곽이 일반적인 채워진 객체가 될 수 있습니다. 도형은 남아 있지만 외부 윤곽과의 관계가 사라집니다.

복사본에서 다음과 같이 복원하세요.

1. 외부 경계와 구멍이어야 하는 윤곽만 선택합니다.
2. Make Compound Path, Combine 또는 같은 역할의 명령을 사용합니다.
3. 결과 객체에 채우기 하나를 적용합니다.
4. 채우기 규칙을 확인합니다.
5. 저장한 SVG를 브라우저와 대상 앱에서 다시 엽니다.

Adobe의 현재 복합 경로 문서도 같은 모델을 사용합니다. 구성 경로가 채우기 규칙을 통해 채워진 영역과 투명 영역을 결정합니다.

외관뿐 아니라 관계를 복원하세요

도장 그림이라면 채워 둘 영역을 결정하기 전에 도자기 도장의 양각과 음각 도형을 확인하세요.

nonzero와 evenodd 확인하기

SVG에는 채우기 규칙이 두 개 있습니다. SVG 2 페인팅 명세는 nonzero를 초기값으로 설정하고 evenodd를 다른 옵션으로 정의합니다.

• **nonzero**는 부호가 있는 경로 교차를 사용합니다. 내부 윤곽의 방향이 잘못되면 채우기를 상쇄하지 않고 더할 수 있습니다.
• **evenodd**는 교차 횟수를 셉니다. 두 번 둘러싸인 점은 바깥으로 취급되므로 단순한 중첩 윤곽은 방향과 관계없이 구멍이 됩니다.

이 최소 경로에는 같은 방향의 사각형 두 개가 있습니다. evenodd에서는 가운데가 투명하게 유지됩니다.

<path
  fill="#2563eb"
  fill-rule="evenodd"
  d="M10 10H90V90H10Z M30 30H70V70H30Z"
/>

디자인에 맞는다면 규칙을 바꾸는 것이 유용하지만 모든 문제의 해결책은 아닙니다. 두 윤곽은 여전히 같은 도형의 하위 경로로 평가되어야 합니다. 관계없는 객체 두 개에 fill-rule="evenodd"를 설정해도 하나가 다른 하나를 뚫지는 않습니다.

nonzero를 유지한다면 편집기에서 해당 명령을 제공할 때 내부 윤곽만 반전하세요. Illustrator는 두 채우기 규칙과 복합 경로의 경로 방향 컨트롤을 제공합니다. 자기 교차와 여러 중첩 공간에서는 단순한 고리와 다른 결과가 나올 수 있으므로 반전 전에 복사본을 저장하세요.

SVG는 올바르지만 가져오기 도구가 잘못 처리할 때

일부 절단, CAD, 3D, 애니메이션 도구는 실용적인 SVG 일부만 지원합니다. 브라우저가 복합 경로를 올바르게 렌더링해도 대상 프로그램은 각 윤곽을 채워진 객체로 가져올 수 있습니다.

다음 순서로 수정하세요.

1. 원본 편집기에서 단순화한 복사본을 저장합니다.
2. 텍스트 가져오기가 약점이라면 복사본에서 편집 가능한 텍스트를 윤곽선으로 바꿉니다.
3. 필요한 곳에서만 마스크, 클립, 외관 효과를 일반 경로 도형으로 바꿉니다.
4. 각 구멍을 외부 윤곽과 함께 하나의 복합 경로로 유지합니다.
5. 반복해서 바꾸기보다 evenodd와 nonzero를 의도적으로 시험합니다.
6. 가져오기 도구가 여전히 구멍을 채우면 두 경계를 가져와 대상 프로그램에서 내부 프로파일을 뺍니다.

돌출 작업에서는 대상 프로그램이 선택 가능한 닫힌 프로파일도 인식해야 합니다. SVG 돌출 진단은 구멍이 유지된 이후의 열린 끝점, 중복, 프로파일 유효성을 다룹니다.

추적에서 빈 공간이 닫혔을 때

래스터 원본이 작거나 흐리거나 대비가 낮으면 추적 도구가 작은 글자의 안쪽 공간을 닫거나 좁은 틈을 합칠 수 있습니다. 이는 채우기 규칙이 아니라 도형 문제입니다. 내부 경계가 SVG에 처음부터 들어가지 않은 것입니다.

래스터 원본으로 돌아가 다음을 조정하세요.

• 흐림을 추가하지 않고 확대하거나 다시 캡처합니다.
• 중요한 빈 공간 주변의 간격을 넓힙니다.
• 틈 주변의 압축 노이즈를 제거합니다.
• 도구에 설정이 있다면 부드럽게 하기나 색상 병합을 줄입니다.
• 최종 출력 크기에서 새 추적 결과를 비교합니다.

이 경우 PerfectVector가 도움이 될 수 있습니다. 원본 래스터가 있고 새 SVG 추적이 필요하면 이미지-벡터 작업 과정을 사용하세요. 다운로드 전에 모든 글자 안쪽 공간과 여백을 확인하세요. 편집기가 복합 경로를 해제하기 전까지 SVG가 올바랐다면 그 SVG를 수정하세요. 다시 추적해도 사라진 편집 이력은 복원되지 않습니다.

같은 원본 중심 접근은 레터링에도 유용합니다. 손글씨 벡터 가이드는 그림 전체의 개성을 없애지 않고 작은 글자 안쪽 공간을 유지하는 방법을 보여 줍니다.

안전한 최종 확인

수정한 SVG를 보내기 전에 다음을 확인하세요.

• 밝은 배경, 어두운 배경, 투명 배경에서 봅니다.
• 대상 객체를 선택해 의도한 복합 경로 하나인지 확인합니다.
• 편집기나 SVG 소스에서 채우기 규칙을 살펴봅니다.
• 모든 글자 안쪽 공간, 고리, 둘러싸인 여백을 확인합니다.
• 저장하지 않은 캔버스를 믿지 말고 내보낸 파일을 다시 엽니다.
• 실제 대상 앱에서 시험합니다.
• 편집 가능한 원본과 단순화한 전달용 복사본을 따로 보관합니다.

객체가 이제 하나로 선택된다면 올바른 것일 수 있습니다. 복합 경로는 원래 하나의 객체입니다. 다시 분리하기 전에 SVG 그룹 해제 가이드를 확인하세요.

FAQ

Break Apart를 사용한 뒤 구멍이 채워진 이유는 무엇인가요? Break Apart가 내부 윤곽을 외부 복합 경로에서 분리했기 때문입니다. 이전 구멍이 일반 채움 객체가 되었습니다. 명령을 취소하거나 각 외부 윤곽과 올바른 내부 윤곽을 다시 결합하고 채우기 규칙을 확인하세요.

SVG 구멍에 fill-rule="evenodd"를 사용해야 하나요? evenodd는 윤곽 방향이 결과를 결정하지 않으므로 중첩 윤곽에 편리한 경우가 많습니다. 그래도 도형 하나 안에서 작동하며 별도 객체를 빼지는 않습니다. 원본과 대상 프로그램이 의도한 윤곽 방향을 유지한다면 nonzero를 유지하세요.

브라우저에서는 올바른 SVG가 앱에서는 꽉 차 보이는 이유는 무엇인가요? 대상 가져오기 도구가 복합 경로, 채우기 규칙, 마스크, 윤곽 방향을 유지하지 못할 수 있습니다. 복사본을 일반 경로로 단순화하고 다시 시험하세요. 필요하면 외부와 내부 경계를 가져와 대상 프로그램에서 구멍을 빼세요.

위에 흰색 도형을 놓아 구멍을 만들 수 있나요? 흰 배경에서 구멍처럼 보이게 할 뿐입니다. 흰 객체는 계속 채워져 있어 인쇄, 절단, 가져오기에서 또 다른 고체 영역이 될 수 있습니다. 배경이 보여야 한다면 복합 경로, 빼기 연산, 다른 투명 구조를 사용하세요.

PerfectVector가 기존 SVG에서 채워진 구멍을 고칠 수 있나요? 적합한 래스터 원본으로 돌아가 의도한 빈 공간이 보이는 새 추적을 만들 수 있을 때 유용합니다. 편집기가 해제했거나 가져오기 도구가 무시한 복합 경로를 수정하지는 않습니다. 그 관계는 벡터 편집기나 대상 앱에서 수정하세요.

Sources

1. W3C — SVG 2 페인팅 — nonzero, evenodd, 초기 채우기 규칙 값을 정의합니다.
2. W3C — SVG 경로 — 경로, 하위 경로, 닫힌 경로 도형을 정의합니다.
3. Adobe Illustrator — 복합 경로 만들기 — 복합 구멍, 채우기 규칙, 구성 경로 방향 반전을 설명합니다.
4. PerfectVector — 이미지-벡터 변환 — 조건부 재추적 단계에 사용하는 현재 래스터-SVG 작업 과정입니다.

래스터 추적에서 빈 공간이 사라졌다면 깔끔한 원본으로 새 벡터를 만들고 전달 전에 모든 글자 안쪽 공간을 확인하세요. 브라우저 버전이 이미 올바르다면 그 도형을 유지하고 실패하는 가져오기만 수정하세요.