SVG 최적화: SVGO로 SVG 파일 용량 줄이기

사용 방법

1. 왼쪽 상자에 SVG 코드를 붙여 넣거나 파일 열기를 누릅니다. 예시 불러오기로 동작을 볼 수 있습니다.
2. 오른쪽에 최적화된 코드와 줄어든 용량이, 그리고 변환 전후의 그림이 나와서 같아 보이는지 확인할 수 있습니다.
3. 코드를 복사하거나 파일로 받습니다. 그림이 달라 보이면 소수 자릿수를 늘리거나 옵션을 바꾸세요.

예시

예시 SVG: 편집기에서 내보낸, 파란 둥근 사각형 위에 흰 원과 체크 표시

→ 715바이트 → 343바이트 (52% 감소)

rx="24.000000", cx="60.000000"

→ rx="24", cx="60"

script 요소와 onclick 속성이 있는 SVG

→ 둘 다 제거됩니다

계산 방식

코드를 트리로 읽어 SVGO의 기본 플러그인 묶음을 거친 뒤 다시 씁니다. SVGO는 많은 빌드 시스템이 쓰는 오픈소스 도구입니다. 여러 번 반복을 켜면 결과가 더 작아지지 않을 때까지 다시 실행해서, 일부 파일에서는 더 줄입니다.

편집기에서 내보낸 형태의 SVG로 테스트합니다. 용량이 줄어드는지, 주석과 메타데이터와 편집기 네임스페이스가 사라지는지, viewBox가 남는지, 소수 자릿수 설정이 숫자를 바꾸는지, 요청하면 스크립트와 이벤트 속성이 제거되는지 확인합니다. 위 예시는 그 설정의 실제 결과입니다.

출처

• SVGO (여기서 쓰는 최적화 도구)
• MDN: SVG
• W3C: Scalable Vector Graphics (SVG) 2

자주 묻는 질문

SVGO는 무엇을 지우나요?

주석, 메타데이터, Inkscape·Sketch 같은 편집기 전용 속성, 빈 그룹, 쓰지 않는 id, 브라우저가 이미 가정하는 기본값을 되풀이한 속성, 공백입니다. 경로도 더 짧은 형태로 다시 쓰고, #ffffff를 #fff처럼 색을 짧게 적습니다.

그림이 달라 보이나요?

보통은 아닙니다. 기본값인 소수 3자리는 일반 크기에서 보이지 않습니다. 아주 작거나 큰 그래픽이나 세부가 가는 경로는 더 많은 자릿수가 필요할 수 있으니, 차이가 보이면 값을 올리세요. 전후 그림으로 확인할 수 있습니다.

viewBox는 왜 남기나요?

viewBox가 있어야 SVG를 어떤 크기로든 키우고 줄일 수 있습니다. 어떤 최적화 도구는 이를 지워서 그림이 더 이상 크기에 맞춰 늘어나지 않게 만들지만, 이 도구는 항상 남깁니다. 그림이 컨테이너를 꽉 채우게 하려면 viewBox는 두고 가로·세로 값을 지우는 옵션을 쓰세요.

스크립트는 왜 제거하나요?

SVG 파일은 브라우저에서 직접 열 때 실행되는 스크립트를 담을 수 있습니다. 대부분의 SVG 그림에는 필요 없고, 남이 만든 SVG를 쓸 때는 제거하는 편이 안전합니다. 이 페이지의 미리보기는 그림으로 보여 주므로 스크립트가 실행되지 않습니다.

최적화한 SVG가 더 커지기도 하나요?

이미 아주 작거나 이미 최적화된 파일에서는 드물게 그렇습니다. 그러면 결과 줄에 더 커졌다고 나오니 원본을 쓰세요.

파일이 업로드되나요?

아니요. SVGO가 브라우저에서 실행됩니다. 5MB까지 열 수 있습니다.

관련 도구

• 이미지
• Base64
• 색상

마지막 업데이트: 2026-10-25