SVG 최적화 가이드: 품질 손실 없이 파일 크기를 30-70% 줄이는 방법

Inkscape나 Adobe Illustrator에서 SVG를 내보낸 뒤 텍스트 에디터로 열어본 적 있으신가요? 단순한 아이콘 하나인데 파일이 생각보다 몇 배나 큰 경우가 많습니다. 실제 경로 데이터는 2KB 정도인데 에디터 메타데이터 때문에 전체 파일이 15KB가 되기도 합니다.

이게 왜 문제냐고요? 아이콘 하나라면 별 차이가 없어 보이지만, 페이지에 아이콘이 수십 개 있다면 이야기가 달라집니다. SVG 최적화는 한 번 해두면 계속 효과를 보는 작업입니다. 이 글에서는 SVG 파일 안에 실제로 무엇이 들어 있는지, 무엇을 안전하게 제거할 수 있는지, 그리고 무엇을 건드리면 안 되는지 정리합니다. ToolBox Hubs의 SVG Optimizer 도구를 사용하는 방법도 함께 알아봅시다.

부풀어 오른 SVG 안에는 뭐가 있을까?

Inkscape에서 단순한 도형 하나를 내보내면 실제로 이런 결과물이 나옵니다:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   width="100" height="100" viewBox="0 0 100 100">
  <sodipodi:namedview
     inkscape:zoom="5.6"
     inkscape:cx="50"
     inkscape:cy="50"
     inkscape:window-width="1920"
     inkscape:window-height="1017" />
  <metadata id="metadata5">
    <rdf:RDF>
      <cc:Work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1">
    <circle cx="50" cy="50" r="40" style="fill:#4a90d9" />
  </g>
</svg>

이 파일 전체가 파란 원 하나를 그립니다. 실제 의미 있는 내용은 단 한 줄, <circle> 요소뿐입니다. 나머지 모든 것 — sodipodi:namedview, RDF 메타데이터, Inkscape 고유 속성들 — 은 에디터 상태가 파일에 저장된 것입니다. 브라우저는 렌더링할 때 이 모든 것을 무시하지만, 파싱하고 다운로드하는 데는 여전히 비용이 듭니다.

안전하게 제거할 수 있는 것들

XML 선언문

파일 첫 줄의 <?xml version="1.0" encoding="UTF-8" standalone="no"?> 는 HTML에 포함된 SVG나 <img> 태그로 사용하는 SVG에서는 불필요합니다. 현대 브라우저는 이것 없이도 SVG를 잘 처리합니다.

에디터 네임스페이스 선언

다음 네임스페이스들은 해당 에디터 내부에서만 의미가 있습니다:

xmlns:inkscape, xmlns:sodipodi — Inkscape 전용
xmlns:dc, xmlns:cc, xmlns:rdf — Dublin Core 및 Creative Commons 메타데이터

이 네임스페이스 선언을 제거하면 관련 속성과 요소들도 함께 제거할 수 있습니다.

`sodipodi:namedview` 요소

이것은 순수하게 Inkscape 에디터 상태입니다 — 줌 레벨, 패닝 위치, 격자 설정, 눈금자 단위. 실제 SVG 콘텐츠 대비 크기가 상당히 크면서 렌더링에는 전혀 기여하지 않습니다.

RDF 메타데이터 블록

<metadata> 요소 안의 <rdf:RDF>는 Dublin Core 메타데이터를 저장합니다: dc:title, dc:description, dc:creator, 라이선스 정보 등. 저작권 관리 목적으로 이 정보가 필요한 경우가 아니라면 안전하게 제거할 수 있습니다.

주석

 같은 주석은 바이트를 낭비하고 어떤 도구를 사용했는지 외부에 노출합니다.

Inkscape 전용 속성들

Inkscape가 자주 추가하는 속성들:

inkscape:label="Layer 1" — 에디터의 레이어 이름
inkscape:groupmode="layer" — 그룹 동작 메타데이터
inkscape:connector-curvature="0" — 커넥터 라우팅 힌트
sodipodi:nodetypes="cccc" — 에디터용 노드 타입 힌트

