Base64 말고 퍼센트 인코딩을 쓰는 이유
SVG 는 원래 글자입니다. 글자를 Base64 로 바꾸는 건 손해만 보는 일입니다.
| 퍼센트 인코딩 | Base64 | |
|---|---|---|
| 늘어나는 양 | 5~10% | 33% 고정 |
| gzip | 잘 먹습니다 | 반복이 뭉개져 잘 안 먹습니다 |
| 나중에 색만 바꾸기 | %23fff 를 찾아 고치면 됩니다 | 전부 다시 만들어야 합니다 |
| 깃 diff | 바꾼 부분만 보입니다 | 한 줄이 통째로 바뀝니다 |
큰따옴표를 홑따옴표로 바꿉니다
큰따옴표 하나는 %22 로 세 글자가 됩니다. XML 은 속성을 홑따옴표로 감싸도
똑같으므로, 값 안에 홑따옴표가 없을 때만 바꿔 둡니다. 아이콘 하나에서 보통
수십 글자가 줄어듭니다.
mask-image 를 쓰면 색을 CSS 로 바꿉니다
배경 이미지로 넣은 아이콘은 색이 SVG 안에 박혀 있어서, 색깔별로 아이콘을
하나씩 만들어야 합니다. 마스크로 넣으면 background-color 가 그대로
아이콘 색이 됩니다.
currentColor 를 쓰면 글자색을 따라갑니다 — 다크모드에서 아이콘을
따로 손볼 일이 없어집니다.
xmlns 가 없으면 안 그려집니다
데이터 URI 로 넣은 SVG 는 문서와 따로 떨어진 파일 취급입니다. HTML 안에 직접
적을 때는 없어도 되는 xmlns 가 여기서는 반드시 있어야 합니다.
빠져 있으면 넣어 주고 결과 아래에 알려 줍니다.
더 작게 만들려면?
먼저 SVG 압축을 거치세요. 편집기가 남긴 메타데이터와 소수점 여섯 자리 좌표를 걷어내면 대개 절반 아래로 내려갑니다. 그 다음에 여기 넣으면 훨씬 짧은 결과가 나옵니다.
자바스크립트나 애니메이션이 든 SVG 도 되나요?
CSS 애니메이션(<style> 안)은 동작합니다. 자바스크립트는 동작하지
않습니다 — 데이터 URI 로 불러온 이미지 안에서는 스크립트가 실행되지 않습니다.
외부 파일을 참조하는 <image href="..."> 도 로드되지 않습니다.
인터넷 익스플로러도 되나요?
IE 는 퍼센트 인코딩된 SVG 데이터 URI 를 읽지 못합니다. 아직 지원해야 한다면 Base64 를 고르세요. 요즘 브라우저는 전부 둘 다 됩니다.