SVG 도형 사이의 흰 틈: 진단과 해결

도형 사이의 얇은 흰 선은 파일 구멍 대신 렌더링 이음선인 경우가 많습니다. SVG 렌더링 모델은 래스터화 때 안티앨리어싱을 허용합니다. 인접 경계를 별도로 샘플링하면 특정 배율에서 배경색 가는 선이 드러날 수 있고 다른 배율이나 렌더러에서는 사라질 수 있습니다.

실제 틈일 때도 있습니다. 겹치기, 스트로크 추가, 경로 병합 전에 배율 변경, 배경 변경, 래스터 출력, 윤곽선 검사의 네 점검을 하세요. 표시 샘플링과 도형 중 무엇을 고칠지 알려 줍니다.

렌더링 이음선과 실제 틈 구분

• 배율에 따라 바뀌거나 사라짐: 표시 이음선일 가능성이 높습니다.
• 배경에 따라 색상이 바뀜: 경계 사이에서 배경이 샘플링됩니다.
• 윤곽선 보기에는 없음: 벡터 경계가 이미 만날 수 있습니다.
• 고해상도 래스터에도 있음: 출력 정밀도와 도형을 더 검사하세요.
• 메시, 절단 미리보기, 경로 측정에도 있음: 실제 도형 문제로 처리하세요.

닿는 경로에도 선이 보이는 이유

화면은 픽셀 격자에 벡터를 그립니다. 경계가 픽셀을 지나면 안티앨리어싱이 도형과 배경을 섞어 매끄럽게 보이게 합니다. 좌표가 만나도 별도 도형이 경계 픽셀을 각각 섞을 수 있습니다.

배율도 변수입니다. 한 크기에서 픽셀 경계에 놓인 공통 좌표가 다른 크기에서는 픽셀 사이에 놓입니다. 출력 반올림도 경계를 조금 옮길 수 있습니다. 그래서 67%에서만 나타나고 100%에서는 없고 작은 썸네일에서 돌아올 수 있습니다.

수학적으로 정상일 수 있습니다. 시험 전에 편집하면 투명도, 인쇄, 절단, 애니메이션에서 드러날 겹침을 만들 수 있습니다.

핵심은 실제 윤곽이 경계를 공유하는지입니다. 렌더링 선은 닿는 도형 위에도 있지만 실제 틈은 윤곽 사이에 남습니다.

편집 전 네 시험

1. 배율 바꾸기

100%와 큰 확대를 포함한 여러 배율로 보세요. 실제 틈은 확대해도 경로 사이에 남고 샘플링 선은 깜박이거나 두께가 달라지거나 사라집니다.

배율만 믿지 마세요. 픽셀보다 작은 실제 틈도 모습을 바꿀 수 있습니다.

2. 배경 바꾸기

흰색, 검정, 밝은 색 위에 놓으세요. 선이 배경색을 띠면 별도 샘플 경계 사이에 배경이 보입니다. 실제 투명 틈일 수도 있으므로 윤곽 검사까지 하세요.

3. 고해상도 PNG 내보내기

최종 치수의 2배나 4배로 내보내 줄인 결과를 보세요. 사라지면 배율 의존 래스터화일 가능성이 높습니다. 남아 측정되면 좌표와 출력 정밀도를 보세요.

4. 윤곽선이나 와이어프레임 사용

채우기를 끄고 실제 경계를 보세요. 이웃 노드 좌표를 비교해 정확히 만나면 렌더러 문제, 끝점이나 경계가 다르면 도형 문제입니다.

더 넓은 편집은 SVG 편집 방법을 보세요. 용도에 따라 최선이 달라지므로 사본을 유지하세요.

표시 이음선 고치기

사이에 투명도가 없어야 할 평면 이미지는 작은 통제된 겹침이 보통 가장 확실합니다. 아래쪽이나 어두운 도형을 이웃 밑으로 조금 늘리세요. 일반 크기에서 보이지 않고 외부 실루엣을 바꾸지 않아야 합니다.

다른 방법도 있습니다.

• 같은 색상의 매우 가는 스트로크로 덮기
• 인접 조각 뒤에 맞는 기본 도형 놓기
• 반올림이 원인이면 출력 좌표 정밀도 높이기
• PNG가 최종이면 크게 렌더링한 뒤 줄이기

