SVG 최적화
SVGO로 SVG 파일 용량을 줄이세요. 메타데이터와 불필요한 코드를 제거하고, 정밀도를 조절하고, ID와 viewBox를 유지하며 전후를 비교합니다.
브라우저에서 로컬로 처리됩니다. 파일은 업로드되지 않습니다.
도구 소개
디자인 도구에서 내보낸 SVG 파일에는 편집기 메타데이터, 주석, 기본값, 지나치게 정밀한 숫자가 포함된 경우가 많습니다. 이 도구는 표준 SVG 최적화 도구인 SVGO를 브라우저에서 실행하여 전후 크기를 보여 주고, 두 버전의 시각적 미리보기도 함께 표시하므로 달라진 것이 없는지 확인할 수 있습니다.
옵션은 실제로 중요한 선택 위주로 구성되어 있습니다. 이미지가 계속 확대·축소되도록 viewBox 유지, CSS나 JavaScript가 참조하는 id와 class 이름 유지, 메타데이터·주석·제목 제거, 경로가 유지할 소수 자릿수 선택, 스크립트 제거를 설정할 수 있습니다. 파일이 이미 최소 상태이면 용량을 줄인 것처럼 꾸미지 않고 그대로 알려 드립니다.
미리보기는 이미지 요소를 통해 렌더링되므로 SVG 안의 스크립트가 이 페이지에서 실행되지 않으며 코드는 텍스트로 표시됩니다. SVG에 스크립트, 이벤트 핸들러, foreignObject, 외부 참조가 있으면 경고가 표시됩니다. 아무것도 업로드되지 않습니다.
사용 방법
- 1SVG 파일을 추가하세요.
- 2스크립트나 외부 참조에 대한 경고가 있다면 확인하세요.
- 3옵션을 조정하세요. 결과는 자동으로 업데이트됩니다.
- 4전후의 크기와 미리보기를 비교하세요.
- 5최적화된 코드를 복사하거나 .min.svg 파일을 다운로드하세요.
지원 형식
입력 및 출력: SVG(.svg).
프라이버시
이 도구는 브라우저에서 실행됩니다. 입력하신 데이터는 사용자의 기기에서 처리되며 당사 서버로 전송되지 않습니다.
제한 사항
- 정밀도를 낮추면 파일이 작아지지만 세밀한 부분이 눈에 띄게 왜곡될 수 있습니다. 결과를 사용하기 전에 미리보기를 비교하세요.
- ID나 class를 제거하면 CSS, JavaScript 또는 <use> 참조가 깨질 수 있습니다. 이에 의존한다면 ID 유지를 켜세요.
- viewBox를 제거하면 이미지가 컨테이너에 맞춰 확대·축소되지 않습니다. 기본적으로 유지됩니다.
- 이미 최적화된 파일은 전혀 줄어들지 않을 수 있으며, 드물게 약간 커지는 경우도 있습니다.
- SVG 이미지만 지원하며, SVG 안에 포함된 래스터 이미지는 다시 압축되지 않습니다.
FAQ
최적화는 무손실인가요?
기본 설정에서는 이미지가 동일하게 보여야 합니다. 정밀도를 낮추거나, 경로를 병합하거나, 제목을 제거하면 파일 내용이 바뀌므로 항상 미리보기를 비교하세요.
SVG가 왜 작아지지 않았나요?
이미 압축되어 있을 수 있습니다. 소수 자릿수를 줄이거나, 필요하지 않다면 제목과 메타데이터를 제거해 보세요.
스크립트가 있는 SVG 파일을 열어도 안전한가요?
미리보기는 스크립트를 실행하지 않는 이미지 요소를 사용하며 코드는 텍스트로 표시됩니다. 그래도 신뢰할 수 없는 출처의 SVG를 직접 만든 페이지에 인라인으로 삽입하지는 마세요. 스크립트 제거를 켜면 스크립트가 제거됩니다.
ID 유지는 무엇을 하나요?
SVGO는 보통 사용되지 않는다고 판단한 ID를 줄이거나 제거합니다. ID를 유지하면 CSS, 애니메이션, <use> 참조에 필요한 연결 지점이 보존됩니다.
관련 도구
파비콘 생성기
이미지 한 장으로 favicon.ico, PNG 크기별 파일, Apple 터치 아이콘, Android 아이콘, 웹 매니페스트, HTML 태그까지 파비콘 패키지를 만드세요.
색상 팔레트 생성기
기준 색상에서 색상 조화를 만들고, 마음에 드는 색을 고정하고, WCAG 대비를 확인한 뒤 CSS, Tailwind, JSON, PNG로 내보내세요.
OG 이미지 생성기
제목, 로고, 배경으로 1200x630 소셜 공유 이미지를 디자인하고 PNG로 다운로드하세요. 모든 작업이 브라우저에서 실행됩니다.
이미지 색상 팔레트 추출
이미지에서 주요 색상을 추출하고, hex 코드를 복사하고, 스포이드로 정확한 픽셀 색을 고른 뒤 팔레트를 내보내세요.