SVG 파일 최적화로 웹 성능을 향상시키는 10가지 방법
최적화되지 않은 SVG는 PNG보다 클 수 있습니다. SVGO와 GZIP 압축 등 실용적인 기법으로 파일 크기를 50~80% 줄이고 Core Web Vitals 점수를 개선하는 방법을 알아보세요.
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Key Takeaways
- 최적화되지 않은 SVG는 PNG보다 클 수 있습니다 — 적절한 최적화로 평균 50~80% 파일 크기 감소
- 먼저 에디터 메타데이터 제거: Illustrator와 Figma 같은 도구에서 발생하는 40~60%의 불필요한 데이터 제거
-
SVGO는 업계 표준 최적화 도구 — CLI(
npx svgo) 또는 SVGOMG 웹 인터페이스로 실행 - 서버에서 SVG GZIP 압축 활성화: 12KB SVG가 3.2KB로 압축
- 최적화된 SVG는 Core Web Vitals를 직접 개선: LCP, FID, CLS 점수 모두 향상
SVG 최적화가 중요한 이유
최적화되지 않은 SVG는 PNG보다 클 수 있습니다. 500KB SVG는 벡터를 사용하는 의미가 없습니다. 적절한 최적화로 파일 크기를 50~80% 줄일 수 있습니다.
성능에 미치는 실제 영향
| 지표 | 최적화 전 | 최적화 후 | 개선율 |
|---|---|---|---|
| 파일 크기 | 45 KB | 8 KB | 82% 감소 |
| 파싱 시간 | 120ms | 25ms | 79% 향상 |
| LCP 영향 | +0.3초 | +0.05초 | 83% 개선 |
SVG 최적화 체크리스트
1. 에디터 메타데이터 제거
디자인 도구는 불필요한 데이터를 추가합니다:
최적화 전 (Illustrator 내보내기):
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.0, SVG Export -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
viewBox="0 0 100 100"
style="enable-background:new 0 0 100 100;"
xml:space="preserve">최적화 후:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">절약 효과: 메타데이터만으로 40~60%
2. 경로 단순화
소수점 정밀도 줄이기:
최적화 전:
<path d="M12.3456789,45.6789012 L67.8901234,12.3456789"/>최적화 후:
<path d="M12.35,45.68 L67.89,12.35"/>절약 효과: 20~40%
Pro Tip: SVGO의 cleanupNumericValues 정밀도는 아이콘과 UI 요소에 소수점 2자리로 설정하세요. 정확도가 중요한 상세 일러스트레이션이나 지도에는 3~4자리를 사용합니다. 일반적인 아이콘 크기에서 2자리의 시각적 차이는 거의 구분할 수 없습니다.
3. 경로 병합
유사한 경로 결합:
최적화 전:
<path d="M0,0 L10,0" fill="#000"/>
<path d="M10,0 L20,0" fill="#000"/>
<path d="M20,0 L30,0" fill="#000"/>최적화 후:
<path d="M0,0 L30,0" fill="#000"/>절약 효과: 50~70%
4. 속성 대신 CSS 사용
최적화 전:
<circle cx="50" cy="50" r="40" fill="#1cb721" stroke="#000" stroke-width="2"/>최적화 후:
<style>.c{fill:#1cb721;stroke:#000;stroke-width:2}</style>
<circle cx="50" cy="50" r="40" class="c"/>절약 효과: 10~30% (반복 요소가 많을수록 효과 증가)
5. 숨겨진 요소 제거
보이지 않는 모든 것 삭제:
- viewBox 밖의 요소
- 완전히 투명한 도형
- 빈 그룹
- 사용하지 않는 정의
최고의 SVG 최적화 도구 4선
1. SVGO (종합 최고)
커맨드라인 도구, 가장 유연한 설정:
npx svgo input.svg -o output.svg일반적인 절약률: 50~80%
2. SVGOMG (웹 인터페이스)
시각적 미리보기가 포함된 SVGO 온라인 버전:
- jakearchibald.github.io/svgomg/
3. ImageOptim (Mac)
드래그 앤 드롭으로 최적화:
- SVG, PNG, JPG 처리
- 무손실 압축
4. VectoSolve (변환 시 최적화)
VectoSolve에서 생성되는 SVG는 사전 최적화:
- 깨끗한 경로
- 최소한의 코드
- 메타데이터 없음
A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual Deal최대 절약을 위한 SVGO 설정
// svgo.config.js
module.exports = {
plugins: [
'removeDoctype',
'removeXMLProcInst',
'removeComments',
'removeMetadata',
'removeEditorsNSData',
'cleanupAttrs',
'mergeStyles',
'inlineStyles',
'minifyStyles',
'cleanupIds',
'removeUselessDefs',
'cleanupNumericValues',
'convertColors',
'removeUnknownsAndDefaults',
'removeNonInheritableGroupAttrs',
'removeUselessStrokeAndFill',
'cleanupEnableBackground',
'removeHiddenElems',
'removeEmptyText',
'convertShapeToPath',
'convertEllipseToCircle',
'moveGroupAttrsToElems',
'collapseGroups',
'convertPathData',
'convertTransform',
'removeEmptyAttrs',
'removeEmptyContainers',
'mergePaths',
'removeUnusedNS',
'sortDefsChildren',
'removeTitle',
'removeDesc'
]
};"가장 빠른 SVG는 작은 SVG입니다. 최적화는 선택이 아닙니다 — 빠른 인터페이스와 느린 인터페이스의 차이 그 자체입니다.
최적화 전후 비교
로고 최적화
| 단계 | 크기 | 감소율 |
|---|---|---|
| 원본 (Illustrator) | 125 KB | - |
| 메타데이터 제거 | 52 KB | 58% |
| 경로 단순화 | 28 KB | 78% |
| 경로 병합 | 18 KB | 86% |
| 최종 (SVGO) | 12 KB | 90% |
아이콘 세트 (50개 아이콘)
| 단계 | 전체 크기 |
|---|---|
| 원본 | 450 KB |
| 최적화 후 | 85 KB |
| 절약률 | 81% |
고급 기법
1. 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>
<svg><use href="#icon-home"/></svg>장점:
- 단일 HTTP 요청
- 브라우저 캐싱
- 전체 크기 감소
2. GZIP 압축
SVG는 매우 높은 압축률 달성:
| 파일 | 원본 | Gzip 후 |
|---|---|---|
| Logo.svg | 12 KB | 3.2 KB |
| Icons.svg | 85 KB | 18 KB |
서버 설정:
gzip on;
gzip_types image/svg+xml;SVG 파일은 XML 기반 텍스트이므로 GZIP 압축에 최적입니다. 대부분의 SVG는 GZIP 후 추가로 60~75% 감소합니다. 서버가 아직 SVG 압축을 지원하지 않는다면, 이것이 가장 효과적인 개선 방법입니다.
3. 지연 로딩
스크롤 아래 SVG에 적용:
<img src="illustration.svg" loading="lazy" alt="...">Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG FreeCore Web Vitals에 미치는 영향
최적화된 SVG는 다음을 직접 개선합니다:
LCP (Largest Contentful Paint)
- 파일이 작을수록 = 로딩 속도 향상
- 목표: 2.5초 미만
FID (First Input Delay)
- 파싱 양 감소 = 더 빠른 상호작용
- 목표: 100ms 미만
CLS (Cumulative Layout Shift)
- viewBox가 있는 SVG = 안정적인 크기
- 목표: 0.1 미만
결론
SVG 최적화는 웹 성능에 필수입니다. 몇 분의 최적화 작업으로 파일 크기를 80% 줄이고 Core Web Vitals 점수를 크게 개선할 수 있습니다.
빠른 개선 방법:
- 모든 SVG를 SVGO로 처리
- 서버에서 GZIP 활성화
- 아이콘에 SVG 스프라이트 사용
- VectoSolve로 사전 최적화된 변환 활용
최적화를 시작하세요: VectoSolve로 이미지를 변환하고 최적화하여 즉시 웹에서 사용할 수 있는 SVG를 만드세요.
| 최적화 기법 | 평균 크기 감소 | Core Web Vitals 영향 | 난이도 |
|---|---|---|---|
| 에디터 메타데이터 제거 | 40~60% | LCP 개선 | 쉬움 (자동화 가능) |
| 튜닝된 SVGO 설정 | 전체 50~80% | LCP + CLS 개선 | 쉬움 (CLI 도구) |
| 경로 단순화 및 도형 병합 | 15~30% | FCP 개선 | 보통 |
| 인라인 스타일 대신 CSS | 10~20% | FCP 개선 | 보통 |
| Gzip/Brotli 압축 | 전송 시 60~70% | TTFB 개선 | 쉬움 (서버 설정) |
참고 자료
- web.dev — Core Web Vitals를 위한 SVG 최적화를 포함한 Google의 웹 성능 공식 가이드
- W3C SVG 2 사양 — 최적화 준수를 위한 유효한 SVG 구조를 정의하는 공식 사양
- MDN Web Docs — SVG — 최적화 관련 SVG 요소 및 속성 기술 참조
- CSS-Tricks: Using SVG — 실용적인 최적화 워크플로 및 SVGO 설정 가이드
- Smashing Magazine — SVG 성능 감사 및 실제 최적화 사례 연구 심층 분석 기사