Softonic

SVG를 압축합니다

단계 1 / 2
다음

Figma, Illustrator 또는 Sketch에서 내보낸 SVG 파일은 일반적으로 실제 필요보다 2~5배 더 많은 마크업을 포함하고 있습니다. 여기에는 편집기의 네임스페이스, 주석, 빈 그룹, 중복된 변환 기능 및 6자리 소수점 좌표 등이 포함됩니다. 이 도구는 SVG 파일을 SVGO 스타일로 처리하여 불필요한 요소를 제거하면서도 렌더링 결과의 픽셀 구조를 그대로 유지합니다.

SVG를 어떻게 압축할 수 있는가

  1. 1

    SVG를 붙여넣거나 업로드하세요

    원시 XML 텍스트 또는 .svg 파일을 받습니다.

  2. 2

    최적화 수준을 선택하세요

    안전(주석 및 편집기 메타데이터 제거), 강력(그룹 축소, 좌표 반올림, 경로 병합), 또는 사용자 정의.

  3. 3

    차이를 검토하세요

    변경 전후의 바이트 수를 비교하고, 렌더링 결과를 미리 확인하여 시각적으로 변화가 없음을 확인하세요.

  4. 4

    복사하거나 다운로드하세요

    최적화된 SVG 파일을 직접 코드에 붙여넣거나 파일로 저장하세요.

SVG를 부풀리는 요소들

Figma에서 내보낸 SVG 파일을 텍스트 편집기로 열면 일반적으로 다음과 같은 내용을 확인할 수 있습니다:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
     xmlns:sketch="..." width="24.000000" height="24.000000"
     viewBox="0 0 24.000000 24.000000" ...>
  <!-- Generator: Figma ... -->
  <title>icon</title>
  <desc>Created with Figma</desc>
  <g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
    <g id="icon" transform="translate(0.000000, 0.000000)">
      <path d="M12.000000,2.000000 L..." fill="#000000"/>
    </g>
  </g>
</svg>

거의 모든 줄을 제거할 수 있습니다. 렌더링 결과에는 svg, viewBox, path만 있으면 됩니다.

최적화 도구가 제거하는 항목

제거되는 항목 안전한 이유
XML 주석 렌더링되지 않음
편집기 네임스페이스 (sketch, figma) 브라우저가 사용하지 않음
<title> / <desc> (선택 사항) 접근성용 텍스트, 의미가 있으면 유지
빈 <g> 그룹 시각적 효과 없음
기본 속성 값 브라우저는 어차피 기본값을 사용함
항등 변환 translate(0,0)는 아무 작용도 하지 않음
좌표의 소수점 자릿수 소수점 3자리면 화면에서 동일하게 보임
사용되지 않은 ID 다른 곳에서 참조되는 ID만 유지

주의할 점

  • ID를 삭제하지 마세요. 채우기(fill), 마스크, 필터의 url(#...)이나 CSS에서 참조하는 ID가 대상입니다. 강력 모드에서는 그라디언트가 깨질 수 있습니다.
  • viewBox를 유지하세요. 이 항목이 없으면 SVG가 반응형으로 크기 조정되지 않습니다.
  • <title>을 유지하세요. 접근성을 위해 사용하는 경우입니다(스크린 리더가 이를 읽어 줍니다).
  • <use> 인스턴스 축약은 피하세요. 최적화 도구가 이를 인라인 처리하면 원본 기준이 되는 패턴이 사라질 수 있습니다.

압축이 실제로 바이트를 절약하는 경우

SVG는 텍스트이므로 서버의 gzip만으로도 이미 많은 중복이 제거됩니다. 압축하지 않았을 때 4KB에서 1KB로 줄어드는 SVG라도, 전송 시에는 1.2KB에서 0.7KB로만 줄어들 수 있습니다. 그래도 할 만한 가치가 있으며, 더 작은 원본은 읽기도 더 쉽습니다.

자주 묻는 질문

안전 모드에서는 그렇지 않습니다. 강력 모드는 CSS나 SMIL 애니메이션에서 참조하는 ID를 제거할 수 있습니다. SVG에 애니메이션이 있다면 안전 모드를 사용하거나 해당 ID를 수동으로 허용 목록에 추가하세요.

Figma/Illustrator에서 내보내는 파일은 일반적으로 50~80% 정도 압축됩니다. 수작업으로 생성된 SVG 파일은 이미 압축 효율이 높아 보통 10~20%만 감소합니다.

기본적으로는 ‘예’로 설정되어 있으며, <title>, <desc> 및 aria-* 속성은 유지됩니다. SVG 파일이 순전히 장식용이며 주변 HTML에서 레이블이 제공되는 경우 이러한 속성을 제거할 수 있습니다.

네, xmlns 속성은 SVG를 직접 HTML에 붙여넣을 때 필수이기 때문에 유지됩니다. 인라인 SVG는 일반적으로 작은 아이콘의 경우 가장 빠른 전달 방식입니다.

관련 도구

Material Design 색상 선택기

Material Design 색상 팔레트를 둘러보세요. 어떤 음영(50부터 A700까지)이든 HEX, RGB, HSL로 한 번에 복사합니다.

십자수 도안 만들기

JPEG, PNG, WebP를 10–150칸, 2–40가지 전용 색상, 기호, 정확한 스티치 수와 원단 크기가 포함된 인쇄용 십자수 도안으로 변환하세요.

이미지 포맷 변환기

브라우저에서 바로 이미지를 JPG, PNG, WebP로 변환하세요. 손실 형식의 품질을 조절하고 PNG와 WebP의 투명도는 그대로 유지됩니다.

Pantone to HEX 변환기

화면과 인쇄 매칭을 위해 Pantone PMS 색상을 가장 가까운 HEX, RGB, CMYK 값으로 변환하고 견본 미리보기를 제공합니다.

줄노트 용지 생성기

인쇄 가능한 줄노트 용지를 무료로 만드세요. 칼리지, 넓은 줄, 좁은 줄을 선택하고 줄 간격을 mm 단위로 설정하며 용지 크기와 여백선을 지정한 뒤 인쇄하거나 SVG로 다운로드하세요.

인스타그램 그리드 분할기

넓은 이미지를 3×3 인스타그램 그리드 또는 원하는 행 수로 나눕니다. 타일에는 번호가 매겨져 역순으로 업로드하기 쉽습니다.

이 도구는 다른 언어로도 제공됩니다