SVG 최적화 도구
SVG 파일을 최적화/압축하여 크기를 줄입니다.
여기에 파일을 드롭하거나 클릭해서 선택
- 안전
- 처리는 기기에서 수행되며 입력/출력은 어디에도 전송되지 않습니다.
설명
SVG 구조를 분석해 표시 결과에 영향을 주지 않는 범위에서 불필요한 마크업을 제거합니다. 스타일 전개, 크기 선언 최적화, 속성 축소, 숫자·경로 데이터 단순화를 통해 시각적 품질을 유지하면서 파일 크기를 효과적으로 줄입니다.
최적화 항목
| 스타일 | 가능한 범위에서 <style>의 CSS를 각 요소의 style 속성으로 펼칩니다. 이후 fill, stroke 같은 프레젠테이션 속성으로 추가 변환할 수 있으며, 비어 있어 불필요해진 <style> 요소는 삭제합니다. |
|---|---|
| 크기 | 루트 <svg> 요소의 style에 있는 width / height 선언과 width / height 속성을 제거합니다. 반응형 표시에 필요한 viewBox는 유지합니다. |
| 속성 | Figma, Adobe XD, Illustrator 같은 디자인 도구가 추가한 data-name 등의 불필요한 속성을 제거합니다. 참조되지 않거나 요소 병합·변환(예: <line>을 <path>로 변환)으로 불필요해진 id와 class도 삭제될 수 있습니다. |
| 참조 | filter, clip-path, mask 같은 참조 속성을 검사하고 참조 대상이 없으면 제거합니다. 표시 결과에 영향을 주는 유효한 참조는 유지합니다. |
| 숫자 및 경로 | 여러 반올림 정밀도(floatPrecision)의 렌더링 결과를 비교해 시각적 차이를 최소화하면서 가장 가벼운 설정을 자동으로 선택합니다. <path>의 d 속성 같은 경로 데이터도 단순화하고 불필요한 공백과 중복을 제거하며, multipass로 최적화를 반복해 파일 크기를 최대한 줄입니다. |
| 호환성 | 표시 오류를 막기 위해 viewBox를 유지합니다. SVG에 <text> 요소가 있으면 공백 처리를 제어하는 xml:space도 유지하며, <text>가 없을 때는 제거될 수 있습니다. 애니메이션이 포함된 SVG는 동작 손상을 피하기 위해 일부 최적화를 제한합니다. 인라인 변환이 어려운 복잡한 CSS도 원래 표시를 유지하기 위해 남겨 둘 수 있습니다. |
참고
SVG 구조와 작성 방식에 따라 용량 감소율과 최종 결과가 달라질 수 있습니다. 복잡한 선택자나 미디어 쿼리처럼 자동 전개·인라인 변환이 어려운 스타일은 표시 결과를 유지하기 위해 남겨 둘 수 있습니다.
요소를 병합하거나 변환할 때(예: <line>을 <path>로 변환) 구조 변경으로 불필요해진 원래 요소의 id와 class가 제거될 수 있습니다.
filter, clip-path, mask 같은 참조 속성은 대상이 없을 때(예: 끊어진 url(#...) 참조) SVG의 일관성을 유지하기 위해 자동으로 제거됩니다.
CSS 애니메이션이나 <animate> 태그가 포함된 SVG도 최적화할 수 있지만 애니메이션 동작이 쉽게 손상될 수 있어 일부 최적화는 제한됩니다. SVG에 스크립트(JS)가 있으면 최적화 후 예상치 못한 동작이 발생할 수 있습니다.