내보낸 SVG의 스트로크가 사라질 때: 원인 찾기

내보낸 스트로크가 사라지면 경로 도형이 남아 있는지 먼저 확인하세요. 스트로크 색상이 없거나 배경과 같거나 새 배율에서 너무 가늘거나 viewBox 밖이거나 페이지 가장자리에서 잘릴 수 있습니다. 브러시, 가변 폭, 필터, 수신 앱이 이해하지 못하는 CSS일 수도 있습니다.

바로 다시 추적하거나 모든 객체를 확장하지 마세요. 편집 원본을 유지하고 시험 사본에서 실패한 선 하나를 분리하세요. 가장 작은 수정이 보통 구조를 더 많이 유지합니다.

빠른 진단

1. 같은 SVG를 최신 브라우저와 벡터 편집기에서 여세요.
2. 없는 선을 선택해 경로와 노드가 남았는지 보세요.
3. 사본에 눈에 띄는 색상, 완전한 불투명도, 임시로 넓은 스트로크를 주세요.
4. 페이지 가장자리에서 옮기고 클립, 마스크, 필터를 하나씩 끄세요.
5. 변환을 제거하거나 폭에 미치는 영향을 검사하세요.
6. 한 사용처만 실패하면 전달 사본에서 미지원 외형을 바꾸세요.

네 가지 스트로크 결과

먼저 경로가 남았는지 확인

사본을 텍스트로 열어 <path>, <line>, <polyline>, <circle>, <rect> 같은 일반 도형을 검색하세요. 편집기에서 객체를 선택하고 윤곽선이나 와이어프레임으로 바꾸세요.

• 노드와 경로가 보이면 도형은 남았습니다. 색상, 클리핑, 변환, 앱 지원을 조사하세요.
• 객체는 있지만 그 경계가 페이지에서 멀리 벗어나면 옮기거나 viewBox를 고치세요.
• 선이 채운 닫힌 도형이면 이미 윤곽선으로 확장됐을 수 있습니다.
• 해당 도형이 없으면 원본과 내보내기 설정을 보세요. 미지원 객체가 누락됐을 수 있습니다.

편집 전에 렌더러 둘을 비교하세요. Chrome에서는 보이고 데스크톱에서는 없으면 가져오기 한계나 CSS 의존성일 수 있습니다. 어디서든 없으면 색상, 클리핑, 경계, 누락 가능성이 높습니다. 문서 전체가 비었다면 빈 SVG 진단을 따르세요.

Penpot에서만 사라지면 Penpot SVG 가져오기 점검으로 전달 문제를 분리하세요.

원인 1: 보이는 스트로크 색상이 없음

SVG는 채우기와 스트로크를 별도 속성으로 처리하므로 경로가 있어도 선이 안 보일 수 있습니다. MDN 채우기와 스트로크 안내는 stroke, stroke-width, 불투명도 등을 설명합니다.

객체와 상속 스타일에서 다음을 보세요.

• stroke="none"
• 없는 stroke와 fill="none"
• stroke-width="0" 또는 매우 작은 폭
• opacity="0" 또는 stroke-opacity="0"
• 페이지나 주변 도형과 같은 색상
• 객체나 상위 그룹의 display="none", visibility="hidden"
• 표시 속성을 덮는 CSS 클래스

시험 사본에 채도 높은 색상, 100% 불투명도, 몇 배 넓은 폭을 주고 대비되는 사각형을 뒤에 놓으세요. 굵은 윤곽이 채운 글자 면을 덮으면 경로 변경 전에 SVG 채우기와 스트로크 그리기 순서를 비교하세요. 선이 나타나면 의도한 색상과 전달 크기에서 읽히는 폭을 복원하세요.

요소에 선언된 스타일도 더 구체적인 규칙이 덮을 수 있습니다. 마크업과 화면이 다르면 개발자 도구의 계산 스타일을 보세요.

원인 2: 페이지나 프레임 가장자리에서 잘림

스트로크는 중심 경로 양쪽으로 뻗습니다. 중심이 viewBox 경계에 있으면 절반이 뷰포트 밖으로 갑니다. 굵은 선, 사각 끝, 마이터 연결, 흐림, 그림자는 기본 좌표보다 더 넓은 공간이 필요합니다. SVG 그리기 명세는 폭, 끝, 연결, 마이터 제한이 경로 주변 표현을 넓히는 방식을 정의합니다. 닫힌 도형에서 선 전체가 안쪽이나 바깥쪽에 필요하면 아트보드 크기를 바꾸기 전에 스트로크 안팎 정렬 안내로 실제 표시 영역을 비교하세요.

