SVG Optimizer: 손상 없이 SVG 파일 정리 및 압축

Source: Dev.to

Overview

Figma, Illustrator, Sketch와 같은 도구에서 내보낸 SVG는 불필요한 메타데이터, 주석, 사용되지 않는 정의가 포함돼 파일 크기가 커지는 경우가 많습니다.

시각적 모습은 그대로 유지하면서 SVG 파일을 정리하고 압축하는 브라우저 기반 SVG Optimizer를 만들었습니다.

Why optimize SVGs?

• 페이지 로드 속도 향상 — 파일이 작아져 다운로드 및 파싱이 빨라짐
• Core Web Vitals 및 Lighthouse 점수 개선
• 더 깔끔하고 읽기 쉬운 SVG 코드
• 전체 JS/CSS 번들 크기 감소

How it works

1. SVG 코드를 붙여넣거나 파일을 업로드하거나 샘플을 불러옵니다.
2. 최적화 프리셋을 선택합니다:
   • Default
   • Max Optimized
   • Low Optimization
   • Manual
3. Optimize SVG 버튼을 클릭합니다.
4. 최적화된 결과를 복사하거나 다운로드합니다.

Features

• 100 % 클라이언트‑사이드(업로드나 서버가 필요 없음)
• 빠른 최적화를 위한 프리셋 모드
• 고급 사용자를 위한 수동 제어
• 소수점 정밀도 제어(0–6)
• 전·후 파일 크기 비교
• 안전한 최적화 — viewBox와 경로를 보존

프로덕션에 SVG를 준비하고 프론트엔드 성능을 향상시키는 데 최적의 도구입니다.