SVG 최적화

사용법

1. SVG를 상자에 붙여넣거나 .svg 파일을 끌어다 놓으세요.
2. 최적화를 누르면 용량, gzip 용량, 양쪽 렌더링이 아래에 나타납니다.
3. 아직 크다면 정밀도를 낮추세요. 보통 소수점 1~2자리로도 눈에 띄지 않습니다.
4. CSS나 자바스크립트가 SVG 안의 요소를 가리킨다면 'ID 유지'를 켜세요.
5. 결과를 복사하거나 .svg로 내려받으세요.

자주 묻는 질문

제 SVG가 어딘가로 업로드되나요?

아니요. SVGO는 브라우저 탭 안에서, 상자에 있는 텍스트에 대해 실행됩니다. 서버로 전송되는 것이 없고, 탭을 닫으면 사본도 남지 않습니다.

두 미리보기가 똑같아 보입니다. 정상인가요?

네, 그게 목적입니다. 최적화는 그리지 않는 것을 없애고, 그리는 것은 더 짧은 형태로 다시 씁니다. 미리보기가 다르다면 없어진 무언가에 파일이 의존하고 있었다는 뜻이니, 정밀도를 올리거나 ID 유지를 켜고 다시 해보세요.

ID는 언제 유지해야 하나요?

SVG 바깥의 무언가가 ID를 가리킬 때입니다 — `#icon-star path` 같은 CSS, getElementById를 쓰는 자바스크립트, 다른 파일의 `<use href="#…">` 등이죠. SVGO는 기본적으로 용량을 아끼려고 ID를 짧게 바꾸는데, 그러면 이런 참조가 끊깁니다. 파일 하나로 완결된 경우에는 내부 참조가 함께 갱신되므로 어느 쪽이든 정상입니다.

정밀도 슬라이더는 정확히 무엇을 하나요?

패스 데이터의 숫자를 반올림합니다. 12.345678 같은 좌표는 3에서 12.346, 1에서 12.3이 됩니다. 화면에 쓰는 아이콘이라면 소수점 1~2자리로도 보통 구분되지 않으면서 패스가 절반으로 줄기도 합니다. 크거나 많이 확대하는 일러스트라면 너무 깎았을 때 곡선이 울렁이는 게 보입니다.

gzip 용량은 왜 보여주나요?

실제로 오가는 게 그 값이기 때문입니다. 웹 서버는 SVG를 압축해서 보내므로 원본 바이트 수는 절감을 과장합니다. 반복되는 공백을 없애는 건 디스크에서는 극적으로 보여도 gzip 뒤에는 거의 표시가 안 납니다. 정직한 비교는 gzip 쪽입니다.

width와 height는 빼는 게 좋나요?

인라인으로 넣고 CSS로 크기를 정한다면 빼세요. 주어진 상자를 채우게 됩니다. `<img>` 태그처럼 브라우저가 고유 크기를 필요로 하는 곳에 쓴다면 남겨두세요. 없으면 기본 크기로 그려질 수 있습니다. viewBox는 항상 유지됩니다 — 그것마저 없으면 확대·축소할 좌표계 자체가 사라집니다.

관련 도구