이 중 어느 것도 렌더링에 영향을 주지 않습니다.

빈 요소들

Inkscape는 종종 빈 <defs id="defs2" />와 아무것도 담지 않는 래퍼 그룹을 생성합니다. 이것들은 제거하거나 합칠 수 있습니다.

불필요한 소수 자릿수

M 49.999998 50.000001 같은 경로 데이터는 대부분의 경우 M 50 50으로 반올림해도 시각적 차이가 없습니다. 복잡한 경로에서는 이 최적화만으로도 상당한 바이트를 절약할 수 있습니다.

절대 제거하면 안 되는 것들

이 부분이 사람들이 실수하는 지점입니다. 명확하게 정리해드리겠습니다.

CSS나 JavaScript가 참조하는 ID

스타일시트에 .icon #arrow-head { fill: red; } 가 있거나 JavaScript에서 document.getElementById("tooltip-area")를 호출한다면, 그 ID는 필수입니다. 제거하면 SVG는 여전히 렌더링되지만 스타일이나 인터랙션이 적용되지 않습니다 — 조용히 망가지는 버그가 생깁니다.

최적화 전에 코드베이스에서 SVG에 있는 ID들을 검색해보세요. grep -r "my-id" ./src 명령어로 2초면 확인할 수 있고, 2시간짜리 디버깅을 막을 수도 있습니다.

SVG 내부 요소들이 참조하는 ID

SVG 자체적으로 ID를 내부 참조합니다:

<clipPath id="myClip"> → clip-path="url(#myClip)"
<linearGradient id="grad1"> → fill="url(#grad1)"
<mask id="mask0"> → mask="url(#mask0)"
<filter id="blur"> → filter="url(#blur)"

이 ID들을 제거하거나 바꾸면 참조하는 도형이 스타일 없이 렌더링되거나 아예 보이지 않게 됩니다.

애니메이션 타겟

SMIL 애니메이션(<animate>, <animateTransform>)과 CSS 애니메이션 모두 요소 ID를 타겟으로 합니다. SVG에 애니메이션이 있다면 최적화 후 반드시 테스트하세요. 조용히 멈춘 애니메이션은 큰 파일보다 더 나쁠 수 있습니다.

접근성을 위한 `title`과 `desc`

인라인 SVG에서 스크린 리더 지원이 필요한 경우 <title>과 <desc> 요소는 중요합니다. 접근성 요구사항을 이해하지 않고 제거하지 마세요.

스프라이트 시트의 심볼 ID

SVG 스프라이트 시트는 이런 패턴을 사용합니다:

<svg style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">...</symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">...</symbol>
</svg>

그리고 다른 곳에서: <use href="#icon-home" />. 최적화 중에 그 심볼 ID들이 제거되거나 축약되면 HTML의 모든 use 참조가 깨집니다. 스프라이트 시트를 최적화할 때는 ID 단축화 기능을 비활성화하세요.

SVG Optimizer 도구 사용법 단계별 안내

도구 열기 — toolboxhubs.com/tools/svg-optimizer 접속
SVG 붙여넣기 또는 업로드 — 파일을 드래그해서 놓거나 SVG 마크업을 직접 붙여넣을 수 있습니다. 도구는 브라우저에서 완전히 실행되므로 파일이 서버로 전송되지 않습니다.
설정 검토 — 기본 설정은 에디터 메타데이터, 주석, XML 선언문, 빈 요소를 제거하고 숫자값을 반올림합니다. 외부에서 참조하는 ID가 없다고 확신하지 않는 한 ID 단축화 기능은 비활성화된 상태로 두세요.
최적화 클릭 — 도구가 SVG를 처리하고 최적화 전후 파일 크기와 감소율을 보여줍니다.
시각적으로 확인 — 원본과 최적화된 SVG 미리보기를 나란히 보여줍니다. 동일하게 보이는지 확인하세요.
결과 복사 또는 다운로드

전형적인 아이콘의 경우 전체 과정이 약 30초 걸립니다. 아이콘을 일괄 처리해야 한다면 SVGO CLI가 더 실용적이지만, 한 번에 하나씩 처리할 때는 브라우저 도구가 더 빠릅니다.

