SVG 최적화 — 용량 줄이기, 무료
SVG를 벡터 형식으로 유지하면서 SVGO로 코드와 숫자 표현을 정리합니다. 브라우저에 올릴 아이콘이나 도형 파일의 구성을 줄이는 데 사용할 수 있지만, 최적화 전후의 표시가 같은지는 확인해야 합니다.
- 브라우저에서 실행
- 업로드되지 않음
- 가입 없음, 기기 성능에 따라 제한될 수 있음
경로 데이터에 남길 소수점 자릿수입니다. 아이콘은 2~3이면 충분하고, 세밀한 일러스트는 더 높이세요.
페이지의 CSS나 자바스크립트가 SVG 내부 요소를 ID로 다루고 있다면 꺼두세요.
SVG가 컨테이너 크기에 맞춰집니다. viewBox는 항상 유지되므로 크기 조절 기능을 잃지 않습니다.
사용 방법과 입력
숫자 정밀도, 반복 최적화와 ID 정리 여부를 선택하세요. 외부 CSS나 스크립트가 SVG의 ID를 참조한다면 ID 정리가 연결을 바꿀 수 있으므로 파일 단독 미리보기뿐 아니라 실제 사용 화면도 점검하세요.
결과 해설과 예제
출력 SVG의 크기와 곡선, 선의 위치를 비교하세요. 숫자 정밀도를 낮추면 작은 도형에서 차이가 보일 수 있으며, 치수 제거 옵션은 페이지에서의 크기 지정 방식에 영향을 줄 수 있습니다.
입력·결과 예시
단순 아이콘의 소수 좌표를 정밀도 3으로 최적화하고 곡선과 파일 크기를 비교합니다. CSS가 #logo를 참조하는 SVG라면 ID 줄이기를 끄고 원 페이지에 다시 넣어 색·동작을 확인하세요.
한계와 주의사항
- 낮은 좌표 정밀도는 작은 곡선이나 세밀한 도형을 바꿀 수 있습니다.
- ID 변경과 크기 속성 제거는 주변 CSS·스크립트·레이아웃에 영향을 줄 수 있습니다.
입력 항목
| 항목 | 설명·제약 |
|---|---|
| 좌표 정밀도 | 경로 데이터에 남길 소수점 자릿수입니다. 아이콘은 2~3이면 충분하고, 세밀한 일러스트는 더 높이세요. · 허용 범위: 0–6 · 입력 간격: 1 |
| 용량이 더 줄지 않을 때까지 반복 실행 | 화면의 단위와 입력 형식을 확인하세요. |
| ID 축약 및 미사용 ID 제거 | 페이지의 CSS나 자바스크립트가 SVG 내부 요소를 ID로 다루고 있다면 꺼두세요. |
| width·height 속성 제거 | SVG가 컨테이너 크기에 맞춰집니다. viewBox는 항상 유지되므로 크기 조절 기능을 잃지 않습니다. |
데이터 처리
처리는 현재 브라우저 탭에서 수행되며, 도구 입력을 계산 목적으로 서버에 업로드하지 않습니다.
근거 출처
자주 묻는 질문
viewBox도 없어지나요?
설정은 viewBox 제거를 비활성화해 둡니다.
배경이 투명한 PNG가 되나요?
아닙니다. 결과는 최적화한 SVG 텍스트입니다.
관련 도구
처음부터 다시 할 필요는 없습니다. 다음 단계에 맞는 도구로 자연스럽게 이어가세요.