잠시만 기다려 주세요...(/)
현재 이미지를 최적화하고 있습니다. 최고의 품질 결과를 보장하기 위해 잠시만 기다려 주세요.
이미지를 성공적으로 압축했습니다.
최적화된 이미지.
SVG 이미지 온라인 압축
메타데이터 제거, 벡터는 그대로: SVG가 정확히 동일하게 렌더링됩니다
최적화 중...
편집기가 남긴 흔적까지 삭제해 SVG 파일 압축하기
SVG 파일을 메모장으로 열어보면 모든 내용이 보입니다: 태그, 숫자, 텍스트. 이것이 바로 SVG 포맷의 본질입니다. 픽셀도, 사진도 없고, 오직 도형을 그리기 위한 명령어만 있습니다. 이 점이 압축의 의미를 다르게 만듭니다. 무언가를 억지로 줄이거나 근사치로 바꾸는 것이 아니라, 불필요한 텍스트만 깔끔하게 제거되고 실제 그림에는 아무런 영향이 없습니다.
용량의 진짜 원인
실제로 파일 용량의 대부분은 그림이 아닙니다. Illustrator, Figma, Inkscape에서 로고를 내보내면 파일에는 편집기가 남긴 각종 정보가 따라옵니다: 생성기 주석, 2008년 이후로 아무도 필요로 하지 않은 DOCTYPE, XML 선언, 문서를 설명하는 RDF 메타데이터 블록, 레이어 이름, 그리고 아무 요소도 사용하지 않는 클래스가 가득한 스타일 블록까지. 실제 테스트한 로고의 경우, 이런 정보들이 파일의 약 3분의 2를 차지했습니다. 도형 자체는 아주 작은 부분에 불과했습니다.
그리고 숫자도 문제입니다. 편집기는 좌표를 항상 완전한 부동소수점 정밀도로 기록합니다. 그래서 위치가 10이고 너비가 180인 사각형도 10.000000, 180.00000000처럼 저장됩니다. 모든 경로의 모든 점에 이런 식으로 소수점이 붙으니, 소수점 데이터만으로도 그림보다 용량이 더 커질 수 있습니다.
벡터이기 때문에 품질 저하가 없습니다
많은 분들이 걱정하지만, 사실 걱정할 필요가 없습니다. SVG는 해상도가 없습니다. 어떤 크기로 표시되든 항상 새롭게 그려지기 때문에, 16픽셀 파비콘이든 대형 광고판이든 똑같이 선명합니다. 메타데이터 블록을 지운다고 해서 이 점이 달라지지 않습니다. 압축 후 파일도 업로드한 파일과 똑같이 자유롭게 크기 조절이 가능하고, 모든 크기에서 동일하게 보이며, 원래 사용하던 프로그램에서 그대로 편집할 수 있습니다.
무엇이 제거되는가
정리 작업은 신중하게 설계되어 렌더링에 영향을 주지 않는 부분만을 대상으로 합니다.
| 제거됨 | 유지됨 |
|---|---|
| 편집기 주석 및 생성기 문자열 | 모든 도형, 경로, 곡선 |
| 메타데이터 블록 및 RDF 네임스페이스 | 색상, 그라디언트, 투명도 |
| DOCTYPE 및 XML 선언 | 텍스트 요소 및 폰트 |
| 참조되지 않는 정의 | 사용 중인 필터, 마스크, 클리핑 경로 |
| 비어 있는 그룹 및 레이어 | 변환(Transform) 및 viewBox |
| 좌표의 불필요한 소수점 | 보이는 결과를 바꾸는 모든 것 |
사진보다 SVG가 더 작아야 하는 이유
SVG는 보통 로고나 아이콘으로 사용되며, 사이트의 모든 페이지 헤더에 들어가고 가장 먼저 로드됩니다. 사진은 나중에, 그리고 느리게 로드되지만 아이콘은 그렇지 않습니다. 헤더 로고에서 몇 KB만 줄여도 페이지 속도 점수에는, 기사 중간에 있는 이미지에서 같은 용량을 줄이는 것보다 훨씬 더 큰 영향을 줍니다. 헤더가 로드되어야 브라우저가 화면을 그릴 수 있기 때문입니다.
배포 전에 한 번 확인할 점
정리 과정에서 파일 내부의 id 속성이 짧아집니다. 같은 SVG 내에서의 참조는 모두 맞게 업데이트되어 그라디언트, 마스크, 클리핑 경로가 그대로 동작하고 그림도 변함없이 렌더링됩니다. 하지만 파일 외부의 코드는 알 수 없습니다. 만약 SVG가 다른 페이지에서 참조하는 아이콘 스프라이트로 사용되거나, 스타일시트나 스크립트가 id로 요소를 찾는다면, 파일을 교체한 뒤 해당 부분을 꼭 테스트해보세요. 일반적인 로고나 내보낸 아이콘처럼 대부분의 SVG는 별도로 확인할 필요가 없습니다.
SVG에 사진이 포함된 경우
가끔 SVG가 진짜 벡터가 아닐 때도 있습니다. Illustrator에서 아트보드에 사진을 올리고 SVG로 내보내면, 그 사진은 XML 내부에 긴 base64 문자열로 삽입됩니다. 도형이 하나뿐이어도 파일 크기가 2MB가 넘을 수 있습니다. 이 경우 마크업 정리는 해당 블록을 건드리지 않습니다. 그 부분은 마크업이 아니기 때문입니다. 압축 후에도 파일 크기가 거의 줄지 않고, 처음부터 사진이 포함되어 있었다면, 이미지를 분리해서 JPEG 또는 PNG로 따로 압축하는 것이 해결책입니다.
설정할 필요 없음
옵션도, 압축 단계도, 고급 설정도 없습니다. 파일을 업로드하면 바로 정리된 파일을 받을 수 있습니다. 여러 개를 한 번에 올려도 마찬가지로 동작하며, 각각 완료되는 대로 받거나 전체를 ZIP 파일로 내려받을 수 있습니다.
파일은 어떻게 처리되나요?
파일은 암호화된 연결을 통해 전송되고, 정리 작업 후 1시간 뒤 서버에서 삭제됩니다. 아무것도 보관하지 않으며, 다른 용도로 사용하지도 않습니다.
MiniPNG에서 얻을 수 있는 것
- 편집기 메타데이터, 생성기 주석, DOCTYPE, 미사용 정의 제거
- 좌표는 9자리 소수점 대신 적절한 정밀도로 반올림
- 여전히 무한히 확대/축소 가능하고, 편집기에서 열리는 파일
- 모든 크기에서 원본과 동일하게 렌더링되는 결과, 직접 검증
- 여러 파일 동시 업로드, 개별 또는 ZIP으로 일괄 다운로드
- 계정 불필요, 설치 불필요, 1시간 후 서버에서 파일 자동 삭제
다음 단계는?
비트맵 버전 로고도 함께 작업 중이신가요? PNG 압축은 투명 배경 버전에, WebP 압축은 최신 포맷에 적합합니다. 만약 SVG에 사진이 숨어 있었다면, JPG 압축에서 이미지를 따로 처리하세요.
자주 묻는 질문
아니요, 그럴 수 없습니다. SVG는 픽셀이나 해상도가 없습니다. 이미지를 표시할 때마다 브라우저가 새로 그리는 명령어 집합이기 때문에, 휴대폰에서도 대형 광고판에서도 똑같이 선명합니다. 파일을 정리하면 주석, 메타데이터 등 그림에 영향을 주지 않는 텍스트만 삭제됩니다. 도형, 곡선, 색상은 그대로 남아 모든 크기에서 동일하게 렌더링됩니다.
편집기가 추가한 각종 정보가 제거됩니다. Illustrator, Figma, Inkscape는 모두 생성기 주석, XML 선언, DOCTYPE, RDF 메타데이터 블록, 레이어 이름, 그리고 아무도 사용하지 않는 클래스가 가득한 스타일 블록을 기록합니다. 게다가 좌표도 항상 완전한 정밀도로 저장되어 180이라는 값도 180.00000000처럼 남습니다. 일반적으로 내보낸 로고의 경우 이런 정보가 파일의 약 3분의 2를 차지합니다. 실제 그림을 그리는 부분은 아주 작습니다.
네, 가능합니다. 결과물은 일반 SVG이므로 Illustrator, Figma, Inkscape 또는 텍스트 편집기에서 원본과 똑같이 열립니다. 차이점은 편집기의 자체 정보 일부가 사라져서, 레이어 이름 등이 원래와 다를 수 있다는 점뿐입니다. 그림 자체는 변하지 않으며 완전히 편집 가능합니다.
주로 두 가지 이유가 있습니다. 이미 최적화된 SVG이거나(내보내는 과정에서 정리되었거나 이미 최적화 도구를 거친 경우), 파일에 사진이 포함된 경우입니다. 두 번째 경우가 흔히 문제인데, Illustrator에서 아트보드에 사진을 올리고 SVG로 내보내면, 사진이 XML 내부에 base64 블록으로 삽입됩니다. 이 블록은 마크업이 아니라 이미지 데이터이므로, 정리 작업으로는 건드릴 수 없습니다. 2MB짜리 SVG가 거의 줄지 않았다면, 텍스트 편집기로 열어 data:image로 시작하는 긴 문자열이 있는지 확인해보세요.
영향을 줄 수 있으니 배포 전에 알아두는 것이 좋습니다. 정리 과정에서 파일 내부 id 속성이 짧아집니다. 같은 SVG 내 참조는 모두 맞게 업데이트되어 그라디언트, 마스크, 클리핑 경로가 그대로 동작하고 그림도 변함없이 렌더링됩니다. 하지만 파일 외부의 코드(스타일시트가 id로 요소를 지정하거나, 자바스크립트가 특정 노드를 애니메이션 처리하거나, 다른 페이지에서 스프라이트로 참조하는 경우 등)는 다를 수 있으니, 파일을 교체한 후 꼭 테스트해보세요. 독립된 로고나 내보낸 아이콘처럼 대부분의 SVG는 별도 걱정이 필요 없습니다.
네, 두 방식은 경쟁하는 것이 아니라 함께 사용하면 더 좋습니다. 이 정리 작업은 파일에 불필요한 텍스트를 제거하고, gzip(웹 서버가 파일 전송 시 적용)은 남은 텍스트를 추가로 압축합니다. 둘을 함께 쓰는 것이 일반적이며, 결과적으로 둘 중 하나만 쓸 때보다 더 작은 파일이 됩니다. 또한 서버에서 image/svg+xml 콘텐츠 타입에 대해 압축이 실제로 활성화되어 있는지도 확인하는 것이 좋습니다. 일부 기본 설정은 HTML, CSS, JavaScript만 압축하기 때문입니다.