SVG가 빈 화면으로 열릴 때: 재구성 전 일곱 점검

빈 SVG를 열었다면 저장이나 출력 전에 복제하세요. 작품이 남아 있어도 viewBox 밖, 투명하거나 흰색, 클립이나 마스크에 숨음, 앱 미지원 기능일 수 있습니다. 빈 문서를 다시 저장하면 복구 가능한 파일을 정말 빈 파일로 만들 수 있습니다.

사본을 브라우저와 벡터 편집기에 여세요. 한쪽만 보이면 앱 지원이나 구조, 모두 비면 뷰포트, 색상, 클리핑, 잘못된 마크업, 누락 가능성이 높다는 첫 분기입니다.

서로 무관한 수정 일곱 가지가 아니라 진단 지도입니다. 무언가를 교체하기 전에 도형이 있는지 확인하고 경계, 배율, 색상, 클리핑, 효과 지원, 의존성을 시험하세요.

1. 파일을 유지하고 데이터 확인

새 이름의 사본을 만든 뒤 크기를 보고 텍스트로 여세요.

0바이트나 빈 루트 <svg>만 있으면 그 사본에서는 복구할 것이 적습니다. 경로, 그룹, 스타일, 큰 인코딩 데이터가 있으면 화면이 비어도 파일은 빈 것이 아닙니다.

크다고 너무 추정하지 마세요. 고해상도 이미지, 반복 스타일, 잘못된 데이터일 수 있습니다. 추가 검사가 가치 있다는 뜻일 뿐입니다.

2. 브라우저와 편집기 비교

최신 브라우저로 끌어 놓고 같은 사본을 Inkscape, Illustrator, Figma 등에서 여세요.

브라우저에서 보인다고 호환 경로가 있다는 증명은 아닙니다. CAD나 편집기가 무시하는 래스터와 웹 콘텐츠도 표시합니다.

3. 전체 선택과 경계 검사

Select All을 쓰고 선택 상자, 좌표, 너비, 높이를 보세요.

• 페이지에서 먼 상자는 캔버스 밖 작품입니다.
• 거대한 상자는 불필요한 점, 클리핑 객체, 배경 사각형일 수 있습니다.
• 정상 상자인데 안 보이면 색상, 불투명도, 클리핑을 봅니다.
• 선택 객체가 없으면 미지원 콘텐츠, 빈 문서, 가져오기 실패일 수 있습니다.

밖에 있으면 페이지로 옮기거나 그림에 페이지를 맞추세요. 실제 치수도 틀리지 않다면 경로 배율은 바꾸지 마세요.

4. 작품과 viewBox 비교

루트를 검사하세요.

<svg xmlns="http://www.w3.org/2000/svg"
  width="800" height="600" viewBox="0 0 800 600">

viewBox의 네 숫자는 좌표계 명세의 최소 x, 최소 y, 너비, 높이입니다. 10000,10000 근처 작품은 viewBox="0 0 800 600" 안에 나타나지 않습니다. 0이나 음수인 viewBox 치수는 해당 요소 렌더링을 끕니다.

실제 도형에 따라 보이는 경계를 고치고 다른 파일의 임의 viewBox를 붙이지 마세요. 보이지만 배율이 틀리면 잘못된 크기 SVG 안내가 viewBox와 뷰포트 치수의 관계를 설명합니다.

5. 색상과 가시성 확인

객체의 채우기와 스트로크를 보세요. 흔한 상태입니다.

• 스트로크 없는 fill="none"
• 흰 캔버스의 흰 채우기
• opacity="0", fill-opacity="0", stroke-opacity="0"
• display="none", visibility="hidden"
• 이 값을 적용하는 클래스 스타일
• 현재 배율의 매우 가는 스트로크

뒤에 색상 사각형을 놓거나 경로 사본 하나에 강한 시험 색상을 주세요. 나타나면 진단 색상을 남기지 말고 의도한 스타일을 복원하세요.

채우기는 보이고 일부 선만 없으면 사라지는 스트로크 안내로 좋은 도형을 재추적하지 않고 색상, 클리핑, 배율, 외형을 시험하세요.

6. 목적지가 지원하지 않을 기능 검사

clipPath, mask, pattern, filter, <image>, <foreignObject>를 검색하세요.

클립과 마스크는 좌표계나 참조가 깨지면 모든 내용을 숨길 수 있습니다. 렌더링 모델은 클리핑, 마스킹, 필터, 합성을 처리 과정에 둡니다. 패턴과 필터는 가져오기마다 다릅니다. <image>는 이미지를, <foreignObject>는 다른 XML 네임스페이스 콘텐츠를 담습니다. 내장 콘텐츠 명세가 설명합니다.

도형은 남고 HTML 라벨만 사라지면 foreignObject와 SVG 자체 텍스트를 비교해 실패 라벨만 교체하세요.

