🖼️SVG 아이콘 내보내기 최적화 가이드

파일 크기·사용 목적별 SVG 최적화 설정 안내

SVG 최적화 체크리스트

항목권장 조치
메타데이터 제거title, desc, metadata 태그 삭제
불필요 그룹빈 <g> 태그 병합 또는 제거
소수점 자릿수2자리 이하로 반올림 (precision: 2)
색상 단순화색상값을 HEX 단축형으로 변환
경로 최적화Path 데이터를 SVGO로 단순화
툴: SVGO / SVGOMG내보내기 후 반드시 최적화 실행

SVG 아이콘 최적화의 핵심 원칙

Figma나 Illustrator에서 내보낸 SVG 파일에는 편집 메타데이터, 불필요한 그룹, 과도한 소수점 등이 포함되어 있어 실제 필요한 코드보다 훨씬 크기가 큽니다. SVGO(또는 SVGOMG 웹 버전)로 최적화하면 파일 크기를 50~80%까지 줄일 수 있습니다.

웹에서 인라인 SVG를 사용할 때는 fill="currentColor"를 설정해 CSS의 color 속성으로 아이콘 색상을 제어하면 다크모드 대응과 상태 변화 처리가 쉬워집니다.

아이콘 크기와 viewBox

대부분의 UI 아이콘은 viewBox="0 0 24 24"를 표준으로 사용합니다. 24px 그리드는 Material Design 아이콘의 기반 규격으로, 작은 크기에서도 픽셀이 명확하게 정렬됩니다. 인라인 SVG는 width·height 속성을 제거하고 CSS에서 width: 1em으로 설정하면 폰트 크기에 자동으로 맞춰집니다.

자주 묻는 질문

SVG에 width·height 속성을 넣어야 하나요?

인라인 SVG는 속성을 제거하고 CSS로 제어하는 것이 유연합니다. img 태그나 단독 파일로 사용할 경우는 기본 크기를 지정해 두는 것이 안전합니다.

Figma에서 SVG 내보낼 때 주의할 점은?

기본 설정에 메타데이터가 포함됩니다. 내보낸 후 SVGO로 최적화하고, currentColor를 적용해 CSS 색상 제어를 가능하게 하세요.

SVG 스프라이트와 인라인 SVG 중 어느 방식이 나은가요?

아이콘이 많고 재사용이 많으면 스프라이트가 HTTP 요청을 줄여 효율적입니다. 인라인은 CSS 스타일링과 애니메이션 적용이 쉽습니다.