본문으로 건너뛰기
Utilizy

SVG 최적화

불필요한 코드를 걷어내 용량 축소

브라우저 내 처리

입력

결과

결과

아직 입력하지 않았습니다

SVG 파일을 올리거나 코드를 붙여넣으면 결과가 여기에 표시됩니다.

viewBox는 항상 유지되므로 크기 조절이 깨지지 않습니다.

일러스트레이터나 피그마에서 내보낸 SVG에는 편집 정보와 주석이 잔뜩 들어 있어 실제 필요한 것보다 몇 배 큽니다. 최적화하면 보통 절반 이하로 줄어들고, 웹사이트에 인라인으로 넣기도 편해집니다.

사용 방법

  1. 1 SVG 파일을 올리거나 코드를 붙여넣습니다.
  2. 2 최적화 결과와 줄어든 용량이 즉시 표시됩니다.
  3. 3 미리보기로 모양이 깨지지 않았는지 확인합니다.
  4. 4 결과를 복사하거나 파일로 저장합니다.

자주 묻는 질문

모양이 깨지지 않나요?

기본 설정은 안전한 규칙만 적용하며, viewBox는 항상 남겨 크기 조절이 깨지지 않게 합니다. 그래도 미리보기로 확인한 뒤 사용하세요.

"ID 정리"는 언제 끄나요?

CSS나 자바스크립트에서 SVG 내부 요소를 ID로 참조하고 있다면 꺼야 합니다. 켜면 ID가 짧게 바뀌어 참조가 끊어집니다.

소수점 자릿수는 무엇인가요?

좌표의 정밀도입니다. 낮출수록 용량이 줄지만 곡선이 거칠어질 수 있습니다. 아이콘은 2~3이면 충분하고 정교한 일러스트는 4 이상을 권합니다.

함께 쓰면 좋은 도구