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

인라인 SVG나 아이콘 스프라이트에 사용할 경우 width·height 속성을 제거하고 CSS로 크기를 제어하는 것이 좋습니다. 단독 파일로 사용할 경우는 기본 크기를 지정해 두는 것이 안전합니다.

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

Figma 내보내기 기본 설정은 메타데이터와 불필요한 그룹이 포함될 수 있습니다. 내보낸 후 SVGO 같은 도구로 최적화하고, currentColor를 사용해 CSS로 색상을 제어할 수 있도록 설정하는 것을 권장합니다.

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

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

아이콘 수가 많고 재사용이 많으면 SVG 스프라이트가 HTTP 요청을 줄여 효율적입니다. 인라인 SVG는 CSS로 직접 스타일링이 쉽고 개별 아이콘에 애니메이션 적용이 편합니다.

사용 목적 선택

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 스타일링과 애니메이션 적용이 쉽습니다.

SVG 최적화 체크리스트

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

아이콘 크기와 viewBox

자주 묻는 질문

같은 카테고리 도구