SVG 최적화 도구
정화됨SVG 파일을 최적화하고 정리합니다.
- 아이콘 워크플로
Input bytes
0
Output bytes
0
Colors
0
ViewBox
—
Colors
fill/stroke/stop-color
Preview an SVG to extract colors.
Preview
No preview yet.
Output SVG
Sanitization
SVG can execute scripts or load external resources. This tool sanitizes the markup before preview and removes risky elements/attributes.
- Removes
<script>,<foreignObject>, and event handler attributes (on*). - Strips external
href/xlink:hrefunless it’s an internal#idreference.
SVG란 무엇인가요?
SVG(Scalable Vector Graphics)는 상호작용과 애니메이션을 지원하는 2차원 그래픽을 위한 XML 기반 벡터 이미지 형식입니다. JPEG나 PNG 같은 래스터 형식과 달리 SVG는 수학적 경로로 정의되므로 품질 손실 없이 어떤 크기로도 확대할 수 있습니다. 덕분에 로고, 아이콘, 일러스트에 이상적이며, 모바일 화면부터 고해상도 데스크톱 모니터까지 선명하게 유지됩니다.
이 도구 사용 방법
왼쪽의 SVG 입력 텍스트 영역에 SVG 코드를 붙여넣으세요. 미리보기를 클릭해 그래픽을 확인하고 색상 팔레트를 추출하세요. 최적화 또는 축소 버튼을 사용해 마크업을 정리하고 파일 크기를 줄이세요. 선택적으로 색상 패널에 새 값을 입력하고 적용을 클릭해 특정 색상을 바꾸세요. 복사 또는 다운로드를 클릭해 정제되고 최적화된 SVG를 저장하세요.
일반적인 사용 사례
Figma나 Illustrator 같은 디자인 도구에서 내보낸 SVG를 정리하는 아이콘 관리. 브랜드 팔레트에 맞게 아이콘 세트의 색상을 빠르게 변경하는 테마 설정. 신뢰할 수 없는 출처의 SVG에서 잠재적 스크립트나 외부 참조를 제거하는 보안. 인라인 그래픽의 크기를 줄이고 페이지 로드 시간을 개선하기 위해 SVG 마크업을 축소하는 성능 최적화.
프로 팁
currentColor 버튼을 사용해 명시적인 fill과 stroke를 모두 currentColor로 변환하면 CSS로 SVG 스타일을 쉽게 지정할 수 있습니다. 프로덕션에서 사용하기 전에 항상 SVG를 최적화하여 가능한 한 작게 만드세요. 디자인 도구에서 SVG를 만들 때는 최적화 전에 윤곽선(Outline Stroke)과 경로 단순화(Simplify Path) 기능을 사용해 생성된 코드의 복잡도를 줄이세요.