SVG 압축기의 작동 방식
Illustrator, Inkscape, Figma, Sketch에서 저장한 SVG 파일에는 보통 브라우저가 전혀 쓰지 않는 것이 많이 들어 있습니다. 편집기 메타데이터, 주석, 숨겨진 레이어, 전부 기록된 기본값, 소수점 여덟 자리 이상의 좌표 등입니다. 이 도구는 대부분의 빌드 도구와 디자인 앱이 사용하는 오픈 소스 SVG 최적화 도구인 SVGO로 이를 모두 제거하므로, 그림은 똑같아 보이지만 파일은 더 작아집니다.
SVGO는 파일을 여러 번에 걸쳐 처리합니다. 경로를 합치고 줄이며, 숫자를 선택한 정밀도로 반올림하고, 불필요한 그룹을 합치고, 빈 요소를 제거하고, 색상을 가장 짧은 형태로 다시 씁니다. viewBox는 유지되므로 SVG 파일은 여전히 어떤 크기로든 확대/축소되며, 파일의 다른 부분이 참조하는 ID는 참조까지 함께 업데이트되어 짧아지므로 그라데이션과 마스크도 계속 작동합니다.
중요한 설정은 정밀도 하나뿐입니다. 높음은 소수점 세 자리를 유지하며, 일반적인 크기에서는 차이가 보이지 않으므로 아이콘과 로고에 안전한 선택입니다. 균형은 두 자리, 가장 작게는 한 자리를 유지합니다. 한 자리는 0.1 단위가 1픽셀보다 훨씬 작은 큰 일러스트레이션에 적합하지만, 아주 작은 아이콘은 모양이 틀어질 수 있습니다. 결과가 이상해 보이면 원본을 더 높은 정밀도로 다시 압축하세요.
약 200KB 크기의 최적화 도구는 버튼을 처음 누를 때 로드됩니다. SVG 파일은 이 탭 안에서 읽고 다시 쓰이며 절대 업로드되지 않으므로, 공개 전 로고나 고객 작업물에도 안심할 수 있습니다.
SVG 압축기 옵션 설명
| 높음 | 소수점 세 자리. 아이콘, 로고 등 작은 것에 안전합니다. |
|---|---|
| 균형 | 소수점 두 자리. 대부분의 일러스트레이션에 적합합니다. |
| 가장 작은 파일 | 소수점 한 자리. 큰 작업물용이며, 작은 아이콘은 나중에 확인하세요. |
| 유지됨 | viewBox, 참조되는 ID, 그라데이션, 마스크, 그림의 모양. |
| 제거됨 | 편집기 메타데이터, 주석, 숨겨진 요소와 빈 요소, 불필요한 정밀도. |
사용하는 경우
1킬로바이트마다 페이지 로딩 시간이 늘어나는 웹사이트에 아이콘과 로고를 올리기 전에, SVG 파일을 HTML 또는 React 컴포넌트에 인라인으로 넣기 전에, 디자인 에셋을 코드 저장소에 커밋하기 전에, 또는 업로드 양식이 파일 크기를 제한할 때 SVG를 압축하세요.
디자인 앱용으로 편집 가능한 원본 SVG 파일을 보관하세요. 최적화하면 레이어 이름과 안내선 같은 편집기 데이터가 제거되므로, 작업물을 편집해야 할 때는 원본을 다시 여세요.
SVG 최적화 도구 소개
SVGO는 SVG Optimizer의 줄임말로, 대부분의 웹 빌드 도구와 최적화 내보내기를 제공하는 디자인 앱에서 SVG 최적화를 담당하는 오픈 소스 도구입니다. SVG 파일을 트리로 파싱하고, 충분히 검증된 정리 단계를 적용한 뒤 다시 기록하며, 더 줄일 것이 없을 때까지 반복합니다. 여기서 수행하는 모든 단계는 그림이 똑같이 보이도록 유지하는 단계이며, 그래서 기본 설정이 실제 서비스 환경에서도 신뢰받습니다. 이 페이지에서 사용하는 버전은 전적으로 브라우저에서 실행되며, 도구를 처음 사용할 때 jsDelivr CDN에서 로드됩니다.
SVG 압축기 문제 해결
"이미 최적화되어 변경 없이 반환했습니다"
SVG 파일이 이미 최적화되어 있어 변경하지 않고는 제거할 수 있는 것이 없었습니다. 원본 파일을 다시 제공합니다.
그림 일부가 움직이거나 휘었습니다
아주 작은 아이콘은 낮은 정밀도에서 어긋날 수 있습니다. 원본을 높음 정밀도로 다시 압축하세요.
"SVG 파일이 아닙니다"
파일에 SVG 그림이 들어 있지 않습니다. 비트맵 이미지를 감싸기만 한 SVG 파일도 크게 줄일 수 없습니다. 대신 그 안의 이미지를 압축하세요.
SVG 압축기 사용 방법 단계별 안내
- "SVG 파일 선택"을 누르거나 파일을 상자로 끌어다 놓으세요.
- 필요하면 옵션을 설정하세요. 대부분의 용도에는 기본값이 적합합니다.
- "SVG 압축"을 누르세요. 작업은 사용자의 기기에서 이루어집니다.
- 다운로드 버튼으로 결과물을 저장하세요.
온라인에서 해도 안전한가요?
대부분의 온라인 도구에서 "온라인"이란 파일이 회사 서버에 업로드되어 그곳에서 처리되고, 삭제되기 전까지 한동안 보관된다는 뜻입니다. 여기서는 그렇지 않습니다. 페이지가 도구의 코드를 브라우저로 다운로드하고, 파일은 사용자의 기기에 있는 탭 안에서 읽히고 처리됩니다. 파일은 TapToConvert나 다른 누구에게도 절대 전송되지 않습니다.
직접 확인할 수 있습니다. 페이지와 엔진이 로드된 후 Wi-Fi를 꺼도 도구는 계속 작동합니다. 이는 대기열, 일일 한도, 서버가 정한 파일 크기 상한이 없다는 뜻이기도 합니다. 유일한 한도는 브라우저가 탭 하나에 허용하는 메모리입니다.
SVG 압축기 자주 묻는 질문
압축하면 SVG 파일의 모양이 바뀌나요?
높음 정밀도에서는 눈에 보이는 변화가 없습니다. 정밀도를 낮추면 좌표를 더 많이 반올림하므로 아주 작은 디테일이 휠 수 있습니다.
얼마나 작아지나요?
디자인 앱에서 내보낸 SVG는 보통 30~70퍼센트 줄어듭니다. 이미 최적화된 SVG는 거의 줄지 않거나 전혀 줄지 않습니다.
압축한 SVG 파일을 계속 편집할 수 있나요?
예, 하지만 레이어 이름, 안내선, 편집기 설정은 사라집니다. 편집용으로 원본을 보관하세요.
파일이 업로드되나요?
아니요. SVGO는 브라우저에서 실행되므로 SVG 파일은 기기 밖으로 나가지 않습니다.
무료인가요?
예. 회원가입, 워터마크, 사용 제한이 없습니다. TapToConvert는 광고로 운영됩니다.
파일이 업로드되나요?
아니요. 모든 작업은 사용자의 기기에 있는 브라우저 탭 안에서 이루어집니다.