SVG 최적화·압축

최적화가 그림을 바꾸지 않았는지 확인하기

SVGO가 끝나면 원본과 결과를 긴 변 400픽셀로 브라우저에서 그려 픽셀마다 비교합니다. 색 채널이나 불투명도가 24/255보다 많이 다른 픽셀을 바뀐 픽셀로 세고, 전체의 0.1% 이하이면 안티에일리어싱 오차로 보아 「렌더링 결과가 같습니다」라고 표시합니다. 그보다 많으면 바뀐 자리를 빨간색으로 표시한 차이 이미지가 나옵니다.

HTML에서 복사한 SVG에는 xmlns=“http://www.w3.org/2000/svg”가 빠져 있는 경우가 많습니다. 인라인으로는 보이지만 .svg 파일로는 이미지로 열리지 않습니다. 이 도구는 최적화 전에 이것을 채워 넣고 안내로 알려 줍니다.

예시: KRDS 아이콘

대한민국 디지털 정부 디자인 시스템 KRDS는 npm 패키지 krds-uiux로 HTML 컴포넌트와 아이콘을 배포합니다. 1.1.0의 resources/img/component/icon/에 있는 SVG 91개를 기본 설정으로 최적화하면 합계 121,742바이트가 64,530바이트로 47.0% 줄었습니다(2026년 10월 2일, SVGO 4.1.0). 커지는 파일은 없었습니다.

달력 아이콘 ico_calendar.svg는 1,150바이트에서 513바이트가 되고(gzip 기준 505 → 290바이트) 렌더링도 같습니다. 원본 경로 데이터의 C 곡선과 소수 5자리 좌표가 a 호와 3자리 좌표로 바뀐 결과입니다.

클립 모양의 ico_file.svg는 1,167바이트에서 477바이트가 되지만 렌더링 비교는 「작은 차이」입니다. 400픽셀로 그려 보면 픽셀의 0.57%가 바뀌는데, 4분의 1 원을 그리는 베지어 곡선을 convertPathData가 원호로 바꾸면서 생긴 차이입니다(sharp의 librsvg로 측정, 브라우저 수치는 조금 다를 수 있음). 24픽셀 아이콘에서는 눈에 띄지 않지만, 확대해서 쓴다면 소수 자릿수를 4로 올리세요. 670바이트가 되고 렌더링이 같아집니다. 91개 중 이처럼 작은 차이가 난 아이콘은 4개였습니다.

파일이 깨지기 쉬운 설정

• ID 줄이기·삭제(기본 켬): 참조되는 ID는 a, b로 바뀌고 참조되지 않는 ID는 지워집니다. 한 페이지에 SVG 여러 개를 인라인으로 넣는다면 「ID 접두사」를 지정하세요.
• inlineStyles·minifyStyles(기본 켬): 한 번만 쓰인 class 스타일이 style 속성으로 들어가고 class가 사라집니다.
• viewBox 삭제(기본 끔): width·height와 같은 viewBox를 지워 크기 조절이 안 됩니다(SVGO 문서). SVGO 4에서 removeTitle과 함께 기본값에서 빠졌습니다.
• width/height 삭제(기본 끔): 크기를 CSS나 부모 요소가 정합니다. viewBox가 없으면 SVGO가 원래 크기로 채웁니다.
• <title> 삭제(기본 끔): 스크린 리더가 읽는 이미지 이름이 사라집니다. KWCAG 같은 접근성 기준을 지켜야 하는 공공 사이트라면 켜기 전에 대체 텍스트를 따로 준비하세요.
• 소수 자릿수(기본 3): 0~1로 줄이면 점 위치가 눈에 띄게 바뀔 수 있고, 렌더링 비교에 나타납니다.

스크립트와 출처를 알 수 없는 SVG