shape-rendering은 정밀도나 선명한 경계를 요청하지만 MDN처럼 렌더링 힌트이며 모든 이음선 제거를 보장하지 않습니다. 전체 적용 전에 crispEdges가 도움이 되는 경우와 한계를 보세요.

하나의 수정만 고르고 실제 목적지에서 시험하세요. 여러 해결책을 쌓으면 겹친 곳에 어두운 능선이나 돌출이 생길 수 있습니다.

실제 도형 틈 고치기

윤곽선이나 후속 출력에서 구멍을 확인하면 다음을 하세요.

1. 의도한 노드를 같은 좌표로 스냅
2. 이웃 경계가 실제 만날 때까지 연장
3. 연속 경로가 필요할 때만 끝점 연결
4. 중복이나 불필요한 구간 제거
5. 충분한 좌표 정밀도로 재출력
6. 다시 열어 네 시험 반복

흰 도형으로 덮지 마세요. 흰 배경에서만 숨기며 추가 객체로 남습니다.

노이즈 래스터의 추적이면 많은 얇은 조각과 어긋남이 있을 수 있습니다. 하나씩 고치는 것보다 깨끗한 원본 재추적이 빠를 수 있습니다.

목적지에 따른 해결책

CAD 면이나 메시의 균열은 브라우저 1픽셀 선과 다릅니다. 후속 도형이 분리되면 원본 경로나 변환 허용오차를 고치세요. 썸네일에만 보이면 제작 도형은 이미 정상일 수 있습니다.

절단 전 체크리스트는 장비 검토를 다룹니다. 이음선 대신 흐림이나 숨은 픽셀은 픽셀화 SVG 진단을 쓰세요.

PerfectVector의 역할

PNG나 JPG 추적 전체에 틈이 흩어졌다면 수십 경로를 고치기 전에 원본으로 돌아가세요. 눈에 띄는 압축 블록을 정리하고 원치 않는 배경을 제거하며 가장 강한 원래 경계를 유지하세요. 이미지 벡터 흐름으로 편집 경로를 재구성하고 미리보기를 보세요.

같은 색상 두 영역이 애니메이션, 절단, 조립 때문에 분리돼야 하는지는 알지 못합니다. 실루엣과 빈 공간을 확인하고 다운로드 SVG를 실제 용도에서 시험하세요. 원본 조각화가 원인일 때 재추적이 유용하며 정상 경계를 브라우저가 안티앨리어싱하는 문제에는 아닙니다.

FAQ

경로 사이에 흰 선이 생기는 이유는 무엇인가요? 인접 경계를 따로 안티앨리어싱해 특정 배율에서 배경이 보일 수 있습니다. 경로는 정확히 만날 수 있으므로 편집 전에 배율, 배경, 렌더러, 윤곽선을 바꾸세요.

안티앨리어싱 이음선은 어떻게 지우나요? 평면 채우기는 작은 통제 겹침, 같은 색 가는 선, 받침 도형을 쓰고 최종 표시 크기로 시험하세요. 절단, CAD, 투명, 애니메이션에는 무턱대고 적용하지 마세요.

모두 합치면 없어지나요? 가능하지만 색상과 편집 구조도 사라집니다. 하나의 도형이어야 할 때만 합치세요. 다색은 별도 객체가 필요하므로 경계 맞추기나 통제 겹침이 안전합니다.

작을 때만 틈이 보이는 이유는 무엇인가요? 배율이 바뀌면 경계와 픽셀 격자 관계도 바뀌어 두 경계가 같은 행이나 열에서 배경과 섞일 수 있습니다. 더 큰 렌더링이나 작은 겹침이 막을 수 있습니다.

3D 인쇄나 절단에 작은 틈이 중요한가요? 면, 메시, 공구 경로에 남으면 중요합니다. 화면 이음선만으로 손상을 증명하지 못하므로 후속 미리보기에서 실제 물체를 바꾸는 균열과 열린 윤곽을 고치세요.

Sources

1. W3C — SVG 2 렌더링 모델 — 그리기 순서, 클리핑, 합성, 안티앨리어싱입니다.
2. MDN — shape-rendering — 도형 렌더링 힌트입니다.
3. W3C — SVG 2 좌표계 — 배율 의존 렌더링의 좌표, 뷰포트, 변환입니다.

---

조각난 래스터 추적에 실제 틈이 있으면 편집 경로로 재구성하고 미리보기를 검사하세요. 이미 만나면 파일을 유지하고 목적지에 맞는 가장 작은 표시 수정만 적용하세요.