liminfoSVG Optimizer
SVG 메타데이터 제거/경로 간소화/크기 최적화
SVG Optimizer 소개
SVG 최적화 도구는 디자인 툴이 남긴 불필요한 마크업을 제거해 SVG 파일 크기를 줄이는 무료 브라우저 기반 도구입니다. XML 선언, HTML 주석, 메타데이터 블록, Inkscape 및 Adobe Illustrator 전용 네임스페이스, 빈 그룹 요소, title/desc 태그, 불필요한 공백을 제거합니다. 이 요소들은 렌더링된 이미지에는 아무 영향을 주지 않으면서 파일 크기만 늘립니다.
프론트엔드 개발자, UI/UX 디자이너, 성능 엔지니어들은 SVG 최적화를 에셋 파이프라인의 일상적인 단계로 활용합니다. SVG가 작을수록 페이지 로드가 빠르고 대역폭 비용이 절감되며 버전 관리 diff가 깔끔해집니다. 또한 부동소수점 좌표를 소수점 2자리로 단축(예: 123.456789 → 123.46)하는데, 이는 복잡한 패스 데이터를 가진 일러스트에서 가장 큰 단일 바이트 절감 효과를 냅니다.
처리는 JavaScript 정규식 변환을 통해 완전히 클라이언트 사이드에서 이루어집니다. SVG 소스 코드는 서버로 전송되지 않습니다. 원본 바이트 크기, 최적화된 바이트 크기, 절감 퍼센트를 실시간으로 표시하므로 결과물이 목표치를 만족하는지 즉시 확인할 수 있습니다. 최적화된 코드는 신택스 하이라이팅된 코드 블록으로 표시되며 버튼 하나로 클립보드에 복사할 수 있습니다.
주요 기능
- HTTP로 제공되거나 인라인으로 사용되는 SVG에서 불필요한 XML 선언(`<?xml ... ?>`) 제거
- 디자인 툴이 생성하는 HTML 주석(`<!-- ... -->`)과 `<metadata>` 블록 삭제
- Inkscape 및 Sodipodi 네임스페이스 속성과 요소(inkscape:, sodipodi:, xmlns:inkscape 등) 제거
- Adobe Illustrator RDF 메타데이터(dc:, cc:, rdf: 네임스페이스 및 요소) 삭제
- 시각적 효과 없이 중첩만 추가하는 빈 `<g></g>` 그룹 요소 정리
- 패스 데이터의 부동소수점 좌표를 소수점 2자리로 단축하여 파일 크기 절감
- 편집기가 남긴 빈 `style=""` 및 `class=""` 속성 제거
- 원본 크기, 최적화 크기, 절감 퍼센트를 실시간 통계 패널에 표시
자주 묻는 질문
SVG 최적화 도구가 실제로 무엇을 제거하나요?
XML 처리 명령, HTML 주석, 메타데이터 블록, Inkscape/Sodipodi 편집기 네임스페이스와 요소, Adobe Illustrator RDF 데이터, 빈 그룹 태그, title/desc 요소, 빈 style 및 class 속성을 제거하고 부동소수점 숫자를 소수점 2자리로 줄입니다. 또한 연속된 빈 줄을 하나로 합칩니다.
최적화된 SVG가 원본과 다르게 보이지 않나요?
아니요. 제거되는 내용(선언, 주석, 메타데이터, 편집기 전용 네임스페이스, 빈 그룹)은 렌더링된 SVG에 시각적인 영향을 주지 않습니다. 소수점 정밀도를 2자리로 줄이면 픽셀 단위 미만의 차이가 발생하지만 일반적인 렌더링 환경에서 눈으로는 구별할 수 없습니다.
파일 크기가 얼마나 줄어드나요?
소스에 따라 크게 다릅니다. Inkscape나 Adobe Illustrator에서 내보낸 SVG는 보이지 않는 편집기 메타데이터 수 킬로바이트를 포함하는 경우가 많습니다. 직접 작성한 SVG는 10% 정도, 벡터 디자인 툴에서 내보낸 파일은 50~70%까지 절감되는 경우도 있습니다.
SVGO만큼 강력한가요?
이 도구는 SVGO 기능의 실용적인 부분집합으로, 가장 일반적인 비대화 원인(편집기 메타데이터, 주석, 빈 요소, 소수점 정밀도)을 처리합니다. SVGO는 추가로 패스 병합, 변환 축소, 구조적 최적화를 수행합니다. 프로덕션 파이프라인에는 npm의 SVGO를 권장하며, 이 도구는 브라우저에서 빠르게 일회성 최적화를 할 때 이상적입니다.
인라인 SVG와 독립 파일 모두 처리할 수 있나요?
네. 최적화 도구는 독립 .svg 파일에서 왔든 HTML 내의 인라인 `<svg>` 블록에서 왔든 원시 SVG 마크업을 처리합니다. 텍스트 영역에 SVG 코드를 붙여넣으면 즉시 최적화된 버전이 표시됩니다.
접근성을 위해 `<title>`을 사용하는 SVG는 어떻게 되나요?
최적화 도구는 정리 과정에서 `<title>` 및 `<desc>` 요소를 제거합니다. SVG가 이 요소들로 접근성 정보를 제공하는 경우, 최적화 후 다시 추가하거나 특정 플러그인을 비활성화할 수 있는 SVGO를 사용하는 것이 좋습니다.
최적화를 취소할 수 있나요?
원본 SVG는 입력 텍스트 영역에 그대로 보존됩니다. 최적화된 출력은 별도의 읽기 전용 코드 블록에 표시됩니다. 언제든지 입력을 수정하여 복원할 수 있으며, 서버에는 아무것도 저장되지 않습니다.
절감률이 0%로 표시되는 이유는 무엇인가요?
제거할 수 있는 콘텐츠가 SVG에 없는 경우(예: 편집기 메타데이터 없이 직접 작성된 SVG), 출력이 입력과 거의 동일하고 절감 퍼센트는 0% 또는 그에 가까운 값이 됩니다. 깔끔하고 최소한의 SVG에서는 예상된 동작입니다.