객체를 안쪽으로 옮기거나 임시로 viewBox를 넓혀 시험하세요. 돌아오면 보이는 작품에 의도적인 여백을 더하세요. 무작정 넓히지 말고 최대 폭, 끝, 연결, 효과에 충분한 공간을 계산하세요.

clipPath와 mask도 보세요. 채우기 경계 크기의 클립은 바깥 스트로크를 자릅니다. 중첩 SVG도 자체 뷰포트가 있고 overflow 처리는 브라우저와 편집기에서 다를 수 있습니다.

모서리 하나만 없으면 높은 stroke-miterlimit의 영향을 보세요. 날카로운 마이터는 멀리 뻗습니다. 의도한 디자인을 유지한다면 뷰포트 확대보다 round나 bevel 연결이 적절할 수 있습니다.

원인 3: 배율이나 변환이 스트로크를 바꿈

변환은 도형과 보이는 스트로크를 함께 바꿀 수 있습니다. 수신 앱이 단위나 중첩 변환을 다르게 해석하면 원래 적절했던 선이 머리카락처럼 가늘어질 수 있습니다.

경로와 상위 그룹의 transform="scale(...)"를 보세요. viewBox, width, height를 비교하고 100%와 실제 크기로 시험하세요. 전체 치수가 틀리면 임의 폭으로 보상하지 말고 기준 크기 SVG 배율 시험으로 문서 대응을 고치세요.

vector-effect="non-scaling-stroke"도 지원합니다. MDN 문서처럼 non-scaling-stroke는 요소 변환에 따라 표시 폭이 바뀌지 않게 합니다. 인터페이스 도표나 지도에 유용하지만 브라우저 외 지원은 앱마다 달라 목적지에서 검증하세요.

non-scaling-stroke를 보편적인 해결책으로 추가하지 마세요. 선이 작품과 함께 커져야 하는지 정하세요. 인쇄 로고는 보통 함께 커져야 하고 확대 중 1화면 픽셀을 유지하는 지도는 비확대 스트로크가 의도적일 수 있습니다.

원인 4: 수신 앱이 외형을 재현하지 못함

앱의 모든 선이 일반 SVG 스트로크는 아닙니다. 필압 브러시, 가변 폭, 패턴 브러시, 라이브 효과, 혼합, 필터, 독자적인 외형 스택일 수 있습니다. 출력은 이를 근사하고 다음 앱은 무시할 수 있습니다.

복사본에서 줄여 시험하세요.

1. 기본 스트로크를 유지하며 필터 제거
2. 패턴이나 브러시를 일반 단색 선으로 교체
3. 가변 폭 제거
4. 중첩 변환 정리
5. 객체 하나를 최소 SVG로 내보내기
6. 목적지에서 열기

선을 복원한 첫 단순화가 미지원 기능을 알려 줍니다. 전체를 합치는 대신 호환 대안을 고르세요.

외부 CSS와 자원도 위험입니다. 웹 SVG는 페이지 클래스나 사용자 속성을 상속하지만 단독 파일은 그렇지 않습니다. 반대로 편집기는 객체 모델에 대응하지 않는 선택자를 버릴 수 있습니다. 독립 파일은 목적지가 실제 가져오는 자체 스타일을 쓰세요.

편집 스트로크와 윤곽선 경로

편집 스트로크는 중심 경로와 폭, 끝, 연결, 대시, 색상을 유지해 작고 쉽게 조정합니다. 윤곽선 스트로크는 보이는 띠를 채운 경로로 바꿔 외형을 고정하지만 중심선과 스트로크 제어를 잃습니다.

필수 브러시나 가변 폭을 목적지가 유지하지 못하거나 업체가 채운 도형을 요구할 때 전달 사본을 바꾸세요. Adobe 객체 확장 문서는 스트로크를 구성 객체로 확장하는 방법을 설명합니다.

편집 원본은 유지하세요. 확장은 다음을 만들 수 있습니다.

