사용법
SVG(파일 경로가 아니라 `<svg>...</svg>` 블록 전체)를 붙여 넣으면 SVGO가 브라우저 안에서 기본 플러그인 체인을 실행합니다. 편집기 메타데이터(Figma·Illustrator·Sketch가 익스포트하는 `<sodipodi:...>`·`<inkscape:...>`·`<adobe-...>` 네임스페이스)를 제거하고, 좌표를 합리적인 정밀도로 반올림하며, 쓸모없는 그룹을 접고, 패스를 병합하고, 렌더링 결과를 픽셀 단위로 유지하면서 출력을 미니파이합니다. 나란히 미리보기로 원본과 최적화된 SVG, 그리고 바이트 차이가 표시됩니다. Figma의 전형적인 익스포트는 60~80% 축소되는 것이 보통입니다.
디자인 도구에서 아이콘이나 로고를 익스포트할 때마다 사용하세요. 익스포트되는 파일은 보통 필요한 크기의 5~10배입니다. 디자인 도구가 편집 가능성을 보존하는 쪽으로 기울기 때문입니다. 최적화된 SVG는 저장소에 커밋하거나, 스프라이트로 배포하거나, HTML에 인라인할 형태입니다. 최적화는 SVGO의 WASM 빌드로 브라우저 안에서 끝납니다 — 디자인 자산이 기기 밖으로 나가지 않으므로 비공개 로고나 미공개 아이코노그래피가 든 파일에도 안심하고 쓸 수 있습니다.
자주 묻는 질문
SVGO는 실제로 무엇을 제거하나요?
기본 플러그인 세트가 제거하는 것은 XML 주석, 편집기 고유 네임스페이스(`sodipodi:`·`inkscape:`·`adobe-`), 빈 `<defs>`·`<g>`, 사용되지 않는 ID, 중복된 `<filter>`·`<gradient>` 정의, 잉여 속성(어디로도 가지 않는 `xmlns:xlink` 등), 그리고 `viewBox`가 설정된 경우의 `width`·`height`입니다. 재작성으로는 숫자를 N자리(기본 3)로 반올림, `M...M`을 연쇄된 `M` 명령으로 합침, 절대 패스 명령을 더 짧아질 때 상대로 변환, 패스 데이터 미니파이 등이 있습니다. 전체 목록은 SVGO의 `default-preset`(이름은 `preset-default`)에 있고 약 30개 플러그인으로 개별 설정 가능합니다.
최적화된 SVG가 브라우저와 Figma에서 다르게 보이는 이유는?
원인이 몇 가지 있습니다. **Figma는 추가 요소를 그립니다** — 가이드, 숨겨진 레이어, 캔버스 배경 같은 익스포트된 SVG에는 없는 것들입니다. 따라서 "Figma에서의 모습"과 "익스포트 후의 모습"은 원본 SVG에서도 다를 수 있습니다. **CSS에서의 상속** — 브라우저는 인라인 SVG에 `currentColor`·`fill: var(...)`·외부 폰트 패밀리를 캐스케이드하지만 Figma는 SVG 안에 박힌 값을 사용합니다. 최적화 후 Figma 안에서는 잉여였지만 브라우저에서는 필요했던 `fill` 속성이 제거되면 아이콘이 검은색으로 표시될 수 있습니다. 채움을 되돌리거나 색상을 상속받는 아이콘에는 `currentColor`를 사용하세요.
인라인 SVG·`<img src="...">`·스프라이트 — 어느 것을 써야 하나요?
**인라인**(HTML·JSX에 SVG를 직접 붙임)은 CSS로 스타일링하거나 애니메이션할 때 적합합니다 — `currentColor`로 색상 제어, 호버 변형, 테마 전환 같은 것들입니다. **`<img src="icon.svg">`**는 동적 스타일링이 없는 정적 이미지로 다룰 때 적합합니다 — 단순하고, 브라우저가 페이지 전반에서 파일을 캐시하며, 현대 이미지 로딩 최적화(지연·디코딩)가 적용됩니다. **스프라이트**(`<symbol id="x">` + `<use href="#x">`)는 Lucide나 Heroicons 같은 큰 아이콘 라이브러리에서 30개 개별 파일을 읽는 것보다 하나로 합치는 편이 빠를 때 적합합니다 — 네트워크 요청 1회, 정의는 중복 제거됩니다. Vite·Webpack·Next.js에는 빌드 시점에 스프라이트를 조립하는 플러그인이 있습니다.
SVGO는 보통 파일을 얼마나 줄이나요?
소스에 크게 의존합니다. **Figma·Sketch·Illustrator 익스포트**: 60~80% 감소가 전형적입니다 — 이 도구들은 잉여 속성과 풀 편집 메타데이터를 출력합니다. **손으로 작성한 SVG**: 10~30% — 이미 간결합니다. **클립아트 컬렉션 출신의 옛 XML 풍 SVG**: 70~90% — 수십 년 쌓인 잡동사니가 붙어 있는 경우가 많기 때문입니다. 5KB 아이콘이 1KB로 줄어드는 것은 현실적이고 500KB 일러스트가 100KB가 되는 것도 현실적입니다. 서버의 gzip이 추가로 전송 바이트를 절반으로 줄여 주므로 최적화와 HTTP 압축은 잘 겹쳐 작용합니다.
SVGO가 무엇인가를 망가뜨릴 수 있나요?
예, 3가지 패턴이 있습니다. **요소 간 ID 참조**(`<use href="#foo">`나 CSS의 `#foo` 셀렉터)는 SVGO가 ID를 이름 바꾸거나 제거하면 깨집니다. 원인은 보통 `cleanupIds` 플러그인이며, 외부 참조에 관여하는 SVG에서는 비활성화하세요. **애니메이션**(`<animate>`이나 SMIL)이 특정 요소를 셀렉터로 지정한 경우 SVGO가 요소를 통합·재구성하면 실패합니다. **SVG로의 외부 CSS·JS 훅**(`<path data-name="logo">`를 찾는 스크립트 등)은 `data-*` 속성이 제거되면 깨집니다. 그런 경우에는 `removeUnknownsAndDefaults`를 비활성화하세요. 최적화는 기본적으로 보수적이지만 커밋 전에 반드시 결과를 미리 보세요.
아이콘에는 SVG·PNG·WebP 중 어느 것이 좋나요?
**SVG**는 단순한 형태의 아이콘에 적합합니다 — 임의 크기에서 선명하고, CSS로 테마화 가능하며, PNG보다 작은 경우가 많습니다. **PNG**는 복잡한 텍스처(스큐어모픽·사진 크롭)의 아이콘에 적합합니다. 벡터 표현으로는 파일이 부풀기 때문입니다. **WebP**는 아이콘에서는 드뭅니다 — PNG가 아이콘 크기에서 충분히 작고 WebP의 알파 채널 특이점(옛 Safari 등)을 관리할 가치가 없기 때문입니다. 현대의 아이콘 중심 디자인 시스템(Lucide·Heroicons·Material Symbols·Phosphor)은 SVG 전용입니다. 벡터 워크플로에 들어서면 파일 크기 논쟁은 결정적으로 SVG에 유리합니다.
관련 개념
SVG(Scalable Vector Graphics, 1999년 이후의 W3C 표준이며 현행은 2.0 후보 권고)는 XML 기반의 벡터 이미지 형식으로 픽셀 격자가 아닌 수학적 프리미티브(패스·원·사각형)로 형상을 기술합니다. 래스터에 대한 장점은 해상도 독립성으로, 같은 SVG를 16픽셀과 256픽셀로 렌더링할 수 있고 모든 크기에서 선명하게 유지됩니다. 대가는 파일 복잡성으로, 사진을 SVG로 표현하면(픽셀마다 작은 `<rect>`로) 방대해지므로 SVG는 단순 그래픽 용도(로고·아이콘·차트)를 지배하고 사진 용도에는 들어가지 않습니다.
**SVGO(SVG Optimizer)**는 SVG를 축소하는 사실상의 JavaScript 툴체인으로 2012년 Kir Belevich가 작성했고 현재는 npm의 `svgo`로 유지됩니다. 플러그인 파이프라인으로 동작하며, 각 플러그인이 SVG AST(`xml-parser` 풍 순회로 파싱)를 변환해 재출력합니다. 주목할 플러그인은 `removeComments`·`removeMetadata`·`cleanupIds`·`mergePaths`·`convertColors`(`#FFFFFF`을 `#FFF`나 `white`로)·`removeUselessStrokeAndFill` 등입니다. 기본 프리셋은 약 30개가 활성화되어 있고 프로젝트별로 커스터마이즈할 수 있습니다. SVGO는 빌드 도구에 통합된 단계로도 동작합니다 — `vite-plugin-svgr`·`@svgr/webpack`·아이콘 컴포넌트용 `next/dynamic` 등을 통해 커밋마다 자동으로 최적화가 이루어집니다.
SVG 워크플로를 형성하는 인접 개념이 3가지 있습니다. **`viewBox` vs `width`·`height`**: `viewBox`는 SVG 내부의 좌표계를 정하고 `width`·`height`는 표시 크기를 정합니다. `viewBox`만 있는 SVG는 컨테이너에 맞춰 스케일되고, 둘 다 있는 SVG는 고정됩니다. 다수의 아이콘 라이브러리는 `viewBox`를 두고 `width`·`height`를 생략해 CSS 소유자가 아이콘 크기를 결정하도록 합니다. **`currentColor`**: `fill="currentColor"`를 설정하면 SVG가 주변 텍스트 색을 상속해 테마화 가능한 아이콘이 됩니다. **SMIL 애니메이션**은 SVG 네이티브(`<animate>`·`<animateTransform>`)이지만 2015년 Chrome의 deprecation 추진으로 CSS 애니메이션과 Lottie로 옮겨 가는 흐름이 생겼고, 현재의 주요 브라우저에서도 동작하지만 작성되는 일은 드뭅니다. 복잡한 애니메이션 일러스트에는 Lottie(JSON 기반, After Effects의 Bodymovin 익스포트)가 주류이고 SVG는 정적 및 CSS 애니메이션 경우를 담당합니다.
