SVG 최적화 (SVGO)

처음 쓸 때 최적화 엔진(약 0.9MB)을 한 번 받아요. 아이콘처럼 CSS·자바스크립트로 ID를 쓰는 SVG라면 ‘ID 유지’를 켜세요.

입력한 내용은 서버로 보내지 않고 이 기기에서만 처리돼요

SVG 파일을 끌어 놓거나 눌러서 고르세요
여러 개 가능 · 아래 칸에 코드를 붙여넣어도 돼요

SVG 코드

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with an editor -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120px" height="120px" viewBox="0 0 120 120" version="1.1">
  <title>별 아이콘</title>
  <metadata><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"/></metadata>
  <defs><linearGradient id="unused"><stop offset="0" stop-color="#000"/></linearGradient></defs>
  <g id="Layer_1" fill="none" stroke="none">
    <g transform="translate(0.000000, 0.000000)">
      <rect x="0.000000" y="0.000000" width="120.000000" height="120.000000" rx="24.000000" fill="#1B64DA" fill-opacity="1.000000"></rect>
      <polygon fill="#FFFFFF" points="60.0000 22.0000 71.7557 45.8197 98.0423 49.6393 79.0211 68.1803 83.5114 94.3607 60.0000 82.0000 36.4886 94.3607 40.9789 68.1803 21.9577 49.6393 48.2443 45.8197"></polygon>
    </g>
  </g>
</svg>

소수점 자릿수

반복 더 줄어들 때까지 여러 번

출력 보기 좋게 줄바꿈

viewBox 유지 (크기 조절용, 권장) <title> 유지 (접근성) ID 유지 width·height 지우기

결과

원본

최적화

최적화된 코드

SVG가 무거운 이유

디자인 프로그램에서 내보낸 SVG에는 화면에 아무 영향이 없는 것들이 많이 들어 있어요. 프로그램 이름이 적힌 주석, 편집용 메타데이터와 레이어 이름, 쓰지 않는 그라데이션 정의, 기본값과 같은 속성(fill-opacity="1"), 120.000000처럼 필요 없이 긴 숫자, 빈 그룹 같은 것들이에요. 이 도구는 개발자들이 가장 많이 쓰는 오픈소스 최적화 도구 SVGO(MIT 라이선스, 버전 3.3)를 브라우저에서 돌려 이런 부분을 지우고 경로 데이터를 더 짧은 표기로 다시 써요. 아이콘·로고는 보통 30~70% 줄어요.

옵션 고르기

소수점 자릿수: 좌표를 반올림할 자리예요. 기본 3자리면 눈으로 구별되지 않고, 큰 그림을 1자리로 줄이면 모양이 미세하게 달라질 수 있어 미리보기로 확인하세요.
viewBox 유지: SVGO 기본 설정은 viewBox를 지우기도 하는데, 그러면 CSS로 크기를 바꿀 때 그림이 잘려요. 그래서 기본으로 켜 두었어요.
<title> 유지: 화면 읽기 프로그램이 읽는 이름이라 기본으로 남겨요. ID 유지는 CSS·자바스크립트·<use>로 ID를 참조할 때 켜세요.
width·height 지우기: 크기를 CSS로만 정할 아이콘에 좋아요. viewBox가 있어야 비율이 유지돼요.

확인과 저장

원본과 결과를 나란히 그려 모양이 같은지 바로 비교할 수 있어요. 시험에서는 원본과 결과를 같은 크기로 그려 픽셀을 비교해 차이가 없는지 확인했어요. 여러 파일을 한꺼번에 넣으면 표로 줄어든 크기를 보여 주고 ZIP으로 묶어 저장해요. 파일은 이 브라우저에서만 처리되고 서버로 올라가지 않아요.

참고한 자료

자주 묻는 질문

최적화했더니 모양이 깨졌어요.

소수점 자릿수를 3이나 4로 올리고, 자바스크립트·CSS가 ID를 쓰면 ‘ID 유지’를 켜 보세요. 그래도 다르면 ‘여러 번 반복’을 끄세요.

래스터 이미지(PNG)가 들어 있는 SVG도 줄어드나요?

SVG 안에 넣은 PNG·JPG(data: 주소)는 그대로 둬요. 그런 파일은 이미지 압축 도구로 원본 이미지를 먼저 줄이세요.

압축(gzip)과는 무엇이 다른가요?

최적화는 코드 자체를 짧게 하는 것이고, 웹 서버의 gzip·brotli 압축은 전송할 때 한 번 더 줄이는 것이라 둘을 함께 쓰면 좋아요.

SVG가 무거운 이유

옵션 고르기

확인과 저장

참고한 자료

자주 묻는 질문

함께 쓰면 좋은 도구