SVG 최적화란?
SVG(확장 가능한 벡터 그래픽) 파일에는 모양에 영향을 주지 않고 파일 크기를 늘리는 불필요한 메타데이터, 설명, 편집기 데이터, 기본값 및 중복 속성이 포함되어 있는 경우가 많습니다. SVGO(SVG 최적화 프로그램)은 SVG 파일을 정리하고 최적화하기 위한 업계 표준 도구입니다. 시각적 출력을 유지하면서 불필요한 데이터를 제거하기 위해 여러 최적화 단계를 적용합니다.
SVG 최적화 도구를 사용하는 방법
- 1SVG 코드를 입력 영역에 붙여넣거나 샘플 로드를 클릭하여 예제를 시도해 보세요.
- 2Optimize SVG를 클릭하여 SVGO 최적화를 실행하세요.
- 3원본 파일 크기와 최적화된 파일 크기 및 시각적 미리 보기를 나란히 비교해 보세요.
- 4최적화된 SVG 코드를 복사하거나 파일로 다운로드하세요.
주요 활용 사례
웹용 아이콘 최적화
더 빠른 페이지 로드와 더 작은 번들 크기를 위해 SVG 아이콘 파일 크기를 줄입니다.
SVG 내보내기 정리
Figma, Sketch 또는 Illustrator에서 내보낸 SVG에서 편집기 메타데이터와 불필요한 속성을 제거합니다.
인라인 SVG 최적화
HTML 또는 Vue/React 구성 요소에 인라인하기 전에 SVG 코드를 최소화하세요.
자주 묻는 질문
최적화로 인해 내 SVG 모양이 변경되나요?
아니요. SVGO는 SVG의 시각적 모양에 영향을 주지 않는 데이터만 제거합니다. 최적화된 출력은 원본과 동일해야 합니다.
파일 크기를 얼마나 줄일 수 있나요?
일반적으로 SVG 복잡성과 포함된 편집기 메타데이터 양에 따라 20-60%입니다. 디자인 도구에서 내보낸 SVG는 대개 가장 큰 감소를 보입니다.