SVG 최적화 도구

SVG 파일 크기를 줄이고 성능을 향상시키기 위한 최적화

여기에 SVG 파일을 놓거나 클릭해서 선택하세요

지원 형식: SVG, SVGZ · Ctrl+V / ⌘V로 붙여넣을 수도 있습니다

또는 SVG 코드 붙여넣기

팁: 페이지 어디서나 Ctrl+V / ⌘V로 SVG 코드를 붙여넣을 수 있습니다.

SVG 최적화 도구 사용 방법

SVGO로 SVG 파일을 브라우저에서 줄입니다. 기본, 안전, 최대 프리셋을 고르거나 플러그인을 하나씩 켜고 끌 수 있고, 원본과 픽셀 차이를 확인한 뒤 SVG, Data URI, React 컴포넌트로 내보냅니다.

SVG나 SVGZ 파일을 페이지에 끌어다 놓거나 SVG 코드를 붙여넣습니다. '예시'를 누르면 예제를 불러옵니다.

'최적화'에서 프리셋을 '기본', '안전', '최대' 중에서 고르고 '숫자 정밀도', '멀티패스', '보기 좋게 출력'을 조절합니다.

필요하면 '플러그인'의 그룹을 펼쳐 SVGO 플러그인을 하나씩 켜거나 끕니다. '초기화'를 누르면 기본으로 돌아갑니다.

'나란히', '슬라이더', '차이'로 결과를 비교합니다. '차이'에서는 바뀐 픽셀이 빨간색으로 표시됩니다.

SVG, Data URI, React 탭 중 하나를 고르고 'SVG 다운로드'나 '.jsx 다운로드'를 누릅니다. 파일이 여러 개면 '모두 다운로드 (ZIP)'를 사용합니다.

자주 묻는 질문

아니요. SVGO는 브라우저의 백그라운드 워커에서 실행되며 파일은 기기 밖으로 나가지 않습니다.

'기본' 프리셋은 모양을 그대로 두는 것을 목표로 합니다. '차이' 보기는 두 버전을 그려 바뀐 픽셀 비율을 알려 주고, 같으면 '눈으로 보기에 동일합니다'라고 표시합니다. '숫자 정밀도'를 너무 낮추면 세부가 뭉개질 수 있습니다.

'안전'입니다. 구조, ID, 도형을 건드리지 않아 CSS 선택자와 스크립트가 요소를 그대로 찾을 수 있습니다.

'최대'는 제목, 크기 지정, 스크립트까지 제거합니다. CSS나 img로 쓰는 아이콘에 맞춘 설정이라 SVG가 컨테이너 크기에 맞춰 늘어납니다. 크기를 남기려면 '웹 삽입' 그룹에서 removeDimensions를 끄세요.

대부분은 'Base64'를 끈 채로 두세요. URL 인코딩 URI가 보통 더 짧고 gzip 효율도 좋습니다. 도구가 Base64를 요구할 때만 켜면 됩니다.

React 탭은 최적화된 SVG를 파일 이름을 딴 JSX 컴포넌트로 감싸고, 속성을 JSX 문법에 맞게 바꾸며, props를 svg 요소에 전달합니다. '.jsx 다운로드'로 저장합니다.