SVG 용량 줄이기
디자인 도구에서 내보낸 SVG에는 그림과 상관없는 정보가 잔뜩 들어 있습니다.
도구를 준비하고 있어요.
이용자 평가
아직 등록된 리뷰가 없어요. 이 도구를 써 보셨다면 첫 리뷰를 남겨 주세요.
SVG 용량 줄이기 상세 가이드
사용법과 예제를 살펴보고, 궁금한 내용은 주제별로 찾아보세요.
시작 전에 한눈에 보기
- 지우는 것
- 주석, 제목·설명·메타데이터, 편집기 전용 속성과 이름공간.
- 공백
- 태그 사이의 공백과 들여쓰기(선택).
- 숫자
- 소수점 자리를 0~6에서 고릅니다(선택).
- 남기는 것
- id, <style> 안의 규칙, <script> 안, 글자 내용.
- 자체 확인
- 그리는 요소와 속성이 그대로인지 견줘 알려 줍니다.
- 눈으로 확인
- 줄이기 전과 뒤를 나란히 그려 줍니다.
- 미리보기 안전
- 그림으로만 그려 SVG 안 스크립트가 실행되지 않습니다.
- 처리 위치
- 파일을 서버로 보내지 않습니다.
SVG 용량 줄이기 사용 순서
SVG를 넣으세요
파일을 끌어다 놓거나 내용을 붙여 넣으세요. <svg> 로 시작하지 않으면 알려 드립니다.
무엇을 지울지 고르세요
주석, 제목·메타데이터, 편집기 정보, 공백을 각각 끄고 켤 수 있습니다. 소수점 자리도 정합니다.
전과 뒤를 견주세요
두 그림이 나란히 나옵니다. 같은지 눈으로 확인해 주세요. 도구도 그리는 요소가 그대로인지 확인해 함께 알려 드립니다.
가져가세요
복사하거나 .svg 로 저장합니다. 얼마나 줄었는지와 무엇을 몇 개 지웠는지도 적어 드립니다.
이런 작업에 활용하세요
지워도 되는 것만 지웁니다
일러스트레이터나 잉크스케이프에서 내보낸 SVG에는 편집기가 쓰는 속성과 이름공간, 제목과 메타데이터, 들여쓰기가 함께 들어옵니다. 이런 것은 그림을 그리는 데 쓰이지 않아 지워도 보이는 결과가 같습니다. 반대로 id와 style 안의 규칙, 스크립트는 어디에서 참조하는지 알 수 없어 그대로 둡니다. 몇 바이트를 더 줄이려다 그림이 달라지는 것이 훨씬 나쁘기 때문입니다.
달라지지 않았는지 눈으로 확인하게 합니다
줄이기 전과 뒤를 나란히 그려 줍니다. 도구가 스스로도 그리는 요소와 속성이 그대로인지 견줘 알려 주지만, 마지막 판단은 눈으로 하시는 것이 확실합니다. 미리보기는 그림으로만 그리므로 SVG 안에 스크립트가 있어도 실행되지 않습니다.
예제로 결과 이해하기
잉크스케이프에서 내보낸 아이콘
inkscape:version, sodipodi:namedview, <title>, 들여쓰기가 든 SVG편집기 전용 속성 2 · 제목 1 · 주석 1 을 지우고 용량이 줄어듦소수점 줄이기
cx="60.000000" cy="60.000000" r="50.0000"cx="60" cy="60" r="50"지우는 것과 남기는 것
표를 좌우로 밀어 나머지 내용을 확인하세요.
| 항목 | 처리 | 이유 |
|---|---|---|
| 주석·제목·메타데이터 | 지웁니다 | 그림을 그리는 데 쓰이지 않습니다. |
| 편집기 전용 속성 | 지웁니다 | 잉크스케이프 등에서만 쓰는 정보입니다. |
| id | 남깁니다 | CSS·use·그라디언트가 참조할 수 있습니다. |
| <style> 안의 규칙 | 남깁니다 | 이름을 건드리면 그림이 깨집니다. |
결과가 예상과 다를 때
그림이 달라 보입니다
소수점 자리를 늘려 보세요. 그래도 다르면 그 SVG를 알려 주시면 고치겠습니다. 결과를 쓰지 마시고 원본을 쓰세요.
별로 안 줄어듭니다
이미 정리된 SVG일 수 있습니다. 큰 SVG는 대부분 경로 데이터가 차지하는데, 이 도구는 경로의 모양 자체를 바꾸지 않습니다.
SVG가 아니라고 나옵니다
<svg> 로 시작하는 내용인지 확인해 주세요. 이미지 파일(PNG·JPG)은 다루지 않습니다.
스크립트가 들어 있다고 나옵니다
SVG 안에 <script>가 있습니다. 웹에 올릴 때 위험할 수 있으니 내용을 확인해 주세요. 이 도구는 그 안을 건드리지 않습니다.
알아두면 쉬운 용어
- 이름공간
- xmlns 로 선언하는 태그·속성의 소속입니다. 편집기 전용도 있습니다.
- viewBox
- 그림을 어느 좌표 범위로 그릴지 정하는 속성입니다.
- 경로(path)
- d 속성에 좌표를 이어 적어 모양을 그리는 요소입니다.
- 무손실
- 보이는 결과가 달라지지 않는 줄이기입니다.
SVG 용량 줄이기 자주 묻는 질문
왜 더 많이 줄여 주지 않나요?
더 줄일 수 있는 방법은 있지만 그림이 달라질 위험이 함께 커집니다. id를 지우거나 style 규칙을 합치는 것이 그렇습니다. 이 도구는 확실한 것만 지우는 쪽을 골랐습니다.
소수점 자리를 줄이면 그림이 달라지나요?
아주 작게 달라질 수 있습니다. 아이콘처럼 작은 그림은 2자리로도 충분하지만, 큰 그림이나 정밀한 곡선은 자리를 늘려 보고 미리보기로 견줘 주세요.
파일이 서버로 올라가나요?
올라가지 않습니다. 이 브라우저 안에서만 처리합니다.
SVGO 만큼 줄어드나요?
그보다 덜 줄어듭니다. 위험이 있는 처리를 일부러 하지 않기 때문입니다. 대신 그림이 달라질 걱정을 덜 하셔도 됩니다.
여러 파일을 한 번에 할 수 있나요?
지금은 한 개씩 다룹니다. 전과 뒤를 눈으로 견주는 것이 핵심이라 한 개씩 보는 편이 안전합니다.
애니메이션이 든 SVG도 되나요?
됩니다. animate 같은 요소와 그 속성은 그대로 둡니다. 다만 미리보기에서 움직임까지 똑같은지 확인해 주세요.