SVG 용량 줄이기 — 최적화가 지우는 6가지
디자인 툴에서 내보낸 아이콘 SVG 하나가 몇 킬로바이트씩 나가는 경우, 원인은 대개 그림 자체가 아니라 화면에 보이지 않는 편집기 메타데이터와 필요 이상으로 긴 소수점 좌표입니다. 이런 부분은 지워도 그려지는 모양이 그대로입니다. 정확히 무엇이 왜 붙어 있고, 무엇을 지우면 되는지부터 확인합니다.
요약 ① 편집기가 저장하는 캔버스 설정·라이선스 메타데이터·주석은 브라우저가 그림을 그릴 때 전혀 쓰이지 않는 텍스트입니다. ② 좌표·투명도 같은 소수 값도 화면 표시에 필요한 것보다 훨씬 긴 자릿수로 저장되는 경우가 많습니다. ③ 다만 소수점 반올림과 공백 압축 두 가지는 지나치면 모양이 실제로 바뀔 수 있어 미리보기 확인이 필요합니다.
내보낸 SVG가 생각보다 큰 이유
인스케이프로 원 하나를 그려 SVG로 저장하면, 실제로 원을 그리는 코드는 <circle> 태그 한 줄이면 충분합니다. 하지만 저장된 파일에는 그 외에도 여러 정보가 함께 담깁니다.
캔버스의 확대 비율과 격자 설정을 기록한 <sodipodi:namedview>, 파일 정보를 담은 <metadata> 블록(그 안에 RDF·Dublin Core 형식의 라이선스 정보가 들어가기도 합니다), 도형 하나하나에 붙는 inkscape:label 같은 속성이 대표적입니다. 일러스트레이터로 내보낸 파일은 형태는 다르지만 원리가 같습니다. <!-- Generator: Adobe Illustrator ... --> 같은 주석과 자체 metadata 블록을 남깁니다.
이 정보들의 공통점은, 해당 편집기로 파일을 다시 열었을 때 작업 화면을 복원하기 위한 것이지 브라우저가 그림을 그리는 데는 쓰이지 않는다는 점입니다.
좌표도 비슷한 문제를 겪습니다. 편집기 내부에서는 계산 오차를 줄이려고 좌표를 32.128471처럼 소수점 여러 자리로 저장하지만, 아이콘 크기로 화면에 그릴 때 이 정도 정밀도는 픽셀 단위로 구분되지 않습니다.
코드만 보고 직접 지우는 방법
지워도 모양이 그대로인 항목부터, 지나치면 모양이 바뀔 수 있어 주의가 필요한 항목까지 순서대로 정리합니다.
1. XML 선언과 DOCTYPE
파일 맨 위의 <?xml version="1.0" ...?>와 <!DOCTYPE svg ...> 줄입니다. 파일을 단독으로 열어 XML로 검증할 게 아니라 <img> 태그나 HTML에 인라인으로 쓴다면 이 선언 없이도 그대로 그려집니다.
2. 주석
<!-- Generator: ... -->처럼 어떤 프로그램으로 만들었는지만 남긴 줄입니다. 지워도 아무 영향이 없습니다.
3. metadata와 편집기 전용 요소
<metadata>...</metadata> 블록과 <sodipodi:namedview>, inkscape:로 시작하는 요소들입니다. 전부 편집기가 작업 환경을 복원하기 위해 남긴 정보이고 렌더링에는 관여하지 않습니다.
4. 편집기 전용 속성과 쓸모없어진 네임스페이스 선언
개별 도형 태그에 붙은 inkscape:label="Layer 1" 같은 속성, 그리고 metadata 블록이 사라지면 더 이상 참조할 곳이 없어지는 xmlns:inkscape·xmlns:sodipodi·xmlns:dc·xmlns:cc·xmlns:rdf 선언입니다. 기본 네임스페이스인 xmlns="http://www.w3.org/2000/svg"는 렌더링에 필요하므로 그대로 둡니다.
5. 소수점 반올림 — 모양이 바뀔 수 있는 항목
좌표·투명도·선 굵기 같은 소수 값을 2~3자리로 줄입니다. 다만 이 항목은 반올림 대상이 좌표에만 한정되지 않는다는 점을 주의해야 합니다. 자릿수를 지나치게 낮추면 0에 가까운 선 굵기나 투명도 값이 0으로 반올림돼 사라질 수 있습니다.
6. 공백·줄바꿈 압축 — 모양이 바뀔 수 있는 항목
태그 사이의 줄바꿈과 들여쓰기는 그림과 무관해 지워도 됩니다. 다만 <text> 태그 안의 공백은 실제로 화면에 표시되는 글자 사이 간격이라, 이 부분까지 한 칸으로 줄이면 글자가 들어간 SVG는 간격이 달라질 수 있습니다.
여섯 항목을 파일마다 손으로 확인하고 지우는 일은 아이콘 개수가 많아질수록 반복 작업이 됩니다. 저희 도구로 확인하기.
설치 없이 브라우저 안에서 바로 최적화되며, 붙여넣거나 업로드한 SVG는 서버로 전송되지 않습니다.
자주 막히는 지점
| 상황 | 원인 |
|---|---|
| 최적화 후 글자 사이 간격이 달라짐 | 공백 압축이 <text> 안의 공백에도 예외 없이 적용되기 때문입니다. 미리보기로 확인하세요 |
| 미리보기가 뜨지 않음 | 결과에 <svg>...</svg> 형태가 온전히 있어야 미리보기가 나타납니다. 조각(fragment) 코드만 있으면 뜨지 않습니다 |
| 소수점을 낮췄더니 얇은 선이 사라짐 | 반올림은 좌표뿐 아니라 stroke-width·opacity 등 모든 소수 값에 적용됩니다 |
| 네임스페이스를 껐는데도 xmlns가 남음 | 제거 대상은 inkscape·sodipodi·dc·cc·rdf뿐이고, 기본 xmlns는 렌더링에 필요해 남습니다 |
| 절감률이 0%로 나옴 | 아직 SVG를 입력하지 않았거나 옵션을 모두 껐을 때입니다 |
정리
- 내보낸 SVG가 큰 이유는 그림이 아니라 눈에 보이지 않는 편집기 메타데이터·주석·과한 소수점 정밀도가 텍스트로 남아 있기 때문입니다.
- XML 선언·주석·metadata·편집기 전용 속성은 지워도 렌더링에 영향이 없습니다.
- 소수점 반올림과 공백 압축은 예외적으로 모양에 영향을 줄 수 있어, 반올림 자릿수를 확인하고 미리보기로 확인하는 절차가 필요합니다.
- 정규식 기반의 가벼운 최적화라 벡터 병합 같은 고급 최적화는 하지 않고, 텍스트 차원에서 지울 수 있는 부분만 지웁니다.
설치 없이 브라우저 안에서 바로 최적화되며, 붙여넣거나 업로드한 SVG는 서버로 전송되지 않습니다.
자주 묻는 질문
최적화해도 그림 모양이 달라지지 않나요?
대부분은 그대로입니다. XML 선언·주석·metadata·편집기 전용 속성 제거는 렌더링에 관여하지 않는 텍스트만 지우기 때문입니다. 다만 소수점 반올림 자릿수를 지나치게 낮추거나, 텍스트가 포함된 SVG에서 공백 압축을 쓰면 모양이 달라질 수 있어 결과 화면의 미리보기로 확인하는 편이 안전합니다.
소수점 자릿수는 몇으로 두는 게 좋나요?
기본값은 2이고 0~6 사이에서 슬라이더로 조절할 수 있습니다. 아이콘처럼 작게 쓰이는 SVG는 2자리로도 대부분 충분합니다. 반올림 후 얇은 선이나 흐린 투명도가 사라진 것처럼 보이면 자릿수를 한두 단계 올려 다시 확인하면 됩니다.
파일을 업로드하면 서버로 전송되나요?
아니요. 파일 읽기부터 최적화 계산, 결과 미리보기, 다운로드까지 전부 브라우저 안에서 처리됩니다. 붙여넣거나 업로드한 SVG 코드는 서버로 전송되거나 저장되지 않습니다.