SVG 마이터 돌출: 잘림 없이 날카로운 모서리 고치기
SVG 마이터 연결은 좁은 모서리를 길게 돌출시키거나 페이지 끝에서 잘릴 수 있습니다. 경로 편집 전에 마이터 제한, 베벨, 둥근 연결과 뷰포트 공간을 비교하세요.
목차
SVG 외곽선의 바늘 같은 끝은 보통 예각 모서리의 마이터 연결에서 생깁니다. 그 끝을 원하지 않으면 stroke-miterlimit을 낮추거나 베벨·둥근 연결을 선택하세요. 디자인에 필요한 끝인데 사라진다면 viewBox 안에 칠해진 스트로크의 공간을 더 확보하세요. 두 수정은 다릅니다. 하나는 모서리 모양을, 다른 하나는 파일이 표시할 수 있는 범위를 바꿉니다.
테스트하면서 원본 SVG 사본을 유지하세요. 의도한 날카로운 끝의 로고는 마이터를 보존해야 하고 가져온 외곽선의 불필요한 돌출은 더 평평한 연결이 필요할 수 있습니다. 먼저 유지할 모서리를 정하세요.
간단한 진단
- 예상하지 못한 돌출: 해당 경로와 부모 스타일의
stroke-linejoin,stroke-miterlimit을 확인하세요. - 뾰족해야 하는 곳의 평평한 모서리: 마이터가 제한을 넘어 베벨로 바뀌었을 수 있습니다.
- 페이지 끝에서 잘린 끝점: 연결을 바꾸기 전에
viewBox여백을 늘려 테스트하세요. - 편집 가능한 스트로크 없이 이미 채워진 도형: 경로 도형을 편집하세요. 마이터 설정은 채워진 실루엣을 고칠 수 없습니다.
좁은 모서리가 길게 돌출되는 이유
스트로크 경로는 중심선 양쪽에 너비가 있습니다. stroke-linejoin="miter"에서는 바깥 스트로크 가장자리가 만날 때까지 이어집니다. 경로가 꺾이는 모서리의 각도가 작을수록 만나는 지점이 멀어질 수 있습니다. SVG 2 페인팅 정의에 따르면 초기 연결 스타일은 miter, 초기 stroke-miterlimit은 4입니다.
제한은 픽셀이나 SVG 단위 거리가 아닌 비율입니다. 마이터 길이를 stroke-width로 나눈 값이 제한을 넘으면 일반 miter 연결은 베벨이 됩니다. 높은 제한은 긴 끝을 허용하고 낮은 제한은 더 많은 예각을 평평하게 만듭니다. MDN 마이터 제한 참고 문서는 모서리 각도와의 관계를 보여 주며 CSS 속성이 SVG 표현 속성을 덮어쓸 수 있다고 설명합니다.
테스트는 d="M130 520 L180 200 L230 520"의 열린 각진 문양 세그먼트 하나에 26단위 스트로크를 그렸습니다. 첫 두 패널은 마이터 제한 10을 씁니다. 두 번째는 y=170에 좁은 표시 경계를 적용해 끝을 자릅니다. 세 번째는 제한 4라서 모서리가 베벨이 됩니다. 네 번째는 round입니다. 해당 경로와 렌더러의 통제된 예시이며 가져온 모든 SVG가 같은 모서리 모양이라는 보장은 아닙니다.
네 패널의 빨간 점선 중심 경로는 그대로입니다. 중요합니다. 스트로크 연결 변경은 원래 벡터 경로를 재구성하지 않고 칠해진 외곽선을 고칠 수 있습니다.
돌출, 베벨 또는 잘린 끝인가요?
| 보이는 현상 | 가능한 원인 | 편집 전 테스트 |
|---|---|---|
| 각진 외곽선 밖에 긴 끝이 나타남 | 마이터 연결과 충분히 높은 제한 | 사본에 stroke-linejoin="bevel"을 임시 설정. 끝이 사라지면 연결이 원인 |
stroke-linejoin="miter"인데 끝이 뭉툭함 | 제한 초과로 베벨 대체 | 사본에서 제한을 높이고 새 끝이 원하는 모양이며 캔버스 안인지 확인 |
| 직선 페이지 경계에서 끝이 정확히 멈춤 | 뷰포트나 클립이 칠해진 스트로크를 자름 | 경로는 유지하고 사본의 viewBox 확대 |
| 마이터 제한을 바꿔도 효과 없음 | 둥근·베벨 연결, CSS 재정의 또는 이미 채우기인 도형 | 계산 스타일과 편집 가능 스트로크 유무 확인 |
잘린 끝은 처음에 의도한 베벨처럼 보일 수 있습니다. 확대해 끝이 파일 경계와 맞는지 확인하세요. 사라지는 SVG 스트로크 진단은 다른 페인트·클리핑 원인을 다루며 이 테스트는 마이터 모서리를 분리합니다.
잘못된 대상을 바꾸지 않고 모서리 고치기
1. 경로와 실제 연결 찾기
벡터 편집기에서 모서리를 선택하거나 SVG 텍스트의 stroke, stroke-width, stroke-linejoin, stroke-miterlimit을 확인하세요. 경로 속성뿐 아니라 부모 그룹과 CSS 규칙도 확인하세요. MDN 문서가 설명하듯 인라인·스타일시트 stroke-miterlimit은 같은 요소 표현 속성보다 우선할 수 있습니다.
선택 객체가 편집 가능한 스트로크가 아닌 채워진 외곽선이면 마이터 설정 조정을 멈추세요. 채우기 경로를 바꾸거나 확장 전 스트로크 원본으로 돌아가야 합니다. 전체 가져오기 크기가 틀리면 스트로크 너비로 보정하기 전에 알려진 크기의 SVG 가져오기 테스트를 실행하세요.
2. 복제본에서 연결 설정 하나 바꾸기
기계적으로 평평한 모서리가 괜찮으면 베벨부터 시도하세요. 부드러운 가장자리를 허용하면 round를 시도하세요. 정확한 끝이 표식 일부라면 miter를 유지하고 의도한 끝만 보존하는 제한을 고르세요. SVG stroke-linejoin 참고 문서는 일반 연결 모양의 차이를 정의합니다.
위 경로의 작은 테스트 사본입니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 590">
<path d="M130 520 L180 200 L230 520"
fill="none" stroke="#0d7991" stroke-width="26"
stroke-linejoin="miter" stroke-miterlimit="10" />
</svg>stroke-miterlimit을 4로 바꿔 해당 각도의 베벨 대체를 보세요. 다시 10으로 돌리고 stroke-linejoin을 round나 bevel로 바꾸세요. 후자의 두 연결 스타일에는 stroke-miterlimit 값이 무관합니다. 모서리 하나의 문제 때문에 로고 전체에서 낮추지 마세요. 다른 끝은 의도한 것일 수 있습니다.
3. 원하는 끝에 충분한 캔버스 주기
마이터는 맞지만 끝에서 사라지면 경로 좌표뿐 아니라 칠해진 결과 주변으로 viewBox를 넓히거나 이동하세요. SVG 2 좌표계 정의는 보이는 사각형을 설명합니다. 스트로크는 중심 경로 좌표 밖으로 뻗을 수 있습니다. 중첩 SVG 뷰포트와 클립 경로도 확인하세요. 루트 viewBox를 넓혀도 부모 클립이 계속 끝을 자를 수 있습니다.
큰 캔버스를 우발적인 바늘 모양의 치료로 여기지 마세요. 그 바늘을 더 많이 보여 줄 뿐입니다. 반대로 좁은 아트보드에 맞추려고 베벨로 바꾸면 디자인 모서리를 지울 수 있습니다. 실제 표시·인쇄 크기에서 전달 파일과 원본 표식을 비교하세요. 업체가 물리 SVG 크기를 측정하면 viewBox 매핑을 의도적으로 바꾸면서 의도한 너비·높이는 유지하세요.
4. 전달 파일 다시 열기
브라우저와 대상 편집기·제작 앱에서 결과를 확인하세요. 100%와 의도한 최종 크기에서 끝을 보세요. 편집 가능 스트로크 대신 채워진 윤곽선이 필요하면 원본을 유지하고 편집기에서 전달 사본을 윤곽선화해 새 채우기 경계를 검사하세요. 윤곽선화는 도형을 바꾸며 되돌릴 수 있는 마이터 설정이 아닙니다. 더 넓은 채우기·외곽선 검사는 SVG 페인트 순서 가이드를 참고하세요.
래스터 로고에 새 경로가 먼저 필요할 때
마이터 제어는 편집 가능한 벡터 스트로크에만 작동합니다. 남은 로고가 PNG나 JPG뿐이면 PerfectVector의 로고 벡터화 작업 흐름으로 모서리 편집 전 SVG 후보를 만들 수 있습니다. 복원 실루엣, 작은 틈과 경로 구조를 원본과 비교하세요. 추적은 두꺼운 래스터 선을 원래 편집 가능 중심선 대신 채워진 외곽선으로 표현할 수 있으므로 stroke-miterlimit이 자동 수정할 것이라고 기대하지 마세요. 브랜드 원본과 정확히 같아야 하는 중요한 기하 끝은 다시 그리세요.
원본 SVG가 있으면 스크린샷을 벡터화하지 말고 해당 파일을 고치세요. 로고 벡터화 가이드는 실제 픽셀 재구성이 필요할 때 도움이 됩니다. 이 글은 적합한 편집 가능 스트로크가 있는 단계에서 시작합니다.
최종 모서리 검사
- 수정하지 않은 벡터 원본을 저장하세요.
- 모서리가 편집 가능 스트로크인지 채워진 윤곽선인지 확인하세요.
- 해당 경로 하나에서
miter,bevel,round를 비교하세요. - 마이터를 보존하면 제한을 테스트하고 칠해진 끝 전체를 위한 표시 공간을 확보하세요.
- 실제 대상에서 SVG를 다시 열고 최종 크기로 확인하세요.
FAQ
SVG의 날카로운 모서리에 돌출이 생기는 이유는 무엇인가요? 마이터 연결은 바깥 스트로크 가장자리를 만날 때까지 확장합니다. 예각에서는 그 지점이 중심 경로에서 멀 수 있습니다. 의도하지 않은 끝이면 제한을 낮추거나 베벨·둥근 연결을 쓰세요.
stroke-miterlimit을 낮추면 모서리가 평평해지는 이유는 무엇인가요? 마이터 길이·스트로크 너비 비율이 제한을 넘으면 일반 마이터가 베벨로 바뀝니다. 낮은 값은 더 많은 모서리에서 대체를 일으킵니다. 날카로운 끝이 의도된 것이면 더 높은 제한을 유지하고 경계를 확인하세요.
마이터 제한을 높여도 SVG 끝이 잘리는 이유는 무엇인가요? 제한을 높여 끝은 더 길어져도 viewBox나 클립이 계속 자를 수 있습니다. 칠해진 스트로크 주변 표시 영역을 넓히거나 표식을 옮긴 뒤 대상에서 전달 SVG를 다시 여세요.
Sources
- W3C — SVG 2 페인팅 — 스트로크 연결, 초기값과 마이터 대체를 정의합니다.
- MDN — stroke-miterlimit — 제한 비율과 날카로운 모서리 각도의 관계를 설명합니다.
- MDN — stroke-linejoin — 스트로크 경로의 일반 모서리 모양을 정의합니다.
- MDN — CSS stroke-miterlimit — SVG 표현 속성보다 우선하는 CSS 속성을 설명합니다.
- W3C — SVG 2 좌표계 — 경계 검사에 쓰는 viewBox·뷰포트 관계를 정의합니다.
래스터 표식에 이 수정 전 사용할 경로가 필요하면 로고에서 SVG 후보를 만들고 도형을 확인하세요. 중요한 모서리를 조정하거나 다시 그리세요.
