SVG 압축 (Minify)

SVG 가 왜 그렇게 큰가

아이콘 하나가 20 KB 를 넘는다면 그림이 복잡해서가 아닙니다. 편집기가 자기 상태를 파일 안에 같이 적어 두기 때문입니다. 레이어 이름, 마지막으로 본 확대율, 저장한 시각, 안내선 위치 — 브라우저는 하나도 읽지 않는 값들입니다.

좌표 소수점이 진짜 범인일 때가 많다

편집기는 좌표를 39.500000 처럼 소수점 여섯 자리로 적습니다. 화면에서 1픽셀은커녕 1000분의 1픽셀도 안 되는 차이인데, 좌표 하나마다 다섯 글자씩 늘어납니다. path 하나에 좌표가 200개면 그것만 1 KB 입니다.

기본값인 소수점 2자리는 아이콘과 로고에 넉넉합니다. 지도처럼 크게 확대해 보는 그림이라면 3자리로 올리세요. 반대로 뷰박스가 0 0 24 24 인 아이콘은 0~1자리로 내려도 눈에 띄지 않습니다.

건드리지 않는 것

공백이 뜻을 갖는 자리가 두 군데 있습니다. 여기는 원문 그대로 흘려보냅니다.

• <text> <tspan> 안 — 공백 하나가 글자 사이 간격입니다
• <style> <script> 안 — XML 이 아니라 CSS·자바스크립트입니다. 안쪽 CSS 까지 줄이려면 CSS 압축에 따로 넣으세요

id 도 지우지 않습니다. <use href="#icon"> 나 CSS 선택자, 자바스크립트가 그 이름으로 도형을 찾고 있을 수 있는데, 이 페이지는 SVG 하나만 보고 있어서 쓰이는지 아닌지 알 방법이 없습니다.

<title> 은 왜 기본으로 남기나

스크린리더가 그 값을 읽어 주기 때문입니다. 장식용 아이콘이라면 지워도 되지만, 뜻을 가진 그림(로고, 상태 아이콘, 도표)에서 지우면 화면을 못 보는 사람에게는 그 자리가 통째로 사라집니다. 그래서 이 항목만 기본이 꺼짐입니다.