SVG 최적화
디자인 툴에서 내보낸 SVG의 불필요한 정보와 긴 소수점을 정리해 용량을 줄여요. 전후 용량과 모양을 나란히 비교하고, 코드를 복사하거나 파일로 저장해요.
SVG 파일 넣기파일 선택
원본-
최적화-
최적화 설정
줄어든 용량-
SVGO 엔진은 처음 쓸 때 한 번 불러와요.
파일은 이 기기 밖으로 나가지 않아요
사용 방법
1SVG 넣기SVG 파일을 끌어다 놓거나 코드를 붙여넣어요.
2설정 고르기소수점 자리를 줄일수록 가벼워져요. 모양이 달라지면 자릿수를 올리세요.
3비교 후 저장원본과 결과 모양이 같은지 확인하고 코드를 복사하거나 파일로 저장해요.
이런 때 쓰면 좋아요
디자인 툴에서 내보낸 SVG에는 편집기 정보, 빈 그룹, 쓰지 않는 정의, 소수점 여섯 자리 좌표처럼 화면에 보이지 않는 내용이 많이 들어 있어요. 아이콘 하나가 몇 KB씩 되면 페이지에 수십 개를 넣을 때 무시하기 어려운 용량이 돼요.
이 도구는 널리 쓰이는 오픈소스 최적화 엔진 SVGO를 브라우저에서 돌려서, 모양은 그대로 두고 필요 없는 코드만 덜어내요. 보통 30~70% 정도 줄어들어요. 원본과 결과를 나란히 보여 주니 모양이 바뀌지 않았는지 바로 확인할 수 있어요.
viewBox는 기본으로 남겨 둬요. 지우면 CSS로 크기를 바꿀 때 그림이 잘리거나 늘어날 수 있기 때문이에요.
자주 묻는 질문
최적화하면 모양이 바뀌나요?
대부분 그대로예요. 다만 소수점 자리를 0~1로 줄이면 작은 곡선이 미세하게 달라질 수 있어요. 미리보기에서 차이가 보이면 자릿수를 올리세요.
애니메이션이나 스크립트가 있는 SVG도 되나요?
기본 설정으로 대부분 유지되지만, id를 참조하는 CSS나 스크립트가 있다면 "id 이름 줄이기"를 끄세요.
결과가 원본보다 커질 수도 있나요?
이미 최적화된 SVG에 "여러 줄로 보기 좋게"를 켜면 줄바꿈 때문에 조금 커질 수 있어요.
여러 파일을 한 번에 할 수 있나요?
지금은 한 번에 한 파일씩 처리해요. 아이콘이 많다면 하나씩 넣고 저장하세요.