Adobe Illustrator, Figma, Inkscape에서 내보낼 때 포함된 불필요한 메타데이터, XML 주석, 숨겨진 레이어 및 과도한 소수점 좌표를 브라우저 내에서 즉시 제거합니다.
또는 클릭하여 파일 선택
Adobe Illustrator, Figma, Inkscape에서 추출한 원본 벡터 파일을 실제로 압축한 바이트 절감 결과입니다.
21 KB에 달하는 Adobe XMP 패킷 헤더, <i:pgf> 전용 태그 및 미사용 XML 네임스페이스를 제거했습니다. 4,200개 이상의 경로 좌표를 소수점 6자리에서 2자리로 반올림하여 400% 확대 시에도 시각적 차이가 전혀 없습니다.
24개의 대시보드 아이콘을 한 번에 드래그 앤 드롭하여 불필요한 중첩 그룹과 기본 fill-opacity="1" 속성을 제거하고 인라인 <style> 블록을 압축해 전체 용량을 3분의 1로 줄였습니다.
모든 inkscape:* 및 sodipodi:* 편집기 전용 속성과 디자이너가 남겨둔 14개의 숨김 레이어를 완전히 삭제하여 브라우저 DOM 파싱 시간을 68% 단축했습니다.
Illustrator, Figma, Sketch, Inkscape 같은 디자인 도구는 재편집 편의를 위해 웹 렌더링에 전혀 필요 없는 전용 XML 태그, 7자리 부동소수점 좌표, 숨김 레이어를 SVG 파일에 가득 채워 내보냅니다.
최적화되지 않은 SVG를 HTML에 인라인으로 삽입하면 문서 크기와 DOM 노드 수가 급증합니다. 주석과 메타데이터를 제거하면 HTML 전송 크기가 줄어들어 초기 렌더링 속도(FCP)가 빨라집니다.
원본 SVG에 포함된 xmlns:xlink, xml:space 및 편집기 고유 ID는 JSX 컴파일 경고나 CSS 스타일 충돌을 유발합니다. 군더더기 없는 순수 XML 코드로 정제해 프론트엔드 코드에 바로 붙여넣을 수 있습니다.
기업의 미공개 브랜드 로고나 수십 개의 UI 아이콘 폴더를 외부 서버에 업로드하지 않고 브라우저 로컬 메모리에서 안전하게 일괄 최적화할 수 있습니다.
렌더링 오류 없이 최대한의 압축률을 얻으려면 입력 파일이 다음 기술 조건을 충족하는지 확인하세요.
Illustrator, Figma, Affinity Designer, Inkscape 등에서 내보낸 표준 XML 기반 .svg 파일을 지원하며, 한 번에 여러 파일을 드래그 앤 드롭할 수 있습니다.
<path>, <circle>, <rect> 등의 벡터 요소로 구성된 파일이어야 합니다. 내부에 <image xlink:href="data:image/png;base64,..."> 형태의 비트맵 이미지가 들어 있다면 XML 최적화만으로는 이미지 용량이 줄어들지 않습니다.
특수 폰트를 사용한 텍스트(<text>)는 내보내기 전에 디자인 프로그램에서 "윤곽선 만들기(Create Outlines)"를 적용해야 사용자 기기에 폰트가 없어도 깨지지 않습니다.
불필요한 크기 속성을 정리한 후에도 모든 화면 해상도에서 비율이 유지되도록 루트 태그에 viewBox="0 0 W H" 속성이 정의되어 있는지 확인하세요.
작업 영역 하단의 8개 체크박스(주석 제거, 메타데이터 제거, 빈 속성 제거, 스타일 최소화, 미사용 네임스페이스 제거, 숫자 반올림, 편집기 데이터 제거, 숨겨진 요소 제거)를 확인합니다. 최대 압축을 위해 기본적으로 모두 선택되어 있습니다.
초록색 드롭 영역에 .svg 파일들을 끌어다 놓거나, 상단의 "최적화 전 샘플 SVG 불러오기" 버튼을 클릭하여 34.8 KB 파일이 즉시 압축되는 과정을 확인하세요.
수 밀리초 만에 브라우저 로컬 처리가 완료되며, 각 파일의 원본 크기, 압축 후 크기, 절감된 퍼센트(%)가 실시간으로 표시됩니다.
각 결과 항목의 다운로드 버튼을 눌러 가벼워진 .svg 파일을 저장한 뒤 웹사이트나 앱 프로젝트에 바로 적용하세요.
불필요한 메타데이터가 제거된 경량 SVG 파일은 최신 웹 및 앱 개발 파이프라인에 즉시 투입할 수 있습니다.
간결해진 <svg> 마크업을 JSX나 Vue 템플릿에 직접 붙여넣고, currentColor와 Tailwind CSS 클래스를 활용해 아이콘 색상과 크기를 동적으로 제어하세요.
코드 길이가 최대 80% 줄어들어 CSS background-image에 들어가는 data:image/svg+xml 문자열이 훨씬 짧아지고 스타일시트 로딩 속도가 향상됩니다.
편집기 전용 네임스페이스를 제거한 후 본 사이트의 "SVG PNG 변환" 또는 "아이콘 생성기"에 넣으면 복잡한 XML 속성으로 인한 렌더링 오류를 예방할 수 있습니다.
일반적인 정적 아이콘과 일러스트는 8가지 옵션을 모두 켜도 안전하지만, 아래와 같은 특수한 경우에는 특정 옵션을 해제하고 실행하세요.
"숨겨진 요소 제거"가 켜져 있으면 display="none"이나 opacity="0" 상태인 노드가 삭제되어, 나중에 스크립트로 나타나게 하려는 애니메이션이 작동하지 않습니다.
인터랙티브 애니메이션용 SVG를 최적화할 때는 "숨겨진 요소 제거"와 "편집기 데이터 제거" 체크를 해제한 후 파일을 업로드하세요.
전체 아이콘 좌표가 12×12 같은 작은 격자 안에 들어 있을 때 좌표를 반올림하면 베지어 곡선 제어점이 상대적으로 크게 이동하여 매끄러움이 줄어들 수 있습니다.
16×16 미만의 초소형 viewBox 아이콘은 "숫자 반올림" 옵션을 끄거나, 디자인 툴에서 아트보드를 24×24 또는 512×512로 키워서 내보내세요.
디자인 프로그램에 PNG 스크린샷을 붙여넣고 SVG로 저장하면 파일 용량의 99%가 Base64 텍스트 데이터이므로 XML 태그를 정리해도 용량이 거의 줄지 않습니다.
비트맵 이미지는 본 사이트의 "PNG 압축 도구"로 압축하거나, 일러스트레이터의 이미지 추적(Image Trace) 기능으로 실제 벡터 패스로 변환하세요.
작업 목적에 따라 코드 압축, 시각적 디버깅, 또는 비트맵 변환 도구를 선택하세요.
| 비교 항목 | SVG 최적화 도구 (현재 도구) | 온라인 SVG 뷰어 및 코드 검사 | SVG PNG 변환 / 일괄 변환기 |
|---|---|---|---|
| 핵심 목적 | 불필요한 XML 코드와 메타데이터를 제거해 .svg 파일 크기 축소 | 투명 격자/다크 배경 미리보기, viewBox 확인 및 XML 코드 정렬 | 벡터 .svg 파일을 지정한 픽셀 해상도의 PNG/JPG/WebP로 변환 |
| 출력 파일 형식 | 가벼워진 .svg 벡터 파일 (무한 확대해도 깨지지 않음) | 읽기 쉽게 들여쓰기된 XML 소스 코드 및 크기 정보 | .png / .jpg / .webp 비트맵 이미지 (또는 .zip 압축 파일) |
| 파일 크기에 미치는 영향 | 화질 변화 없이 원본 용량을 40%~80% 절감 | 용량 압축 대신 한 줄로 뭉친 코드를 사람이 읽기 쉽게 포맷팅 | 설정한 출력 픽셀 크기(예: 1024px, 4K)에 따라 결정됨 |
| 가장 적합한 사용 시점 | 웹사이트 및 앱 배포 전 아이콘과 일러스트 용량 최적화 | SVG 깨짐 현상, 여백 잘림(viewBox), 어두운 배경 대비 확인 | SVG 업로드를 지원하지 않는 문서, 쇼핑몰, SNS에 로고 등록 시 |
전혀 그렇지 않습니다. SVG는 수학적 좌표로 그려지는 벡터 포맷입니다. 본 도구는 렌더링에 영향을 주지 않는 XML 주석, 편집기 기록(Adobe XMP 등), 미사용 네임스페이스만 제거하므로 아무리 확대해도 원본과 동일하게 선명합니다.
두 가지 이유가 대표적입니다. 첫째, 이미 SVGO 등의 빌드 도구로 한 번 압축된 파일인 경우입니다. 둘째, SVG 파일 내부에 실제 벡터 패스 대신 Base64 비트맵 이미지(<image> 태그)가 들어 있는 경우입니다. "SVG 뷰어"에서 코드를 열어 긴 base64 문자열이 있는지 확인해 보세요.
원본 파일에 숨김 속성이나 빈 속성을 가진 레이어가 포함되어 있었을 가능성이 높습니다. "최적화 옵션"에서 "숨겨진 요소 제거"와 "빈 속성 제거" 체크박스를 해제한 뒤 다시 파일을 업로드하면 정상적으로 유지됩니다.
100% 안전합니다. 모든 XML 파싱과 코드 압축 과정은 사용자의 웹 브라우저 내부(JavaScript)에서만 처리되며, 외부 서버로 파일이 전송되거나 저장되지 않습니다.
네, 가능합니다. 수십 개의 .svg 파일을 동시에 드롭 영역에 끌어다 놓으면 각 파일별 원본 크기, 압축 후 크기, 절감률 리포트와 개별 다운로드 버튼이 즉시 생성됩니다.
각 작업에 최적화된 브라우저 기반 이미지 및 벡터 도구를 바로 이용해 보세요.
투명/어두운 배경에서 SVG를 미리 보고, viewBox 및 크기 속성을 확인하며 XML 코드를 포맷팅합니다.
투명 배경을 유지하며 SVG를 고화질 PNG로 변환합니다. 사용자 지정 픽셀 크기 및 300 DPI 인쇄 설정을 지원합니다.
수십~수백 개의 SVG 파일을 한 번에 PNG, JPG, WebP로 일괄 변환하여 ZIP 파일로 다운로드합니다.
하나의 이미지로 웹사이트용 favicon.ico와 iOS, Android, Windows 앱 아이콘 패키지를 생성합니다.