SVG 경량화
SVG 경량화: 주석, 메타데이터, 공백 걷어내기
SVG 마크업이 저장소나 프로덕션 빌드에 들어가기 전에 정리하세요. 개별적으로 전환 가능한 15개의 패스와 시각적 비교를 통해 주석, XML 선언, 편집기 데이터, 빈 그룹 및 사용되지 않는 정의를 제거합니다.
새 파일의 기본값을 편집하고 있습니다
미리보기
미리보기가 없습니다. 파일을 추가하고 선택하면 결과가 표시됩니다.
아직 파일이 없습니다. 위에 파일을 놓거나 '파일 선택'을 누르세요.
SVG 경량화가 걷어내는 것들
SVG 경량화는 이미지 처리가 아니라 마크업 작업입니다. 다시 그리는 것은 없고 지우거나 줄이기만 합니다. 편집기에서 내보낸 파일에는 보통 XML 선언, doctype, 생성기 주석, Inkscape나 Figma 네임스페이스, 아무것도 참조하지 않는 id 속성, 빈 그룹 래퍼, 어떤 요소도 쓰지 않는 defs 항목, 소수점 여섯 자리까지 적힌 좌표가 들어 있습니다. 브라우저는 이 모두를 무시합니다. 걷어내면 파일이 작아지고, 그에 못지않게 유용하게도 SVG를 저장소에 커밋해 다른 소스 파일처럼 리뷰할 때 diff를 읽을 수 있게 됩니다.
SVG 파일을 경량화하는 방법
- 1
SVG 파일을 끌어다 놓거나 '파일 선택'을 눌러 대기열에 추가합니다. 한 번에 최대 40개까지 가능합니다.
- 2
안전, 균형, 최대 중에서 고르고 원하지 않는 단계를 하나씩 끄면 파일마다 줄어든 용량이 그 자리에서 갱신됩니다.
- 3
'모두 저장'을 누르면 결과를 내려받을 수 있습니다. 대기열에 여러 개가 있으면 하나의 ZIP이 됩니다.
개인정보: 파일은 브라우저를 벗어나지 않습니다
변환은 JavaScript 및 WebAssembly를 사용하여 브라우저에서 로컬로 실행됩니다. 파일 업로드나 서버측 변환이 없으므로 추가한 파일은 장치에 그대로 유지됩니다.
로컬 처리는 기밀 로고, 내부 문서 및 미공개 클라이언트 아트워크를 보호하는 데 도움이 됩니다. 페이지와 변환 코드는 사용하는 동안 캐시되므로 이미 연 도구는 네트워크 연결 없이도 계속 작동할 수 있습니다.
자주 묻는 질문
경량화와 압축은 같은 것인가요?
실질적으로는 그렇습니다. 같은 단계가 두 일을 모두 하고, 이 페이지와 'SVG 압축기'는 같은 엔진으로 돌아갑니다. 다른 것은 무게중심입니다. 경량화는 사람이나 편집기가 남긴 마크업, 즉 주석, 메타데이터, 네임스페이스, 공백에 관한 이야기입니다. 압축은 전송되는 바이트에 관한 이야기이며, 여기서는 깔끔한 소스보다 좌표 반올림과 속성 제거가 더 중요합니다.
경량화하면 CSS나 JavaScript가 망가지나요?
스타일시트나 스크립트가 SVG 안으로 손을 뻗는다면 그럴 수 있습니다. 식별자 이름을 바꾸는 단계는 없지만, '최대'는 문서 안에서 아무것도 참조하지 않는 요소와 속성을 지우는데, 바깥의 규칙이 노리는 것이 바로 그런 대상일 수 있습니다. SVG를 바깥에서 애니메이션하거나 스크립트로 다룬다면 '안전'을 쓰거나, '보이지 않는 요소 제거'와 '쓰이지 않는 정의 제거'를 끄고 결과를 확인한 뒤 배포하세요.
viewBox는 남기고 width와 height만 지울 수 있나요?
네. 'viewBox 정규화'와 'width와 height 제거'는 서로 다른 단계입니다. viewBox를 남긴 채 고정 크기를 지우는 쪽은 CSS에서 컨테이너에 맞춰 늘어나야 하는 SVG에 맞습니다. 그대로 두는 쪽은 파일을 단독으로 열거나 아무 스타일도 적용하지 않는 문서에 넣을 때 맞습니다.