SVG 스프라이트 최적화

SVG 스프라이트 최적화 소개

이 도구는 여러 SVG 아이콘을 받아 두 가지를 합니다. 먼저 각 파일에서 XML 선언, 주석, 메타데이터, Inkscape·Sodipodi·Sketch 편집기 속성을 지우고 공백을 줄이고 소수점 자릿수를 잘라 파일을 가볍게 만듭니다. 그다음 결과를 symbol 기반 스프라이트 한 장, 또는 data URI를 담은 CSS 클래스 모음으로 합칩니다.

SVGO처럼 경로를 다시 계산하는 도구가 아니라 정해진 규칙으로 텍스트를 걷어내는 방식이라, 결과를 예측하기 쉬운 대신 어떤 규칙이 무엇을 깨뜨릴 수 있는지 알고 쓰는 것이 중요합니다.

symbol과 use가 스프라이트가 되는 원리

symbol 요소는 그 자체로는 화면에 그려지지 않는 템플릿입니다. 각 symbol에 id와 viewBox를 주고 한 SVG 안에 모아 두면, 페이지 어디서든 use 요소의 href로 「#icon-home」 같은 id를 가리켜 복제본을 그릴 수 있습니다. 아이콘마다 HTTP 요청을 따로 보내지 않고, 같은 아이콘을 여러 번 써도 경로 데이터는 한 번만 들어갑니다.

이 도구는 파일명에서 id를 만듭니다. 소문자로 바꾸고 영문·숫자 외의 문자는 하이픈으로 바꾼 뒤 「icon-」을 붙이며, 숫자로 시작하면 한 번 더 접두어를 붙입니다. 원본에 viewBox가 없으면 width·height로 만들고, 그것도 없으면 0 0 24 24로 가정합니다. use가 별도 파일(sprite.svg#id)을 가리키는 경우 브라우저는 같은 출처의 파일만 허용하므로, CDN 같은 다른 도메인에 올린 스프라이트는 참조가 되지 않습니다. 이때는 스프라이트를 HTML 본문에 인라인으로 넣으세요.

여러 파일의 id가 부딪히는 문제

디자인 도구가 내보낸 SVG에는 그라데이션이나 클리핑 경로에 「paint0_linear」, 「clip0」, 「a」 같은 id가 흔히 붙습니다. 이런 파일 여러 개를 한 스프라이트에 합치면 같은 id가 여러 번 나오고, 브라우저는 문서에서 첫 번째 것만 참조하기 때문에 두 번째 아이콘이 첫 번째 아이콘의 그라데이션으로 칠해지는 버그가 생깁니다.

이 도구는 symbol마다 내부 id 앞에 「icon-home__」처럼 symbol id와 밑줄 두 개를 붙이고, url(#…), href="#…", 애니메이션 begin·end의 참조까지 함께 바꿉니다. 그 파일 안에 정의되지 않은 id를 가리키는 참조는 건드리지 않습니다.

지워도 되는 것과 지우면 안 되는 것

주석, XML 선언, metadata 블록, 편집기 전용 속성은 화면 결과에 영향이 없어 안전하게 지울 수 있습니다. 반면 viewBox는 크기를 바꿀 때 비율을 지키는 기준이라 지우면 안 되고, SVGO도 viewBox 제거와 title 제거를 기본 설정(preset-default)에서 빼 두었습니다. 이 도구도 viewBox는 유지합니다.

title과 desc는 지우지 않습니다. metadata 블록과 달리 스크린 리더가 아이콘 이름으로 읽는 접근성 정보이기 때문입니다. 스프라이트에서도 각 symbol 안에 그대로 남습니다. 다만 use로 불러온 아이콘의 title을 읽어 주지 않는 브라우저·스크린 리더 조합도 있으니, 의미 있는 아이콘이라면 HTML 쪽에 aria-label이나 숨긴 텍스트로 이름을 함께 다는 편이 안전합니다.

공백 축소는 태그 사이의 공백을 모두 없앱니다. 도형으로만 된 아이콘에는 영향이 없지만, text나 tspan으로 글자를 넣은 SVG는 단어 사이 띄어쓰기가 사라질 수 있습니다. 글자가 든 SVG는 결과를 눈으로 확인하세요.

소수점 정밀도는 viewBox 크기에 맞춰 고른다

정밀도 슬라이더(0~4, 기본 2)는 문서 안의 모든 소수를 반올림합니다. 오차는 좌표 단위로 생기므로, 체감 오차는 viewBox 크기에 따라 달라집니다. 24×24 아이콘에서 소수 둘째 자리는 최대 0.005단위, 24px로 그리면 0.005px라 전혀 보이지 않습니다. 0으로 두면 최대 0.5단위 오차가 생겨 24px 아이콘에서는 선이 반 픽셀 흔들릴 수 있습니다.

반대로 viewBox가 「0 0 1 1」처럼 아주 작은 좌표계를 쓰는 SVG는 소수 둘째 자리 반올림만으로도 모양이 눈에 띄게 뭉개집니다. 결과 미리보기에서 곡선이 각져 보이면 정밀도를 올리세요.

symbol 스프라이트와 CSS 스프라이트 중 무엇을 쓸까

symbol 스프라이트는 인라인 SVG로 그려지므로 fill="currentColor"로 만든 아이콘은 주변 글자색을 따라가고, CSS로 색과 선 두께를 바꿀 수 있습니다. CSS 스프라이트는 아이콘을 background-image의 data URI로 넣는데, 이렇게 들어간 SVG는 별도 문서로 취급되어 페이지의 CSS나 currentColor를 받지 못합니다. 색이 고정된 로고나 일러스트에 알맞습니다.

data URI는 base64 대신 URL 인코딩을 씁니다. base64는 원본보다 약 33% 길어지고 gzip이 잘 압축하지 못하지만, URL 인코딩한 SVG는 텍스트 구조가 남아 전송 압축이 더 잘 됩니다.

예시

사용 방법

1. SVG 파일 여러 개를 끌어다 놓습니다.
2. 소수점 정밀도를 정하고 파일별 절감량을 확인합니다.
3. symbol 스프라이트나 CSS 스프라이트 결과를 복사하거나 내려받습니다.

자주 묻는 질문