• 노드와 파일 크기 증가
• 느려지는 폭 변경
• 복잡한 겹침 형태
• 합쳐야 하는 별도 조각
• 플롯, 각인, 애니메이션용 열린 경로의 의미 변경

펜 플로터나 각인에서 중심을 한 번 따라야 하면 특히 위험합니다. 윤곽선은 두 경계를 줍니다. 대신 단일 선 SVG 안내를 쓰세요.

사용처별 해결책

같은 업체의 다른 편집기만이 아니라 실제 목적지를 시험하세요. 각 시스템은 서로 다른 SVG 부분을 지원합니다.

안전한 수정 순서

되돌릴 점검부터 구조 변환으로 진행하세요.

1. 편집 원본을 유지하고 복제
2. 도형 존재 확인
3. 렌더러 둘 비교
4. 명시적 색상, 폭, 불투명도 시험
5. 배경 대비와 상속 CSS 확인
6. 페이지 경계, 클립, 마스크, 중첩 뷰포트 검사
7. 변환과 최종 크기 렌더링 검사
8. 미지원 외형 하나씩 단순화
9. 전달 사본의 필요한 선만 윤곽선 변환
10. 전달 SVG를 다시 열어 원본 비교

좋은 경로가 남아 있으면 중간 해결책으로 래스터화하지 마세요. 유지하려던 도형을 제거하고, 모서리를 둥글게 하거나 곡선을 바꾸고 불필요한 노드를 만들 수 있는 추적 단계를 더합니다.

PerfectVector의 역할

원 벡터가 사라졌거나 사용 불가능하고 가장 좋은 남은 원본이 래스터일 때만 유용합니다. 적합한 평면 로고, 아이콘, 일러스트를 편집 도형으로 재구성합니다.

CSS 수정, 누락 스트로크 복원, 편집 중심선을 유지한 미지원 브러시 변환은 하지 않습니다. 경로가 있으면 편집기에서 색상, 경계, 변환, 외형을 고치세요. 스크린샷 추적보다 많은 정보를 유지합니다.

FAQ

내보낸 SVG 스트로크가 사라지는 이유는 무엇인가요? 경로는 있지만 색상 없음, 0 불투명도, 배경색, 너무 가는 폭, 클리핑, 배율 문제, 미지원 외형일 수 있습니다. 도형을 확인한 뒤 색상, 경계, 변환, 지원을 분리하세요.

경로가 남았는지 어떻게 보나요? 편집기에서 선택해 윤곽선이나 와이어프레임으로 보거나 텍스트에서 해당 도형 요소를 찾으세요. 노드는 있는데 선이 없으면 누락 대신 렌더링이나 스타일 문제입니다.

SVG 가장자리에서 스트로크가 잘리는 이유는 무엇인가요? 중심 경로 밖으로 뻗으므로 viewBox 경계의 경로는 절반을 잃을 수 있습니다. 끝, 연결, 필터, 클립, 마스크도 여백이 필요합니다. 안쪽으로 옮기거나 전체 외형에 맞게 뷰포트와 클립을 정하세요.

내보내기 전에 확장해야 하나요? 필수 외형을 목적지가 유지하지 못하거나 채운 도형을 요구할 때만 사본을 확장하고 원본을 유지하세요. 도형을 늘리며 단일 중심선을 따를 플로터나 각인에는 부적합합니다.

PerfectVector가 사라진 스트로크를 복원하나요? 경로나 스타일 수정이 필요한 SVG에서는 아닙니다. 벡터가 없을 때 남은 래스터의 보이는 작품을 재구성하지만 CSS, 브러시 설정, 원래 중심 경로를 복원하지 않습니다.

Sources

1. W3C — SVG 2 그리기 — 채우기, 스트로크, 폭, 끝, 연결, 벡터 효과를 정의합니다.
2. W3C — SVG 2 좌표계 — 뷰포트, viewBox, 단위, 변환입니다.
3. MDN — vector-effect — non-scaling-stroke 동작입니다.
4. Adobe Illustrator — 객체 그룹화와 확장 — 스트로크를 편집 구성 객체로 확장하는 방법입니다.

---

원 벡터가 없어 래스터만 남았다면 PerfectVector로 깨끗한 경로를 만들고 목적지 앱에서 검증하세요. 경로가 남았다면 다시 추적하는 대신 SVG를 수정하세요.