기본 설정의 SVGO는 <script>와 onclick 같은 이벤트 속성을 그대로 둡니다. 이 도구는 그 개수를 안내합니다. 「스크립트·이벤트 속성 삭제」를 켜면 removeScripts가 실행되고, SVGO 4.1.0에서는 <foreignObject> 안 HTML의 이벤트 속성도 지웁니다. 브라우저는 이미지로 쓰인 SVG(<img>, CSS 배경)에서 스크립트와 외부 파일을 막지만, 직접 열거나 인라인으로 넣거나 <object>·<iframe>으로 넣으면 실행됩니다(MDN). 이 페이지의 미리보기는 이미지라서 붙여 넣은 SVG의 스크립트가 여기서 실행되지 않습니다. SVGO는 최적화 도구이므로, 사용자가 올린 SVG를 안전하게 만드는 전용 필터를 대신할 수는 없습니다.

여러 파일과 빌드

아이콘 폴더를 통째로 끌어 놓으면 파일마다 최적화 전후 크기, 절감률, 렌더링 비교 결과가 한 줄씩 표시되고, 「모두 다운로드(.zip)」로 원래 파일 이름 그대로 저장할 수 있습니다(.svgz는 풀어서 .svg로 저장). 설정을 정했다면 설정 패널의 svgo.config.mjs를 복사해 프로젝트에서 npx svgo@4.1.0 —config svgo.config.mjs -f icons -o icons-min을 실행하면 같은 결과를 얻습니다.

다른 도구와의 차이

2026년 10월 2일 같은 파일로 시험했습니다. iLoveIMG(Bing「svg 압축」1위)는 파일을 api11.iloveimg.com/v1/upload로 올립니다(같은 서비스의 일본어 페이지에서 확인). svgoptimizer.com(Bing「svg 압축」2위)은 브라우저 안에서 처리하지만, 대한민국 국기와 <script>가 있는 파일은 「-0%」로 표시되고 내려받으면 원본 그대로였으며, viewBox만 있던 파일에는 결과에 width=“24” height=“24”가 새로 붙었습니다(같은 사이트의 중국어 페이지에서 확인). SVGOMG는 SVGO 4.0.0을 로컬에서 실행하지만 한 번에 파일 하나이고, ID 삭제나 파일 증가를 알리지 않습니다. 셋 다 최적화 전후 렌더링을 비교하지 않습니다.

제한

• 파일 하나에 50 MB까지입니다. 10 MB가 넘는 파일은 최적화하지만 렌더링은 비교하지 않습니다.
• XML 오류는 입력한 텍스트 기준의 행과 열(문자 단위), 그리고 페이지 언어로 된 원인을 알려 줍니다. xmlns가 없는 <svg><rect></svg>는 1행 17열에서 닫는 태그 </svg>가 마지막으로 연 요소와 맞지 않는다고 표시합니다. 도구가 채우는 xmlns는 열에 세지 않습니다.
• 애니메이션은 첫 프레임만 비교합니다. 외부 이미지, 글꼴, <use href=“other.svg#id”>는 이미지로 불러오지 않으므로 비교에서 빠집니다.
• 파일 밖의 CSS나 JavaScript가 어떤 ID와 class를 쓰는지 SVGO는 알 수 없습니다. 안내에는 사라진 것만 나옵니다.
• 내장된 PNG, JPEG 데이터는 다시 압축하지 않습니다. 매개변수가 필요한 플러그인 5개(removeAttrs 등)는 스위치가 없습니다.
• 「React 컴포넌트(JSX)」 형식으로 복사하면 주석, <style> 블록, style 속성을 SVG → JSX 변환기와 같은 방식으로 바꿉니다. React 스타일 객체로 보존할 수 없는 style(SVGO가 남기는 fill:red!important 등)은 변환하지 않고, 버튼 아래에 이유를 표시하며 그 파일의 복사를 끕니다. 다운로드, 목록의 행별 다운로드, ZIP은 최적화한 SVG를 그대로 저장하고 다른 복사 형식에도 영향이 없습니다.

최적화한 SVG를 비트맵으로 바꾸려면 SVG PNG 변환기, TypeScript나 forwardRef가 들어간 React 컴포넌트로 만들려면 SVG → JSX 변환기, Data URI로 넣으려면 이미지 Base64 변환기를 쓰세요.