SVG 파일 압축
SVGO로 편집기 찌꺼기를 없애고 경로 데이터를 줄이세요. 브라우저에서 바로 됩니다.
여기에 파일을 끌어다 놓으세요
또는
파일 선택SVG · JPG · PNG · GIF · TIFF · WebP
파일은 기기 밖으로 나가지 않습니다
압축기를 불러오는 중…
SVG 파일 압축 방법
파일 추가
상자에 파일을 끌어다 놓거나, 붙여넣거나, 기기에서 선택하세요. 아무것도 업로드되지 않습니다.
설정 확인
기본 프리셋은 대부분의 파일에 잘 맞습니다. 더 작은 파일이 필요하면 품질, 크기 또는 형식을 바꾸세요.
결과 다운로드
파일을 하나씩 저장하거나 모두 ZIP 하나로 받으세요. 더 작아지지 않는 파일은 원본이 그대로 유지됩니다.
SVG는 픽셀이 아니라 코드입니다
SVG(Scalable Vector Graphics) 파일은 경로, 원, 그러데이션, 텍스트 같은 도형을 설명하는 XML 텍스트 문서입니다. 픽셀 대신 그리는 방법을 담고 있으므로 16픽셀 파비콘부터 옥외 광고판까지 어떤 크기에서도 선명합니다. 웹의 아이콘, 로고, 일러스트, 차트, 지도는 SVG인 경우가 많으며, 이 형식은 2001년부터 W3C 표준입니다.
텍스트라는 점에는 부작용이 있습니다. 파일 크기가 그림이 표시되는 크기가 아니라 편집기가 얼마나 장황하게 썼는지에 따라 정해진다는 것입니다. 똑같이 보이는 두 SVG의 용량이 몇 배씩 차이 날 수도 있습니다.
SVG 파일을 필요 이상으로 무겁게 만드는 것
- 편집기 메타데이터. Illustrator, Inkscape, Figma, Sketch는 자체 네임스페이스, 레이어 이름, 내보내기 주석을 넣고, 때로는 편집 가능한 문서의 사본까지 포함합니다.
- 지나친 정밀도.
12.48로도 현실적인 어떤 크기에서든 똑같이 보이는데12.483920174같은 좌표를 씁니다. - 불필요한 구조. 빈 그룹, 숨긴 레이어, 기본 속성값, 쓰이지 않는 정의, 더 짧게 쓸 수 있는 스타일.
- 긴 경로 문법. 상대 명령이 더 짧은데 쓰인 절대 명령, 반복되는 명령 문자, 불필요한 공백.
- 포함된 비트맵. 일러스트에 붙여 넣은 사진은 SVG 안에 Base64 텍스트로 저장되며, 원래 이미지 파일보다 약 3분의 1 더 큽니다.
도구가 SVG를 최적화하는 방법
도구는 널리 쓰이는 오픈 소스 SVG 최적화 도구인 SVGO를 브라우저에서 실행합니다. 메타데이터와 주석을 제거하고, 쓸모없는 그룹을 합치고, 경로 데이터를 줄이고, 숫자를 기본적으로 소수점 3자리로 반올림하고(0–6자리 중 선택 가능), 스타일을 병합하며, 더 이상 바뀌는 것이 없을 때까지 이 과정을 반복합니다. 결과물은 여전히 어떤 편집기에서든 열 수 있고 HTML에 붙여 넣을 수 있는 일반 SVG입니다. 손으로 최적화한 아이콘부터 편집기 데이터가 가득한 Inkscape 내보내기 파일까지 SVG 8개로 테스트했을 때 8%에서 42%까지 줄었습니다.
최적화는 좁은 의미에서는 손실 압축입니다. 반올림으로 좌표가 아주 미세하게 바뀌고, 편집기 전용 데이터가 사라지므로 원래의 레이어를 모두 갖춘 상태로 파일을 다시 열 수는 없습니다. 디자인 도구의 원본 파일은 보관하고, 최적화한 SVG는 게시용으로 쓰세요.
서버는 보통 SVG를 gzip이나 Brotli로 압축해 보내므로, 브라우저로 가는 동안 텍스트가 한 번 더 줄어듭니다. 최적화와 서버 압축의 효과는 더해집니다. 제거된 데이터는 아예 압축할 필요조차 없기 때문입니다.
최적화한 SVG가 깨지는 경우
- CSS나 JavaScript가 요소를 찾지 못합니다. 최적화 도구는 파일 안에서 쓰이지 않는 것처럼 보이는 ID와 클래스 이름을 줄이거나 제거합니다. 페이지의 스타일이나 스크립트가 이를 참조한다면 게시 전에 결과를 확인하세요.
- 아이콘 크기가 더 이상 조절되지 않습니다. SVG가 제대로 크기를 바꾸려면
viewBox속성이 필요합니다. 도구는 이를 유지하므로 원본에 있었는지 확인하세요. 고정된 너비와 높이만 있는 SVG는 원래부터 크기 조절이 잘 되지 않았습니다. - 아주 작은 도형이 일그러져 보입니다. 큰 캔버스에 그린 아주 작은 아이콘은 반올림의 영향을 받을 수 있습니다. 기본 정밀도에서는 드문 일입니다.
- 파일 대부분이 포함된 사진입니다. 사진을 별도의 JPG나 WebP로 내보내 링크하거나, 그래픽 전체를 비트맵으로 변환하세요.
SVG에 관한 질문
최적화한 SVG는 다르게 보이나요?
일반적인 크기에서는 그렇지 않습니다. 도형, 색, 텍스트가 똑같이 표시됩니다. 확실하지 않다면 압축 전후 비교 화면에서 가는 선 같은 디테일을 확인하세요.
나중에 파일을 다시 편집할 수 있나요?
네, 어떤 벡터 편집기로도 열 수 있습니다. 사라지는 것은 레이어 이름이나 아트보드 같은 편집기 전용 정보이므로, 앞으로의 디자인 작업을 위해 원본을 보관하세요.
더 작게 만들려면 SVG를 PNG로 변환해야 하나요?
대개는 아닙니다. 깔끔한 아이콘 SVG는 몇 킬로바이트에 불과한 경우가 많고 어떤 화면에서도 선명합니다. 많은 이메일 프로그램과 일부 소셜 네트워크처럼 보낼 곳이 SVG를 받지 않을 때만 PNG로 변환하세요.
애니메이션이 있는 SVG를 최적화해도 안전한가요?
파일 안의 SMIL 및 CSS 애니메이션은 유지되지만, 외부 스크립트로 제어하는 애니메이션은 ID에 의존할 수 있습니다. 최적화한 파일을 실제로 쓰는 페이지에서 테스트하세요.
관련 페이지
비트맵 이미지는 이미지 압축기에서 처리합니다. 무엇이 로컬에서 실행되고 왜 그런지에 대한 배경은 작동 원리를 참고하세요.