실제 파일 크기 감소 사례

실제로 확인한 결과들을 공유합니다:

Inkscape의 단순 아이콘: 8.2KB → 1.4KB (83% 감소). 파일의 거의 전부가 에디터 메타데이터였고, 실제 경로는 매우 작았습니다.

Illustrator의 20레이어 일러스트레이션: 94KB → 31KB (67% 감소). Illustrator는 XML 네임스페이스 선언과 레이어 메타데이터를 많이 추가합니다.

수동으로 작성한 SVG: 3.1KB → 2.9KB (6% 감소). 직접 작성하거나 프로그래밍 방식으로 생성한 SVG는 이미 간결합니다. 최적화 도구가 주로 하는 일은 소수점 반올림입니다.

디자인 에이전시 파일의 로고: 22KB → 9KB (59% 감소). 전형적인 사례 — 디자인팀이 "웹용"으로 내보냈지만 최적화는 하지 않은 경우입니다.

패턴이 꽤 일관적입니다: GUI 에디터가 더 많이 관여할수록 제거할 것도 더 많습니다.

SVGO CLI와의 비교

SVGO (SVG Optimizer)는 SVG 최적화의 표준 커맨드라인 도구입니다. 브라우저 기반 도구와 SVGO는 비슷한 작업을 합니다 — 에디터 메타데이터 제거, 주석 삭제, 숫자 반올림, 중복 요소 합치기.

SVGO CLI가 더 나은 경우:

자동화: webpack/vite/rollup 빌드 파이프라인에 통합 가능. 저장 시 자동 최적화. 폴더 전체 배치 처리.
설정 가능성: svgo.config.js 파일로 개별 플러그인 활성화/비활성화, 정밀도 설정, 특정 속성 보존.
더 많은 플러그인: 속성 정렬, 도형을 경로로 변환, 스타일 인라인화 등 수십 가지 플러그인.
재현성: 같은 설정, 같은 결과, 항상.

브라우저 도구가 더 나은 경우:

설정 불필요: Node.js, npm, 설정 파일 없음.
시각적 미리보기: 결과를 보고 나서 반영 여부 결정.
빠른 단발성 작업: 브라우저 열고, 붙여넣고, 결과 복사하면 끝.
비개발자도 사용 가능: 디자이너가 터미널 없이 사용할 수 있습니다.

개인적인 워크플로우를 공유하자면: 프로젝트 아이콘에는 빌드 파이프라인에 SVGO를 사용하고, 디자이너가 SVG를 보내줬을 때 그냥 사용해도 될 만한지 빠르게 확인할 때는 브라우저 도구를 사용합니다.

최적화할 때 흔히 저지르는 실수들

시각적 결과를 확인하지 않는 것. 공격적인 반올림은 복잡한 경로를 간혹 변형시킬 수 있습니다. 미리보기를 꼭 확인하세요 — 특히 폰트 아웃라인이나 기술적인 다이어그램처럼 매우 정밀한 SVG의 경우.

백업 없이 원본에 덮어쓰기. 최적화 도구는 원본을 보관하지 않습니다. 소스 파일(Inkscape/Illustrator)을 보관하거나, 최소한 최적화 전 SVG를 버전 관리에 저장해두세요.

이미 최적화된 SVG를 다시 최적화하기. 대부분 무해하지만 경로 데이터 정밀도가 두 번 반올림되는 문제가 가끔 발생합니다.

사용되지 않는다고 생각한 ID 제거하기. 먼저 검색해보세요. grep -r "my-id" ./src 는 2초면 되고 2시간짜리 디버깅을 막을 수 있습니다.

모든 SVG가 같다고 가정하기. 인라인 SVG, 이미지 태그 SVG, 백그라운드 SVG, 스프라이트 시트는 각각 다른 제약이 있습니다. <img> 태그 아이콘에는 안전한 최적화가 CSS가 타겟팅하는 인라인 SVG를 망가뜨릴 수 있습니다.