✂️ SVG 최적화
SVG에서 메타데이터, 주석, 공백, 에디터 태그를 제거하고 소수점을 반올림하여 파일 크기를 대폭 축소.
미리보기
🔗 관련 도구
📖 자주 걸리는 지점
SVG 에서 주석 · 메타데이터 · 에디터 고유의 속성을 삭제하고 공백을 압축하며 소수점을 반올림해 크기를 줄입니다. CSS 의 data URI · HTML 의 img · JSX · Vue 형식으로의 출력에도 대응하며 처리는 브라우저 안에서 끝납니다. 삭제해도 되는 것과 삭제하면 그림이 깨지는 것이 있습니다 — 특히 id 는 <use> · clipPath · 그레이디언트에서 참조되고 있을 가능성이 있으므로 기계적으로 지울 수 없습니다.
| 사례 | 무슨 일이 일어나는가 | 어떻게 하면 되는가 |
|---|---|---|
| 최적화했더니 그림이 깨졌다 | 원인은 거의 두 가지입니다. 하나는 id 의 삭제 — <use xlink:href="#icon"> · clip-path="url(#mask1)" · fill="url(#grad1)" 은 모두 id 를 참조하고 있어 사라지면 도형이 표시되지 않거나 검게 칠해집니다. 또 하나는 소수의 과도한 반올림으로 작은 아이콘이나 가는 선에서는 소수점 이하 1 자리로 반올림한 것만으로 좌표가 뭉개져 형태가 무너집니다. 어느 쪽이나 크기는 줄었지만 그림이 다르다는 결과가 되어 수치만 보고 있으면 성공한 것처럼 보이는 것이 까다롭습니다. |
소수는 2~3 자리로 그치세요 — 1 자리까지 떨어뜨리면 삭감량에 비해 깨질 위험이 수지가 맞지 않습니다. 그리고 최적화 전후를 반드시 나란히 놓고 눈으로 비교하세요(이 도구의 미리보기) — 파일 크기의 숫자만 보고 판단하는 것이 이 작업에서 가장 많은 실패입니다. id 에 대해서는 인라인 SVG 로 외부의 CSS 나 JavaScript 에서 참조하고 있는 경우 그 ID 를 유지하는 설정이 필요합니다 — SVGO 에서도 cleanupIds 는 기본적으로 유효하므로 같은 문제가 일어납니다. 복수의 SVG 를 같은 페이지에 두는 경우에는 반대의 주의도 필요합니다 — id 는 페이지 안에서 유일해야 하므로 같은 ID 를 가진 SVG 를 두 개 두면 나중 것이 앞의 정의를 참조해 버립니다. |
| title / desc 를 지워 접근성이 떨어진다 | <title> 은 SVG 에서의 대체 텍스트에 해당하는 요소입니다 — 스크린 리더는 이것을 읽어 줍니다. 장식용 SVG 라면 지워도 상관없지만 의미를 갖는 아이콘(버튼의 내용, 상태를 나타내는 아이콘, 그래프)에서 지우면 그 버튼이 무엇을 하는지 읽히지 않게 됩니다. 특히 위험한 것은 아이콘뿐인 버튼입니다 — 텍스트 라벨이 없으므로 <title> 이 유일한 실마리였던 경우 그것을 지우면 버튼 이라고만 읽히게 됩니다. 겉보기에는 아무런 변화도 없으므로 알아챌 기회가 없습니다. |
SVG 의 역할로 판단하세요. <img> 로 읽어들인다면 alt 속성이 대체 텍스트가 되므로 SVG 안의 <title> 은 불필요합니다 — 지워도 상관없습니다. 인라인으로 의미를 갖는 경우에는 <title> 을 남긴 뒤 role="img" 와 aria-labelledby 를 붙이세요 — <svg role="img" aria-labelledby="t1"><title id="t1">저장</title> 의 형태입니다. 순수한 장식이라면 <title> 을 지운 뒤 aria-hidden="true" 를 붙이세요 — 이는 빈 alt 와 같은 의미로 읽지 않아도 된다고 명시하게 되어 지우기만 한 상태보다 낫습니다. 판단의 기준은 이 그림이 없었다면 의미가 바뀌는가 입니다. |
| data URI 로 했더니 크기가 늘었다 | Base64 는 반드시 약 33% 크기가 늘어납니다 — SVG 를 최적화해 30% 줄인 뒤 Base64 로 하면 원래 파일과 거의 다르지 않은 크기로 돌아옵니다. 게다가 Base64 의 문자열은 gzip 이 거의 듣지 않습니다 — SVG 는 텍스트이므로 본래 gzip 으로 70% 전후 압축할 수 있는데 Base64 화하면 그 성질이 사라집니다. data URI 로 하면 요청이 줄어 빨라진다는 전제로 실제로는 전송량이 배 가까이 되어 있었다는 것은 이 공정에서 자주 일어나는 역전입니다. | SVG 를 data URI 로 할 거라면 Base64 가 아니라 URL 인코딩을 쓰세요 — data:image/svg+xml,%3Csvg... 형식입니다. SVG 는 텍스트이므로 퍼센트 인코딩 쪽이 Base64 보다 작고 gzip 도 듭니다. 이스케이프가 필수인 것은 # · % · " 세 가지이고 나머지는 그대로 둘 수 있습니다(< 와 > 도 이스케이프하는 편이 안전하지만 필수는 아닙니다). 애초에 data URI 가 유리한 것은 몇 KB 이하의 아이콘뿐입니다 — 그 이상이라면 평범한 <img> 나 인라인 SVG 쪽이 캐시가 듣는 만큼 빨라집니다. data URI 는 CSS 안에서 완결시키고 싶을 때의 수단이지 속도의 최적화가 아닙니다. |
최대의 삭감은 도구가 아니라 내보내기 설정에 있습니다. Illustrator 나 Figma 의 SVG 내보내기는 기본적으로 에디터 고유의 메타데이터 · 레이어 이름 · 불필요한 그룹을 대량으로 포함하지만 최소한 이나 SVG 1.1 프로파일 같은 옵션을 고르는 것만으로 애초에 그것들이 출력되지 않습니다 — 나중에 깎는 것보다 처음부터 내지 않는 편이 확실하고 빠릅니다. 아이콘을 대량으로 쓴다면 하나씩 최적화하는 것보다 SVG 스프라이트로 모으세요 — 요청 수와 총 용량 양쪽에서 유리해집니다. 마지막으로 보안 — 외부에서 받은 SVG 를 그대로 인라인 전개하지 마세요. SVG 는 <script> 와 onload 속성을 포함할 수 있는 XML 이므로 인라인으로 내면 그대로 XSS 가 됩니다. 사용자가 업로드한 SVG 를 표시한다면 <img src="..."> 로 읽어들이세요 — 이 경로에서는 스크립트가 실행되지 않습니다. 인라인으로 다룰 필요가 있다면 DOMPurify 의 SVG 프로파일로 반드시 새니타이즈하세요.
📖 사용법
-
1
SVG 붙여넣기 또는 파일 열기왼쪽에 SVG 코드를 붙여넣거나 파일을 열기합니다.
-
2
최적화 옵션 선택주석 제거, 메타데이터 제거 등 체크박스를 선택합니다.
-
3
출력 복사 또는 형식 선택오른쪽에 최적화된 SVG가 표시됩니다. 형식을 선택하세요.
❓ 자주 묻는 질문
얼마나 크기를 줄일 수 있나요?
title/desc 제거가 접근성에 영향을 주나요?
JSX 형식을 React에서 바로 사용할 수 있나요?
🐛 이 도구에서 문제가 발생했나요?
무료 · 가입 불필요. 재현 절차만이라도 도움이 됩니다. 보고는 운영자에게 직접 전달되어 개선에 사용됩니다.
보고 감사합니다!
운영자에게 전달되었습니다. 개선에 사용됩니다.