SVG 파일은 가벼워야 합니다. 픽셀이 아닌 수학적 지시로 그림을 저장하므로 작은 용량을 유지해야 합니다. 그러나 디자인 도구에서 내보낸 많은 SVG 파일은 메타데이터, 에디터 주석, 중복 패스 데이터, 그리고 보이는 그래픽에 기여하지 않으면서 킬로바이트를 추가하는 인라인 스타일로 부풀어 있습니다. SVG 최적화는 시각적 변화 없이 파일 크기를 30~70% 줄일 수 있어 더 빠른 페이지 로드와 낮은 대역폭 비용을 의미합니다.
SVG 파일이 큰 이유
Adobe Illustrator, Figma, Inkscape, 또는 Sketch 같은 도구에서 SVG를 내보낼 때 출력 파일에는 그리기 지시 이상의 내용이 포함됩니다. 불필요한 부풀림의 일반적인 원인은 다음과 같습니다:
에디터 메타데이터 — 디자인 도구는 소프트웨어 이름과 버전, 생성 날짜, 여러 단위 시스템의 문서 치수, 때로는 전체 편집 기록 등의 정보를 파일에 포함시킵니다. 이 데이터는 뷰어에게 완전히 보이지 않으며 배포된 파일에서 어떤 목적도 없습니다.
중복 속성 — 도구는 종종 스타일 정보를 인라인 속성과 별도의 CSS 클래스 모두로 출력하여 중복을 만듭니다. 명시적으로 명시할 필요가 없는 기본값도 일반적으로 포함됩니다.
과도하게 단순화되거나 너무 상세한 패스 — Illustrator와 유사한 도구는 때로 도형을 정확하게 설명하는 데 필요한 것보다 더 많은 제어점을 가진 패스 데이터를 생성합니다. 반대로 스캔이나 사진에서 자동 추적된 이미지는 시각적 변화 없이 단순화할 수 있는 과도한 디테일의 패스 데이터를 생성합니다.
미사용 정의 — 편집 중에 생성되었지만 최종 아트워크에서 제거된 그라데이션, 필터, 마스크, 심볼은 파일의 defs 섹션에 여전히 참조될 수 있습니다.
주석 및 처리 지시 — 도구별 XML 주석과 처리 지시는 수백 바이트를 차지할 수 있습니다.
SVGO: 표준 커맨드라인 최적화 도구
SVGO(SVG Optimizer)는 자동화된 SVG 최적화를 위해 가장 널리 사용되는 도구입니다. 파일 크기를 줄이기 위해 구성 가능한 변환 세트를 적용하는 Node.js 커맨드라인 도구입니다. 대부분의 온라인 SVG 최적화 도구는 내부적으로 SVGO를 사용합니다.
SVGO의 기본 구성은 대부분의 일반적인 최적화를 처리합니다: 에디터 메타데이터 제거, 그룹 축소, 색상을 더 짧은 16진수 코드로 변환, 주석 제거, 중복 패스 병합 등. 디자인 도구에서 내보낸 대부분의 SVG의 경우 기본 설정은 시각적 품질 변화 없이 파일 크기를 30~50% 줄입니다.
일부 변환은 더 공격적이며 외관에 영향을 미칠 수 있습니다. viewBox 제거나 패스를 공격적으로 병합하면 애니메이션이나 대화형 SVG가 손상될 수 있습니다. 배포 전에 항상 최적화된 파일을 시각적으로 비교하세요.
SVG 최적화에 Inkscape 사용하기
Inkscape는 "문서 정리" 기능과 "최적화된 SVG로 저장" 내보내기 옵션을 포함하는 무료 오픈소스 벡터 그래픽 편집기입니다. Inkscape의 최적화된 SVG 내보내기는 SVGO가 제거하는 것과 동일한 많은 메타데이터를 제거합니다.
Inkscape는 SVG를 최적화하기 전에 시각적으로 검사하고 수동으로 조정해야 할 때 특히 유용합니다. 특정 레이어를 제거하고, 노드 편집기를 사용하여 대화형으로 패스를 단순화한 다음, 정리된 결과를 내보낼 수 있습니다. 시각적 제어가 필요한 일회성 파일의 경우 Inkscape가 좋은 선택입니다.
수동 정리 팁
SVG는 일반 텍스트(XML)이므로 텍스트 편집기에서 열어 직접 부풀림을 제거할 수 있습니다. 효과적인 수동 정리 단계는 다음과 같습니다:
에디터 네임스페이스 제거 — 파일 상단에서 xmlns:inkscape, xmlns:sodipodi, 또는 xmlns:illustrator와 같은 네임스페이스 선언을 찾으세요. 이러한 네임스페이스를 사용하는 모든 요소와 속성과 함께 제거하세요.
주석 제거 — <!-- -->로 묶인 XML 주석은 렌더링에 기여하지 않으면서 크기를 추가합니다. 모두 삭제하세요.
패스 데이터 단순화 — d="M 42.382731,10.54827"와 같이 소수점 6자리를 가진 패스 좌표는 일반적인 디스플레이 크기에서 시각적 변화 없이 소수점 2자리로 반올림할 수 있습니다.
미사용 defs 제거 — 파일의 다른 곳에서 참조되지 않는 그라데이션, 필터, 또는 심볼이 있는지 <defs> 섹션을 확인하세요.
스타일 통합 — 스타일이 인라인 style 속성과 <style> 블록 사이에 분산되어 있다면 하나의 접근 방식을 선택하고 중복 선언을 제거하세요.
웹에서 SVG를 위한 Gzip 및 Brotli 압축
SVG는 텍스트이며 gzip 또는 Brotli로 매우 잘 압축됩니다. 웹 서버가 압축 응답을 보낸다면 100KB SVG 파일이 전송 중에 15~25KB로 압축될 수 있습니다. 이것은 위에서 다룬 파일 크기 최적화와 별개로 두 가지 모두의 이점을 얻을 수 있습니다.
서버가 SVG 파일을 gzip 또는 Brotli 인코딩으로 제공하도록 구성되어 있는지 확인하세요. 대부분의 호스팅 환경에서는 기본적으로 활성화되어 있지만, 응답에 Content-Encoding: gzip 또는 Content-Encoding: br 헤더가 포함되어 있는지 브라우저의 네트워크 패널에서 확인할 가치가 있습니다.
SVG가 올바른 형식인 경우
SVG가 모든 이미지에 적합한 형식은 아닙니다. 특정 사용 사례에서 뛰어납니다:
SVG 사용 권장 대상: 로고, 아이콘, 일러스트레이션, 차트, 다이어그램, 기하학적 도형, 선, 플랫 또는 그라데이션 색상으로 구성된 모든 아트워크. SVG는 품질 손실 없이 무한히 확장되어 동일한 이미지가 여러 크기로 나타나는 반응형 웹 디자인에 이상적입니다.
래스터 형식(JPEG, WebP, PNG) 사용 권장 대상: 사진, 사진적 복잡성을 가진 상세한 일러스트레이션, 수백만 가지 색상과 세밀한 질감이 있는 이미지. SVG로 저장된 사진은 픽셀 데이터를 근사하기 위해 수천 개의 작은 패스 요소가 필요하여 방대하고 느린 렌더링 파일이 됩니다.
아이콘의 경우 특히 HTML의 인라인 코드로서 SVG가 종종 최선의 접근 방식입니다. HTTP 요청을 완전히 제거하고, CSS 스타일링과 애니메이션이 가능하며, 브라우저가 어떤 크기에서도 선명하게 렌더링합니다.
필요할 때 SVG를 래스터 형식으로 변환하기
소셜 미디어 프로필 사진, 이메일 서명, 또는 SVG 업로드를 지원하지 않는 플랫폼을 위해 SVG의 래스터 버전이 필요한 경우가 있습니다. SVG를 PNG 또는 JPEG로 변환하면 충분한 해상도로 렌더링하는 한 품질이 유지됩니다.
여러 크기로 나타나야 하는 로고의 경우 가장 큰 크기(예: 너비 1200 픽셀)로 SVG를 렌더링하고 그것을 PNG로 저장하세요. 그런 다음 웹 사용을 위해 PNG를 압축하세요.