실험적 SVG 최적화

타입: boolean | object
기본값: false

추가된 버전: astro@5.16.0

이 실험적인 기능은 빌드 시점에 SVGO를 사용하여 SVG 컴포넌트를 자동으로 최적화합니다.

이 기능을 활성화하면 컴포넌트로 사용되는 SVG 파일이 시각적 품질을 유지하면서 더 작은 파일 크기와 더 나은 성능을 위해 최적화됩니다. 이를 통해 불필요한 메타데이터, 주석, 중복된 코드를 제거하여 SVG 자산의 크기를 크게 줄일 수 있습니다.

이 기능을 활성화하려면 Astro 구성에서 true로 설정하세요.

import { defineConfig } from "astro/config"

export default defineConfig({
  experimental: {
    svgo: true
  }
})

사용 방법

이 기능을 활용하기 위해 SVG 컴포넌트의 사용 방법을 변경할 필요는 없습니다. 실험적 svgo를 활성화하면 가져온 모든 SVG 컴포넌트 파일이 자동으로 최적화됩니다.

---
import Logo from '../assets/logo.svg';
---

<Logo />

SVG는 빌드 과정에서 최적화되어 프로덕션 빌드 시 파일 크기를 줄입니다.

이 최적화는 프로젝트 내 모든 SVG 컴포넌트 가져오기에 적용됩니다. 특정 컴포넌트를 제외할 수는 없습니다.

구성

최적화 동작을 사용자 정의하기 위해 SVGO 구성 객체를 전달할 수 있습니다.

export default defineConfig({
  experimental: {
    svgo: {
      multipass: true,
      floatPrecision: 2,
      plugins: [
        'preset-default',
        'removeXMLNS',
        {
          name: "removeXlink",
          params: {
            includeLegacy: true
          }
        }
      ]
    }
  }
})

`plugins`

타입: Array<string | PluginConfig>
기본값: []

SVG 컴포넌트 가져오기를 최적화하는 데 사용될 SVGO 플러그인의 배열입니다.

여기에는 SVGO의 preset-default 플러그인 컬렉션, 개별 내장 플러그인 또는 커스텀 플러그인이 포함될 수 있습니다.

플러그인의 기본 구성을 사용하려면 배열에 이름을 추가하세요. 더 세밀하게 제어하려면 overrides 매개변수를 사용하여 preset-default 내의 특정 플러그인을 사용자 정의하거나, 플러그인의 name이 포함된 객체를 전달하여 개별 매개변수를 재정의하세요.

export default defineConfig({
  experimental: {
    svgo: {
      plugins: [
        {
          name: 'preset-default',
          params: {
            overrides: {
              convertPathData: false,
              convertTransform: {
                degPrecision: 1,
                transformPrecision: 3
              },
              inlineStyles: false
            },
          },
        },
        'removeXMLNS',
        {
          name: "removeXlink",
          params: {
            includeLegacy: true
          }
        }
      ]
    }
  }
})

기타 구성 옵션

특히 floatPrecision 및 multipass를 비롯하여 구성 객체에 직접 전달할 수 있는 몇 가지 SVGO 구성 옵션이 있습니다.

export default defineConfig({
  experimental: {
    svgo: {
      multipass: true,
      floatPrecision: 2
    }
  }
})

multipass 옵션은 더 이상 최적화할 수 없을 때까지 최적화 엔진을 여러 번 실행할지 여부를 설정합니다. floatPrecision 옵션은 전역적으로 유지할 소수점 자릿수를 설정하지만, 플러그인의 params 속성에 사용자 정의 값을 지정하여 특정 플러그인에 대해 재정의할 수 있습니다.

일반적인 사용 사례

SVGO는 권장되는 최적화가 포함된 광범위한 기본 플러그인 목록을 제공합니다. 이 프리셋을 사용하는 것이 각 플러그인을 개별적으로 추가하는 것보다 편리하지만, 추가적인 사용자 정의가 필요할 수 있습니다. 예를 들어, 특히 애니메이션을 사용하는 경우 상황에 따라 항목을 매우 공격적으로 제거하거나 정리할 수 있습니다.

특정 속성 유지하기

SVGO가 기본적으로 인라인화하거나 제거하는 <style>과 같은 특정 SVG 속성 및 요소를 유지하고 싶을 수 있습니다.

export default defineConfig({
  experimental: {
    svgo: {
      plugins: [
        {
          name: 'preset-default',
          params: {
            overrides: {
              inlineStyles: false, // CSP 해싱을 위해 스타일 요소를 유지합니다
              removeDesc: false // 내용에 관계없이 요소를 유지합니다
            }
          }
        }
      ]
    }
  }
})

특정 요소 제거하기

플러그인을 구성하여 메타데이터 또는 숨겨진 레이어와 같이 원치 않는 특정 요소를 제거할 수 있습니다. 많은 플러그인이 이미 preset-default에 포함되어 있으므로 해당 동작만 구성하면 됩니다.

export default defineConfig({
  experimental: {
    svgo: {
      plugins: [
        'preset-default',
        {
          name: 'removeMetadata',
          active: true
        }
      ]
    }
  }
})

현대적인 HTML5에서의 인라인화를 위한 최적화

인라인 SVG는 xmlns 속성이 필요하지 않으며 SVG 2 사양으로 안전하게 변환될 수 있습니다. 이러한 목적으로 removeXMLNS 및 removeXlink 플러그인을 사용하는 것을 권장합니다:

export default defineConfig({
  experimental: {
    svgo: {
      plugins: [
        'preset-default',
        'removeXMLNS',
        {
          name: "removeXlink",
          params: {
            includeLegacy: true
          }
        }
      ]
    }
  }
})

동작 방식

SVG 최적화는 런타임이 아닌 빌드 과정에서 발생합니다.

개발 모드에서는 더 빠른 재빌드 시간과 원활한 개발 경험을 보장하기 위해 SVG 파일이 최적화되지 않습니다.
프로덕션 빌드에서는 가져온 모든 SVG 파일이 빌드 과정에서 한 번 최적화되어 파일 크기를 줄입니다.
런타임 오버헤드는 없으며, 최적화된 SVG는 사전 처리된 정적 자산으로 제공됩니다.

최적화 과정에서 빌드 시간이 약간 증가할 수 있지만, 사용자에게 더 작은 파일 크기와 더 빠른 페이지 로드를 제공합니다.

추가 자료

SVGO 문서

기여하기 커뮤니티 후원하기