SVG 파일 용량의 숨은 범인, 에디터 네임스페이스
아이콘 하나 저장했을 뿐인데 SVG 파일이 예상보다 훨씬 큰 경험, 한 번쯤 있을 겁니다. 벡터 경로 데이터 자체는 몇 백 바이트인데 파일은 수 킬로바이트가 넘는 경우가 흔합니다. 범인은 대개 그림 자체가 아니라, Illustrator·Inkscape·Figma 같은 편집 프로그램이 파일을 저장할 때 함께 끼워 넣는 "에디터 전용 메타데이터"입니다. 이 가이드는 그 정체가 정확히 무엇이고, 왜 웹에서는 필요 없는지, 지워도 안전한 이유는 무엇인지 실제 코드와 실측 예시로 설명합니다.
1. SVG는 원래 어떻게 이렇게 무거워지는가
SVG는 XML 기반 텍스트 포맷이라, 벡터 경로뿐 아니라 어떤 정보든 태그와 속성으로 끼워 넣을 수 있습니다. 이 유연함이 곧 문제입니다. Illustrator·Inkscape·Figma·Sketch 같은 편집 프로그램은 파일을 "다시 열었을 때 편집 상태를 그대로 복원"하기 위해 레이어 이름, 잠금 상태, 줌 위치, 그리드 설정 같은 편집기 내부 정보까지 XML 안에 함께 저장합니다. 이 정보는 렌더링 결과에는 아무 영향을 주지 않지만, 파일 용량에는 그대로 더해집니다.
2. 네임스페이스란 무엇인가
XML 네임스페이스는 특정 편집기가 자기만의 커스텀 태그·속성을 표준 SVG 스펙과 충돌 없이 끼워 넣기 위한 접두사 체계입니다. 대표적으로 Inkscape는 sodipodi:·inkscape:, Illustrator는 i:·serif:, Figma는 figma:·data-figma-, Sketch는 sketch: 접두사를 사용합니다. 이들은 각 프로그램이 자기 파일임을 표시하고 편집 상태를 저장하는 용도일 뿐, SVG를 렌더링하는 브라우저나 뷰어는 이 접두사들을 아예 무시합니다.
3. 실제로 파일 안에 무엇이 남는가
Inkscape로 저장한 간단한 원 하나짜리 SVG를 열어 보면 <sodipodi:namedview> 요소(줌·그리드·안내선 위치 저장), <metadata> 블록(라이선스·작성자 정보), XML 주석, 때로는 DOCTYPE 선언까지 포함됩니다. 여기에 편집 과정에서 생겼다 지워진 빈 <g> 그룹, 값이 비어 있는 속성(class="")도 흔히 남습니다. 이런 요소들은 시각적으로 아무것도 그리지 않으면서 자리만 차지합니다.
4. 실측 예시: Figma 내보내기 SVG 정리 전/후
실제로 Figma가 흔히 내보내는 형태(빈 <g> 그룹, XML 주석, figma: 속성, 빈 class/style 속성 포함)의 SVG 샘플을 SVG Cleaner의 정리 로직에 그대로 통과시켜 바이트 수를 측정한 결과입니다.
| 단계 | 바이트 |
|---|---|
| 정리 전 | 767 |
| 정리 후(Illustrator·Figma 네임스페이스, 빈 그룹/주석 옵션 적용) | 587 |
| 절감량 | 180바이트 (약 23.5%) |
이 예시는 비교적 짧은 파일 기준이라 23% 선이지만, 레이어가 많고 편집 이력이 긴 Inkscape 파일일수록 메타데이터 비중이 커져 10~40% 감소도 드물지 않습니다.
5. 이 사이트 SVG Cleaner가 실제로 제거하는 것
SVG Cleaner의 코드를 확인한 결과, 정리 옵션은 편집기별로 분리되어 있습니다: Illustrator(i:, serif: 네임스페이스와 관련 태그·속성), Inkscape(sodipodi:, inkscape: 네임스페이스), Figma(figma:, data-figma- 속성), Sketch(sketch: 네임스페이스)를 각각 선택적으로 켜고 끌 수 있습니다. 추가로 빈 <g> 그룹(중첩된 빈 그룹까지 반복 처리), DOCTYPE 선언, XML 주석, 값이 빈 속성도 정리합니다. 중요한 것은 "미사용 네임스페이스 제거" 옵션의 동작 방식입니다 — 무조건 지우는 게 아니라 본문에서 해당 접두사가 실제로 쓰이고 있는지 먼저 검사한 뒤, 정말 사용되지 않는 xmlns: 선언만 제거해 남은 xmlns:xlink 같은 필수 선언은 그대로 보존합니다.
6. 정리해도 안전한 이유, 그리고 주의할 점
렌더링에 관여하는 요소(경로, 채우기, 그라디언트, 필터, viewBox 등)는 표준 SVG 네임스페이스에 속하므로 편집기 전용 네임스페이스 제거와 무관하게 그대로 남습니다. 다만 visibility:hidden으로 지정된 요소는 CSS나 JS로 나중에 표시될 가능성이 있어 도구가 의도적으로 제거 대상에서 제외합니다. 여러 옵션을 동시에 켜서 정리할 때는 결과 SVG를 실제로 렌더링해 눈으로 한 번 확인하는 습관을 들이는 것이 안전합니다. 아이콘을 최종적으로 PNG로 변환해 배포하려면 SVG to PNG, 파비콘으로 쓰려면 파비콘 메이커도 함께 활용하세요.
자주 묻는 질문
Q. 네임스페이스를 지우면 파일을 다시 Illustrator/Inkscape로 열었을 때 문제가 생기나요?
편집 상태(레이어 잠금, 줌 위치 등)는 사라지지만 도형 자체는 그대로 남습니다. 웹 배포용으로 정리한 사본은 원본과 별도로 보관하는 것을 권장합니다.
Q. xmlns:xlink처럼 실제로 쓰이는 네임스페이스도 지워지나요?
아니요. "미사용 네임스페이스 제거" 옵션은 본문에서 실제 사용 여부를 먼저 검사하므로, xlink: 같은 접두사가 어딘가에서 쓰이고 있다면 해당 xmlns 선언은 보존됩니다.
Q. 정리 후 얼마나 용량이 줄어드나요?
편집기와 파일 복잡도에 따라 다르지만, 실측 기준 짧은 파일도 20% 이상 줄었고 메타데이터가 많은 Inkscape 파일은 10~40% 감소가 일반적입니다.
Q. 정리와 최적화(옵티마이제이션)는 다른 개념인가요?
네. 정리는 렌더링과 무관한 편집기 메타데이터 제거에 집중하고, 최적화는 경로 좌표의 소수점 정밀도 축소 등 더 적극적인 압축까지 포함합니다. SVG Cleaner는 두 기능을 한 도구에 통합하고 있습니다.