SVG 최적화

SVG 최적화가 하는 일

디자인 도구(일러스트레이터, 피그마, 스케치)에서 내보낸 SVG에는 렌더링에 필요 없는 정보가 많이 들어 있습니다. 편집기 메타데이터, 주석, 숨겨진 레이어, 기본값과 같은 속성, 소수점 여섯 자리 좌표 같은 것들입니다. 이 도구는 보이는 결과를 바꾸지 않으면서 그런 부분을 제거합니다.

보통 30~70% 줄어듭니다. 아이콘처럼 작은 파일은 비율이 더 크고, 복잡한 일러스트는 절대 용량이 많이 줄어듭니다.

제거되는 것

• XML 선언과 DOCTYPE — 브라우저 인라인에서는 필요 없습니다
• <metadata>, <title>, <desc> — 편집기가 넣는 정보
• 주석 <!-- -->
• 편집기 전용 네임스페이스 속성 — inkscape:, sodipodi:, xmlns:serif 등
• 빈 그룹 <g></g>과 빈 <defs>
• 태그 사이 공백·줄바꿈
• 소수점 좌표 반올림 (3자리)

제거되지 않는 것

• viewBox — 반응형 크기 조절에 필수라 유지합니다
• id 속성 — CSS나 JS에서 참조할 수 있어 유지합니다
• <style>과 class — 스타일 유지
• 애니메이션 관련 요소

언제 쓰나

• 웹사이트 아이콘 — 수십 개 아이콘을 인라인으로 넣을 때 합쳐지면 차이가 큽니다
• 로고 — 헤더에 들어가는 로고는 모든 페이지에서 로드됩니다
• 이메일 서명·OG 이미지 원본 — 용량 제한이 있는 곳
• 깃 저장소 — 디프가 깨끗해집니다

사용법

• SVG 파일을 불러오기로 열거나, 코드를 왼쪽 창에 직접 붙여넣습니다.
• 최적화를 누르면 오른쪽에 결과와 미리보기가 나옵니다. 두 미리보기가 같아 보여야 정상입니다.
• 복사하거나 저장합니다. 원본은 건드리지 않습니다.

자주 묻는 질문