SVG 최적화
SVG에서 편집기가 남긴 군더더기를 걷어내 용량을 줄입니다. 좌표 자릿수와 viewBox 처리를 고를 수 있습니다.
파일을 끌어다 놓거나 눌러서 고르세요
파일은 서버로 전송되지 않고 브라우저에서만 처리됩니다.
더 줄지 않을 때까지 반복합니다. 조금 느리고 조금 작습니다.
줄바꿈과 들여쓰기를 넣습니다. 용량은 늘어납니다.
쓰이는 모든 곳에서 CSS 로 크기를 줄 때만 안전합니다.
파일 바깥에서 그 id 를 참조하던 곳이 끊깁니다.
파일은 서버로 전송되지 않고 브라우저에서만 처리됩니다.
사용 방법
가입도 설치도 없이, 사용 횟수 제한도 없이 무료로 쓸 수 있습니다.
SVG 를 붙여 넣거나 파일을 올리면 정리된 결과가 앞뒤 용량과 함께 나옵니다. 피그마·일러스트레이터·스케치에서 내보낸 파일에는 편집기 전용 속성과 주석, 쓰지 않는 id 가 그림과 무관하게 남아 있어서, 그런 아이콘이 여러 개 들어간 페이지는 필요 이상으로 무거워집니다.
용량이 가장 많이 줄어드는 곳은 좌표 자릿수입니다. 편집기는 경로 좌표를 소수점 아래 여러 자리까지 적는데, 24픽셀로 그리는 아이콘이라면 세 자리도 화면이 보여 줄 수 있는 것보다 훨씬 촘촘합니다. 낮추면서 미리보기를 확인하세요. 계속 낮추면 곡선이 눈에 띄게 각지기 시작합니다.
viewBox 지우기는 꺼 둔 것이 기본이고, 그 아이콘이 쓰이는 모든 곳에서 CSS 로 크기를 준다는 확신이 없다면 그대로 두는 편이 좋습니다. viewBox 가 없으면 그림이 크기를 따라가지 못하는데, 증상이 보통 "이상하게 보인다" 가 아니라 "아예 사라진다" 입니다.
id 줄이기도 기본은 꺼짐입니다. 조금 줄기는 하지만, 그 id 를 파일 바깥에서 참조하는 곳이 하나라도 있으면 (CSS 든 스크립트든 다른 문서의 use 든) 그 연결이 조용히 끊깁니다.
미리보기는 원본이 아니라 최적화된 SVG 를 그립니다. 지금 내려받을 바로 그 파일을 보고 있는 것입니다. 자릿수를 너무 낮췄는지는 원본과 견주어 보는 것 말고는 확실히 알 방법이 없습니다.
파일은 브라우저를 벗어나지 않습니다. 최적화기 자체도 버튼을 눌러야 불러오므로 페이지를 여는 것만으로는 아무것도 받지 않습니다.