SVG 최적화

온라인으로 SVG 파일 최적화 및 압축

SVGO를 사용하여 불필요한 메타데이터, 편집기 데이터, 그룹 및 정밀도를 제거하세요. 안전, 균형 또는 최대 최적화를 선택하고 개별 패스를 미세 조정하고 다운로드하기 전에 결과를 비교하십시오. 모든 것이 브라우저에서 실행됩니다.

여기에 파일을 놓으세요

새 파일의 기본값을 편집하고 있습니다

프리셋

'안전'의 모든 항목에 더해 속성 정리, 보이지 않는 요소 제거, 패스 최적화, 좌표 반올림을 실행합니다.

최적화소수 자릿수

좌표에 남길 소수 자릿수입니다. 낮을수록 작아지고, 2 아래로 내려가면 세밀한 그림이 눈에 띄게 움직일 수 있습니다.

미리보기

원본 보기픽셀 비교

미리보기가 없습니다. 파일을 추가하고 선택하면 결과가 표시됩니다.

아직 파일이 없습니다. 위에 파일을 놓거나 '파일 선택'을 누르세요.

SVG란?

SVG(Scalable Vector Graphics)는 XML을 기반으로 한 벡터 이미지 형식입니다. 픽셀 대신 도형, 패스, 채우기, 선을 수식으로 기술하기 때문에 어떤 크기로 렌더링해도 품질이 떨어지지 않습니다.

SVG는 웹 표준 벡터 형식입니다. 모든 최신 브라우저가 기본적으로 지원하며 CSS로 스타일을 지정하거나 JavaScript 또는 SMIL로 애니메이션을 적용할 수 있습니다. 로고, 아이콘, 일러스트레이션에는 대체로 효율적이지만 복잡한 SVG는 파일이 커질 수 있습니다.

SVG를 최적화해야 하는 경우

Illustrator, Figma, Inkscape 또는 Sketch에서 내보낸 파일은 브라우저에 필요한 것보다 더 정확한 편집기 메타데이터, 숨겨진 레이어, 중첩 그룹 및 좌표를 전달합니다. HTML에 인라인하거나 구성 요소 라이브러리에 제공하거나 아이콘으로 제공하기 전에 SVG를 최적화하십시오. 마크업이 작을수록 전송 및 구문 분석이 더 빠릅니다. 특히 HTML 또는 JavaScript에서 반복되는 경우 더욱 그렇습니다. 원본 소스 파일 유지: 최적화는 단방향이며 축소된 경로 데이터는 직접 편집하기 어렵습니다.

SVG를 온라인에서 최적화하는 방법

1
SVG 파일을 끌어다 놓거나 '파일 선택'을 눌러 대기열에 추가합니다. 한 번에 최대 40개까지 가능합니다.
2
안전, 균형, 최대 중에서 고르고 원하지 않는 단계를 하나씩 끄면 파일마다 줄어든 용량이 그 자리에서 갱신됩니다.
3
'모두 저장'을 누르면 결과를 내려받을 수 있습니다. 대기열에 여러 개가 있으면 하나의 ZIP이 됩니다.

개인정보: 파일은 브라우저를 벗어나지 않습니다

변환은 JavaScript 및 WebAssembly를 사용하여 브라우저에서 로컬로 실행됩니다. 파일 업로드나 서버측 변환이 없으므로 추가한 파일은 장치에 그대로 유지됩니다.

로컬 처리는 기밀 로고, 내부 문서 및 미공개 클라이언트 아트워크를 보호하는 데 도움이 됩니다. 페이지와 변환 코드는 사용하는 동안 캐시되므로 이미 연 도구는 네트워크 연결 없이도 계속 작동할 수 있습니다.

자주 묻는 질문

최적화하면 SVG 모양이 달라지나요?

안전은 가장 보수적인 사전 설정입니다. Balanced는 또한 좌표를 반올림하고 중복 속성을 제거하는 반면 Maximum은 중복 모양을 병합하고 고정 치수를 제거합니다. 더 공격적인 패스는 미세한 디테일이나 크기 조정에 영향을 미칠 수 있으므로 다운로드하기 전에 픽셀 차이를 사용하여 결과를 검토하세요.

'안전', '균형', '최대'는 무엇이 다른가요?

단계가 누적되는 구조입니다. '안전'은 마크업을 지우기만 하는 아홉 가지 단계를 실행합니다. XML 프롤로그, 주석, 메타데이터, 편집기 네임스페이스, 쓰이지 않는 정의, 그냥 통과시키는 그룹, 긴 색상 값, 공백입니다. '균형'은 여기에 속성 정리, 보이지 않는 요소 제거, 패스 재작성, 좌표 반올림을 더합니다. '최대'는 중복 병합과 width/height 제거를 더하고, 파일이 더 줄지 않을 때까지 모든 단계를 반복합니다. 개별 단계는 '고급 설정'에서 하나씩 끌 수 있습니다.

최적화한 파일이 왜 거의 작아지지 않나요?

대개 이미 최적화되어 있었거나, 더 줄일 수 없는 패스 데이터가 크기의 대부분을 차지하거나, 이 도구가 절대 건드리지 않는 data URI 형태의 래스터 이미지가 박혀 있기 때문입니다. 손으로 그린 그림이라면 보통 소수 자릿수를 낮추는 것이 남은 것 중 가장 큰 이득입니다. 표시되는 수치는 압축하지 않은 파일 크기라는 점도 기억하세요. 서버의 gzip이나 Brotli가 훨씬 더 줄여 주며, 마크업이 깔끔할수록 압축도 잘됩니다.