SVG 최적화·정리 (용량 줄이기)

Inkscape나 Illustrator에서 내보낸 SVG에는 편집기 데이터, 주석, 긴 소수점이 들어 있어 그림에 비해 용량이 큽니다. 코드를 붙여 넣거나 파일을 올리면 군더더기를 걷어 내고, 줄어든 용량과 정리 전후 그림을 나란히 보여 줍니다.

사용 방법

1. 'SVG 코드' 칸에 코드를 붙여 넣거나, 아래 상자에 .svg 파일을 끌어다 놓습니다.
2. '옵션'에서 지울 항목을 고릅니다. 기본 설정은 모양이 바뀌지 않는 범위이고, 'title·desc 제거'와 '참조되지 않는 id 제거'는 필요할 때만 켭니다.
3. '소수점 자릿수'를 줄이면 좌표가 짧아집니다. 아이콘 크기의 그림은 1~2자리면 충분합니다.
4. '정리 전 미리보기'와 '정리 후 미리보기'가 같은지 확인한 뒤 '복사'나 'SVG 저장'을 누릅니다. 파일이 여러 개면 '모두 ZIP으로 저장'으로 한 번에 받습니다.

계산 방식과 참고

• 스크립트, on으로 시작하는 이벤트 속성, foreignObject, http 주소나 다른 파일을 가리키는 참조는 항상 지우고, 지운 개수를 결과 위에 표시합니다.
• 편집기 데이터는 inkscape:, sodipodi: 같은 접두어가 붙은 속성과 요소, 쓰이지 않는 네임스페이스 선언입니다. 기본값 제거는 fill-opacity="1"처럼 지워도 그림이 같은 속성만 다룹니다.
• 숫자 정리는 path, viewBox, points, transform과 좌표 값을 지정한 자릿수로 반올림합니다. 좌표 변환이나 도형 병합은 하지 않습니다. 모든 처리는 브라우저 안에서 이루어지고 파일은 어디로도 보내지 않습니다.

자주 묻는 질문

SVG 용량은 왜 그림보다 훨씬 큰가요?

편집기가 화면 배율, 레이어 이름, 메타데이터와 소수점 6~8자리 좌표를 함께 저장하기 때문입니다. 간단한 아이콘은 이 정보가 절반 이상일 때가 많아, 정리하면 보통 40~70% 줄어듭니다.

정리한 뒤 그림이 달라질 수 있나요?

기본 옵션은 모양을 바꾸지 않는 항목만 지웁니다. 소수점을 0~1자리로 줄이면 아주 작은 그림에서 선이 어긋날 수 있으니 두 미리보기를 비교하세요.

title과 desc는 왜 기본으로 남기나요?

화면 낭독기가 그림을 설명할 때 읽는 글이기 때문입니다. 장식용 SVG라면 'title·desc 제거'를 켜도 됩니다.

SVGO와 같은 결과가 나오나요?

다릅니다. 메타데이터 제거와 반올림 같은 안전한 정리만 하고 경로 병합은 하지 않지만, 설치 없이 바로 쓰고 결과를 눈으로 확인할 수 있습니다.