SVG 최적화기

SVGO를 사용하여 SVG 파일을 압축합니다. 메타데이터, 주석 및 중복 코드 제거 — 모두 브라우저에서.

Bulk SVG Optimization — Pro

Optimize up to 50 SVG files at once and download as a ZIP.

대량 처리 — Pro 기능

Pro를 사용하여 한 번에 최대 50개의 파일을 처리하세요. 반복 작업에 드는 시간을 절약하세요.

적용된 SVGO 최적화 플러그인

플러그인	기능
removeComments	Removes XML and SVG comments
removeMetadata	Removes <metadata> blocks added by design tools
cleanupAttrs	Cleans up attribute formatting and whitespace
minifyStyles	Minifies inline CSS style attributes
cleanupIds	Removes unused IDs and shortens referenced ones
convertColors	Converts colors to shorter hex notation
convertPathData	Optimises path data commands and coordinates
mergePaths	Merges adjacent paths with identical styles
collapseGroups	Collapses unnecessary group elements
removeUselessDefs	Removes <defs> with no referenced elements

SVG 파일 크기 팁

1.Export SVGs from Figma or Illustrator using "optimised" export presets to reduce work for the optimizer.
2.Avoid embedding raster images (PNG/JPEG) inside SVG files — use proper image formats for photographic content.
3.Use CSS classes instead of inline styles when the same style appears on multiple elements.
4.Round coordinates to 1–2 decimal places manually if precision is not critical — this reduces path data size significantly.
5.For icons used in many places, consider SVG sprites or symbol definitions to avoid repeating identical paths.

SVG 최적화기 FAQ

SVG 최적화는 무엇을 하나요?

SVG 최적화는 SVG 파일에서 불필요한 콘텐츠를 제거합니다: 편집기 메타데이터, 주석, 숨겨진 요소, 기본 속성 값 및 중복 공백. 경로를 병합하고, 도형을 더 짧은 등가물로 변환하며, 소수점 좌표를 반올림합니다. 결과는 동일하게 렌더링되는 더 작고 깔끔한 SVG입니다.

SVG 파일을 얼마나 압축할 수 있나요?

절약 크기는 SVG가 어떻게 생성되었는지에 따라 크게 다릅니다. Illustrator 또는 Inkscape에서 내보낸 경우: 50-80% 감소. 수동으로 최적화된 SVG: 10-30%. Figma 같은 디자인 도구의 SVG는 이미 다소 깔끔합니다: 20-50%. 이 도구는 정확한 바이트 절약량을 보여줍니다.

최적화하면 SVG 모양이 바뀌나요?

기본 설정으로 최적화는 무손실입니다 — 최적화된 SVG는 원본과 동일하게 렌더링됩니다. viewBox 제거나 스타일 병합과 같은 공격적인 옵션은 스케일링이나 외부 스타일링에 영향을 줄 수 있습니다. 이 도구는 안전한 기본 SVGO 프리셋을 사용합니다.

최적화된 SVG를 HTML에 임베드할 수 있나요?

네. 최적화된 인라인 SVG를 HTML에 직접 붙여넣을 수 있습니다. img 태그나 CSS 배경에는 .svg 파일로 저장하세요. 매우 작은 아이콘의 경우 HTTP 요청을 없애기 위해 데이터 URI(예: url("data:image/svg+xml,..."))로 변환하는 것을 고려하세요.

적용된 SVGO 최적화 플러그인

플러그인	기능
removeComments	Removes XML and SVG comments
removeMetadata	Removes <metadata> blocks added by design tools
cleanupAttrs	Cleans up attribute formatting and whitespace
minifyStyles	Minifies inline CSS style attributes
cleanupIds	Removes unused IDs and shortens referenced ones
convertColors	Converts colors to shorter hex notation
convertPathData	Optimises path data commands and coordinates
mergePaths	Merges adjacent paths with identical styles
collapseGroups	Collapses unnecessary group elements
removeUselessDefs	Removes <defs> with no referenced elements

SVG 파일 크기 팁

1.Export SVGs from Figma or Illustrator using "optimised" export presets to reduce work for the optimizer.

2.Avoid embedding raster images (PNG/JPEG) inside SVG files — use proper image formats for photographic content.

3.Use CSS classes instead of inline styles when the same style appears on multiple elements.

4.Round coordinates to 1–2 decimal places manually if precision is not critical — this reduces path data size significantly.

5.For icons used in many places, consider SVG sprites or symbol definitions to avoid repeating identical paths.

SVG 최적화기

Bulk SVG Optimization — Pro

대량 처리 — Pro 기능

적용된 SVGO 최적화 플러그인

SVG 파일 크기 팁

SVG 최적화기 FAQ

SVG 최적화는 무엇을 하나요?

SVG 파일을 얼마나 압축할 수 있나요?

최적화하면 SVG 모양이 바뀌나요?

최적화된 SVG를 HTML에 임베드할 수 있나요?

Image tools

SVG 최적화기

Bulk SVG Optimization — Pro

대량 처리 — Pro 기능

적용된 SVGO 최적화 플러그인

SVG 파일 크기 팁

SVG 최적화기 FAQ

SVG 최적화는 무엇을 하나요?

SVG 파일을 얼마나 압축할 수 있나요?

최적화하면 SVG 모양이 바뀌나요?

최적화된 SVG를 HTML에 임베드할 수 있나요?