SVG 파일이 너무 큰가요? 최적화와 압축 8가지 팁

수백 KB, 또는 수 MB에 이르는 SVG는 대개 앵커가 너무 많거나, 불필요한 경로가 남아 있거나, 편집기 메타데이터가 들어 있거나, 소수점 정밀도가 과도한 데서 나옵니다. 아래 여덟 가지 기법은 원본에서 전달 단계 순으로 정렬했으며 모두 실전에 바로 쓸 수 있습니다.

1. 경로 수준에서: 앵커 줄이기, 경로 병합

팁 1: 앵커 줄이기(경로 단순화)

경로의 앵커가 많을수록 파일이 커지고 렌더링이 느려집니다. 변환할 때 스무딩을 높이면 원본 단계에서 앵커를 줄일 수 있습니다. 이미 만들어진 SVG는 Illustrator의 Object → Path → Simplify나 Inkscape의 Path → Simplify(Ctrl+L)로 불필요한 앵커를 제거하세요. PolySVG 변환 도구에서 스무딩과 색상 수를 조절하면 품질과 파일 크기의 균형을 실시간으로 맞출 수 있습니다.

팁 2: 경로와 레이어 병합

채우기가 같은 여러 경로를 하나로 합쳐 반복 속성을 없애고, 의미 없는 그룹 중첩을 평탄화하고, 숨겨진 레이어와 빈 요소를 삭제하세요. 디자인 소프트웨어에서는 Pathfinder의 unite 연산이나 레이어 병합을 내보내기 전에 사용하세요.

2. 파일 내부에서: 메타데이터 제거, 정밀도 낮추기

팁 3: 편집기 메타데이터 제거

Illustrator나 Inkscape로 내보낸 SVG에는 렌더링에 영향을 주지 않는 편집기 네임스페이스, <metadata>, 주석, 내보내기 설정이 함께 담겨 있어 직접 지우거나 SVGO로 자동 정리할 수 있습니다. 다만 <title>과 <desc>는 접근성에 도움이 되니 남겨 두세요.

팁 4: 소수점 정밀도 낮추기

경로 좌표는 소수점 6~8자리까지 담기는 경우가 많은데 화면 렌더링에는 한두 자리면 충분합니다. SVGO 설정에서 floatPrecision을 1이나 2로 낮추면 눈에 띄는 차이 없이 파일이 상당히 작아집니다. 아주 작은 아이콘은 좌표를 너무 세게 줄이지 마세요. 모양이 왜곡됩니다.

3. 자동화: SVGO 한 줄 명령

팁 5: SVGO로 자동 최적화

SVGO는 사실상의 표준 SVG 최적화 도구로, 주석과 메타데이터 제거, 경로 병합, 경로 명령 최적화, 숫자 정리 등 수십 가지 플러그인을 함께 제공합니다. 기본 사용법은 다음과 같습니다.

npx svgo input.svg -o output.svg

대부분의 파일은 30~70% 줄어듭니다. 주의할 점은 두 가지입니다. viewBox 속성을 지우면 확대가 깨지므로 남겨 두고, CSS로 색을 바꿀 아이콘은 색을 직접 박지 않고 fill을 상속받게 두세요.

최적화 전후의 파일 크기와 실제 전송 크기를 브라우저 개발자 도구에서 비교해 감소량을 확인하세요. 한 번에 한 종류의 파라미터만 바꾸면 문제를 일으킨 단계를 찾기 쉽습니다.

4. 구조와 재사용: symbol과 색 레이어

팁 6: defs와 use로 반복 도형 재사용

같은 아이콘이 한 페이지에 여러 번 등장하면 <defs>로 한 번 정의하고 <use>로 참조하거나 SVG 스프라이트 시트를 만들면 파일 크기와 요청 수가 함께 줄어듭니다.

팁 7: 색 레이어 관리와 비트맵 내삽입 피하기

벡터화할 때 색상 수를 낮춰 레이어 수를 줄이고, 가능하면 복잡한 그라데이션 대신 단색을 사용하세요. 무엇보다 SVG 안에 base64 비트맵을 내삽입하지 마세요. 벡터 파일이 비트맵 운반체가 되어 크기가 감당을 못 합니다. 변환 후 남은 경로는 온라인 편집기에서 클릭해 지우면 됩니다.

5. 전달 단계: 전송 압축과 캐싱

팁 8: gzip/Brotli과 캐시 켜기

SVG는 텍스트라 서버에서 gzip이나 Brotli를 켜면 전송 크기가 보통 다시 60~80% 줄어듭니다. 정적 SVG 파일에는 오래 유지되는 캐시 헤더를 설정하세요. 아주 작은 아이콘은 HTML에 직접 삽입하면 요청 자체를 아낄 수 있습니다. 이 원리는 SVG의 장점에서 다뤘고, 변환 단계에서 크기를 조절하려면 이미지를 SVG로 바꾸는 방법을 읽어보세요.

순서가 중요합니다. 원본에서 앵커와 색 레이어를 관리하고, 파일 내부에서 메타데이터와 정밀도를 정리한 뒤, SVGO를 돌리고, 마지막으로 전송 압축을 켜세요. 네 겹을 모두 적용하면 SVG 파일 크기는 보통 한 자릿수 줄어듭니다.