SVG 최적화

사용 방법

1. SVG 마크업을 붙여넣거나, 「파일 업로드」 탭으로 전환해 .svg 파일을 드롭합니다.
2. 필요한 플러그인을 토글합니다. 기본값은 SVGO의 preset-default에 맞춰져 있고, 주 토글 8개가 가장 자주 내리는 결정을 커버합니다.
3. SVG 최적화를 클릭합니다. 최적화 전 / 후 바이트 수, 절감 비율, 실제 렌더링 결과를 함께 표시해 시각적 회귀를 즉시 발견할 수 있습니다.
4. 결과 복사로 코드베이스에 바로 붙여넣거나, .svg 다운로드로 정리된 파일을 저장합니다.

제거되는 항목

SVGO는 에디터 메타데이터, 주석, 숨겨진 요소, 기본 속성 등 렌더링에 영향을 주지 않는 마크업을 제거하고, 경로 데이터를 다시 쓰고, 인접 경로를 통합하며, 색상 표기를 단축합니다. 일반적인 아이콘은 40–70% 줄어들고, 절감의 대부분은 convertPathData, mergePaths, cleanupNumericValues에서 나옵니다.

위험한 두 토글

viewBox 제거와 width/height 제거가 기본 비활성화된 데에는 이유가 있습니다. viewBox가 없는 SVG는 반응형 스케일이 불가능하고, width / height가 없는 SVG는 부모 요소의 렌더링 박스를 상속받습니다 — 다운로드용 아이콘에서는 거의 원하지 않는 결과입니다. 임베딩 컨텍스트를 완전히 제어할 때(예: 부모 <use>가 크기를 지정한 스프라이트 시트)에만 켜세요.

언제 최적화하나요

• 프로덕션 빌드: vite-plugin-svgo 같은 도구로 번들러에 SVGO를 통합하세요. 본 도구는 CLI를 띄우지 않고 결과를 빠르게 확인할 때 유용합니다.
• 수작업 / 익스포트한 SVG: Figma, Illustrator, Sketch 모두 에디터 메타데이터와 미참조 id 속성을 대량으로 남기고, SVGO는 이를 깨끗이 제거합니다.
• HTML에 인라인된 SVG: 마크업이 직접 임베드되는 경우 1 KB마다 첫 페인트가 지연됩니다 — 작을수록 좋습니다.

설계상 단일 파일

본 도구는 한 번에 하나의 SVG만 최적화합니다. 배치 최적화, 사용자 정의 플러그인 작성, CI 통합은 SVGO 명령행 도구에 맡기세요 — npm install -g svgo 후 svgo input.svg -o output.svg로 디렉터리나 glob를 처리할 수 있습니다. 본 도구에서 토글 조합을 결정한 뒤, SVGO 공식 문서에서 대응하는 svgo.config.js 스니펫을 복사해 빌드에 적용하세요.

최적화 후 PNG로 변환하거나 React로 추출해야 한다면 SVG → PNG 변환기와 SVG → JSX를 이어서 사용하세요.