SVG는 원래 무한히 선명해야 하므로, 흐릿한 SVG 아이콘은 거의 항상 몇 가지 특정 원인을 가리킵니다. 이 체크리스트를 위에서부터 차례로 점검하세요.
1. 사실은 PNG를 내보낸 경우
가장 흔한 원인입니다. 1× 화면 기준으로 만든 PNG는 2×/3× 레티나 화면에서 브라우저가 확대하므로 흐릿해 보입니다. 선명함이 중요하고 대상이 지원한다면 SVG를 쓰세요. PNG를 꼭 써야 한다면 표시 크기의 2~3배로 내보내세요.
2. viewBox 누락 또는 오류
viewBox가 없으면 브라우저가 SVG를 깔끔하게 확대하지 못합니다. 루트 요소에 아트워크 좌표계와 맞는 viewBox가 있는지 확인하세요:
<svg viewBox="0 0 24 24" width="24" height="24">…</svg>3. 반픽셀(sub-pixel) 위치
아이콘이 소수점 픽셀에 놓이면(예: left: 10.5px, 또는 flex/grid 컨테이너가 반픽셀에 떨어질 때) 가장자리가 안티에일리어싱되어 흐려집니다. 컨테이너를 정수 픽셀에 맞추고 홀수 크기의 부모를 피하세요.
정수가 아닌 값의 transform: translate(...)나 부모의 scale()도 아이콘을 반픽셀로 밀어낼 수 있습니다. DevTools에서 계산된 레이아웃을 확인하세요.
4. CSS로 고정 크기 래스터를 확대
CSS에서 width/height를 래스터 이미지의 원본 크기보다 크게 주면 픽셀이 확대됩니다. SVG는 괜찮지만 PNG는 흐려집니다. 에셋 크기를 표시 크기에 맞추거나 SVG로 바꾸세요.
5. 배경 이미지 렌더링
CSS background-image로 쓴 아이콘은 background-size가 원본 크기와 안 맞으면 흐리게 렌더될 수 있습니다. 선명한 결과를 원하면 인라인 SVG나 크기를 명시한 <img>를 쓰세요.
Icony에서 내보낼 때는 정확한 크기를 선택해 깨끗한 SVG(모든 배율에서 선명)나 크기가 정확한 PNG를 받을 수 있어, 위 원인 대부분을 피할 수 있습니다.