SVG 최적화 가이드
웹 퍼포먼스 향상과 개발 생산성을 높이는 SVG 관리법을 알아보세요.
1. SVG 코드를 최적화해야 하는 이유
Figma, Sketch, Adobe Illustrator 등 디자인 툴에서 `Copy as SVG`를 통해 추출한 코드에는 웹 브라우저 렌더링에 전혀 필요 없는 메타데이터(버전 정보, 에디터 고유 속성, 빈 그룹 태그 등)가 대량으로 포함되어 있습니다. 이를 그대로 웹에 삽입하면 DOM 트리가 무거워져 페이지 렌더링 속도(LCP)가 저하됩니다.
2. React(Next.js) JSX 변환의 이점
기존의 HTML 기반 SVG 코드는 React에서 컴파일 에러를 발생시킵니다. HTML 속성인 `class`나 `fill-rule` 등을 CamelCase인 `className`, `fillRule`로 변경해야 하기 때문입니다. 플로우링크의 변환기는 이러한 속성들을 자동으로 치환하고, 속성 확장이 가능한 <svg {...props}/> 형태의 함수형 컴포넌트로 코드를 즉시 포맷팅합니다.
// 변환 전: <path fill-rule="evenodd" ... />
// 변환 후: <path fillRule="evenodd" ... />
// 변환 후: <path fillRule="evenodd" ... />