SVG 최적화기
-
Original Size
-
Optimized Size
-
Savings
왜 SVG 파일을 최적화해야 하나요?
Illustrator, Figma, Inkscape에서 내보낸 SVG 파일에는 많은 불필요한 데이터가 포함되어 있습니다 — 주석, 편집기 메타데이터, 중복 속성, 너무 정밀한 소수점, 빈 컨테이너 등. 최적화 후에는 파일 크기가 30-70% 감소하여 더 빠르게 로드됩니다.
8가지 최적화 전략
각 최적화 패스를 독립적으로 활성화/비활성화하여 제거 항목을 세밀하게 제어
파일 크기 감소 통계
각 최적화 후 원본 크기, 최적화 후 크기, 절약률 확인
비손실 최적화
모든 최적화는 SVG의 시각적 외관을 유지 — 보이지 않는 메타데이터만 제거
3단계로 SVG 최적화하는 방법
SVG 코드 붙여넣기
디자인 도구 또는 파일에서 SVG 소스 코드를 복사하여 입력 필드에 붙여넣기
최적화 선택
적용할 최적화 옵션 체크 — 또는 기본값으로 최대 감소
복사 및 배포
최적화된 SVG를 복사하여 원본 파일과 교체하거나 HTML에 직접 삽입
SVG 최적화 사용 사례
아이콘 라이브러리
Figma 또는 Illustrator에서 내보낸 아이콘 세트를 라이브러리에 포함하기 전에 최적화
로고
웹사이트 헤더, 파비콘, 브랜드 자산용 SVG 로고 정리
애니메이션 SVG
애니메이션 데이터로 이미 커진 애니메이션 SVG의 기본 크기 감소
PWA 및 모바일
더 작은 SVG는 모바일 데이터 소비를 줄이고 Lighthouse 성능을 개선
SVG 최적화 모범 사례
✓ CSS 애니메이션에서 ID 제거 시 주의
SVG가 ID 요소를 대상으로 하는 CSS 또는 JavaScript 애니메이션을 사용하는 경우, 애니메이션이 깨지지 않도록 'ID 제거' 체크를 해제하세요.
✓ viewBox 유지 및 너비/높이 제거
너비/높이 속성을 제거하고 viewBox만 유지하면 SVG가 CSS로 반응형으로 크기 조정됩니다 — 반응형 디자인의 최선 접근법.
✓ 숫자를 소수점 2자리로 반올림
5개 이상의 소수점을 가진 경로 좌표는 시각적으로 구별할 수 없습니다. 2자리로 반올림하면 시각적 차이 없이 파일이 작아집니다.
✓ CI/CD에서 SVGO 자동화
대규모 프로젝트에서는 자동으로 모든 SVG를 최적화하기 위해 빌드 파이프라인에 SVGO를 통합하세요. 이 도구는 빠른 수동 확인에 사용하세요.
❓ 자주 묻는 질문
SVG 최적화로 파일 크기를 얼마나 줄일 수 있나요?
소스에 따라 일반적으로 30~70% 절약이 가능합니다. Illustrator SVG가 가장 많은 절약 효과를 보이는 경우가 많으며, Figma 내보내기는 이미 상대적으로 깨끗합니다.
최적화가 SVG 외관을 변경하나요?
아니요 — 이 도구의 모든 최적화는 보이지 않는 데이터(주석, 메타데이터, 중복 속성)만 제거하거나 지각할 수 없는 정밀도로 숫자를 반올림합니다. 시각적 결과는 원본과 동일합니다.
왜 너비와 높이 속성을 제거하나요?
하드코딩된 너비/높이 값은 SVG가 CSS로 반응형으로 크기 조정되는 것을 방해합니다. 제거하고 viewBox만 유지하면 CSS 속성을 통해 SVG 크기를 완전히 제어할 수 있습니다.
이 도구와 SVGO의 차이는 무엇인가요?
SVGO는 Node.js 커맨드라인 도구로 SVG 최적화 표준입니다. 이 도구는 Node.js를 설치하지 않고도 가장 일반적인 최적화를 위한 편리한 브라우저 인터페이스를 제공합니다.