공간을 전혀 차지하지 않거나 아무것도 안 보이는 SVG는 거의 항상 아래 중 하나입니다. 순서대로 확인하세요.
1. 크기 없음
width/height도 viewBox도 없는 인라인 <svg>는 크기가 0으로 무너질 수 있습니다. viewBox(종횡비 확보)와 CSS·속성으로 크기를 주세요.
2. 보이는 색이 없음
아이콘이 fill="none" 또는 fill="currentColor"를 쓰는데 아무 색도 지정되지 않으면 투명하게 렌더됩니다. fill을 주거나(currentColor라면 color를) 지정하세요:
<!-- Invisible: no fill color and no stroke set -->
<svg fill="none"><path d="…" /></svg>
<!-- Fixed: give it a color (or currentColor) -->
<svg fill="currentColor"><path d="…" /></svg>3. 깨졌거나 안 맞는 viewBox
viewBox가 실제 path 위치와 안 맞으면 아트워크가 보이는 영역 밖에 놓일 수 있습니다 — DOM엔 있지만 화면 밖에 있는 것이죠. viewBox가 path 좌표를 감싸는지 확인하세요.
4. 잘못된 서버 MIME 타입
<img>나 배경으로 불러올 때 .svg는 image/svg+xml로 제공돼야 합니다. 서버가 text/plain이나 application/octet-stream으로 보내면 브라우저가 렌더를 거부합니다. 서버 설정이나 콘텐츠 타입을 고치세요.
다른 출처에서 <object>/<img>로 외부 SVG를 불러올 때 CORS로 실패할 수도 있습니다. 동일 출처로 두거나 허용 헤더를 추가하면 해결됩니다.
5. 유효하지 않은 마크업
SVG는 XML이라 엄격합니다 — 닫히지 않은 태그나 엉뚱한 문자 하나가 파일 전체를 조용히 깨뜨릴 수 있습니다. .svg를 브라우저에서 직접 열어 보세요. XML 파싱 오류가 보이면 그게 원인입니다.
Icony에서 내보낸 아이콘은 올바른 viewBox와 색이 적용된 유효한 독립 SVG라, 1~3번과 5번 원인을 아예 피합니다.