경로는 보이는데 그림자가 잘리면 SVG 그림자 잘림 진단으로 필터 영역과 외부 뷰포트를 따로 시험하세요.

참조도 실패합니다. url(#name)의 ID가 존재하고 고유한지 보세요. 외부 이미지, 글꼴, 스타일시트, 연결 파일은 이동 때문에 깨졌을 수 있습니다.

Qt에서는 SVG 렌더러 안내가 모듈과 로딩을 기능 한계에서 구분합니다. 작은 원본을 먼저 비교하고 선택한 방식에서 검사하세요.

브라우저는 보이고 CAD는 비면 <path>, <rect>, <circle> 같은 일반 도형을 찾으세요. 내장 PNG에는 CAD 곡선이 없습니다.

7. 검증이나 재출력

잘못된 XML, 속성, 출력기 전용 구조는 한 렌더러가 받아도 다른 곳이 거부합니다. 원 디자인이 있으면 만든 앱에서 열어 일반 또는 단순 SVG 사본을 내보내세요. 목적지가 못 쓰는 기능만 확장하고 원본과 비교하세요.

원본이 없으면 SVG/XML 검증기나 구문 오류 편집기를 쓰세요. 사본에서 첫 구조 오류부터 고치세요. 이후 메시지는 그 결과일 수 있습니다.

유일한 사본에 최적화기를 쓰지 마세요. 구조를 다시 써 원인 모를 때 복구를 어렵게 합니다.

재구성이나 재벡터화할 때

내장 래스터뿐이거나 브라우저 밖에서 구조가 못 쓰거나 편집 원본이 없을 때 적합합니다. 최고 품질 래스터를 추출하거나 찾아 실제 경로로 추적하세요.

캔버스 밖 경로, 틀린 viewBox, 흰 채우기, 미지원 마스크 하나에는 적절하지 않습니다. 이미 있는 도형을 유지해 불필요한 손실을 피하세요.

전체가 픽셀 이미지 하나로 선택되거나 크게 확대해 네모나면 재구성 전에 숨은 픽셀 진단을 쓰세요.

PerfectVector의 역할

이미지 벡터 흐름은 래스터뿐인 경우입니다. 가장 좋은 PNG, JPG 등 지원 이미지를 올리고 실제 도형, 깨끗한 경계, 빈 공간, 다룰 만한 경로인지 보세요.

임의 마크업 수정이나 외부 자원 복원은 하지 않습니다. 좋은 경로가 있으면 편집기에서 뷰포트, 스타일, 미지원 기능을 고치세요. 래스터 껍데기뿐이면 보이는 작품을 경로로 재구성해 호환 벡터를 얻으세요.

FAQ

Chrome에서는 보이는데 Illustrator는 왜 비나요? 웹 콘텐츠, 복잡한 패턴, 필터, 마스크, 래스터 껍데기처럼 브라우저만 지원할 수 있습니다. 일반 경로가 있는지 검사한 뒤 단순 SVG로 내보내세요.

캔버스 밖 작품은 어떻게 찾나요? 전체 선택해 경계와 좌표를 보세요. 멀리 있으면 옮기거나 페이지를 그림에 맞추고 의도한 영역에 viewBox를 맞추세요.

흰 SVG가 빈 것처럼 보일 수 있나요? 네. 흰 채우기나 스트로크는 흰 캔버스에 사라집니다. 0 불투명도, display="none", visibility="hidden" 설정도 가능하므로 색상 배경과 계산 스타일을 보세요.

Fusion이나 CAD에 빈 것으로 들어오는 이유는 무엇인가요? 곡선 대신 비트맵이나 미지원 웹 콘텐츠일 수 있습니다. <path> 등과 보이는 내용이 <image>나 <foreignObject>에 있는지 보세요.

PNG로 바꿨다가 SVG로 되돌릴까요? 복구 가능한 벡터가 없고 래스터 모습이 가장 좋은 원본일 때만 쓰세요. 왕복은 기존 구조를 파괴합니다. 먼저 뷰포트, 가시성, 클리핑, 지원을 진단하세요.

Sources

1. W3C — SVG 2 좌표계 — 뷰포트, viewBox, 단위, 변환입니다.
2. W3C — SVG 2 렌더링 모델 — 클리핑, 마스킹, 필터, 합성, 순서입니다.
3. W3C — SVG 2 내장 콘텐츠 — 이미지와 외부 콘텐츠입니다.
4. W3C — 마크업 검증 서비스 — 마크업 디버깅의 표준 검증입니다.

남은 파일이 컨테이너 속 픽셀뿐이면 편집 경로로 재구성하고 미리보기를 보세요. 좋은 경로가 있으면 유지하고 문서의 가장 작은 실패 부분만 고치세요.