实验性 SVG 优化

类型：boolean | object
默认：false

¥Type: boolean | object
Default: false

Added in: astro@5.16.0 新

此实验性功能可在构建时使用 SVGO 自动优化你的 SVG 组件。

¥This experimental feature enables automatic optimization of your SVG components using SVGO during build time.

启用此功能后，用作组件的导入 SVG 文件将进行优化，以减小文件大小并提高性能，同时保持视觉质量。此功能可以通过移除不必要的元数据、注释和冗余代码，显著减小 SVG 资源的大小。

¥When enabled, your imported SVG files used as components will be optimized for smaller file sizes and better performance while maintaining visual quality. This can significantly reduce the size of your SVG assets by removing unnecessary metadata, comments, and redundant code.

要使用默认设置启用此功能，请在 Astro 配置中将其设置为 true：

¥To enable this feature with default settings, set it to true in your Astro config:

astro.config.mjs

import { defineConfig } from "astro/config"

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

用法

¥Usage

使用 SVG 组件无需任何更改即可利用此功能。启用实验性 svgo 后，所有 SVG 组件导入文件都将自动优化：

¥No change to using SVG components is required to take advantage of this feature. With experimental svgo enabled, all your SVG component import files will be automatically optimized:

src/pages/index.astro

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

<Logo />

SVG 将在构建过程中进行优化，从而减小生产版本的文件大小。

¥The SVG will be optimized during the build process, resulting in smaller file sizes in your production build.

请注意，此优化适用于项目中的每个 SVG 组件导入。无法按组件单独选择退出。

¥Note that this optimization applies to every SVG component import in your project. It is not possible to opt out on a per-component basis.

配置

¥Configuration

你可以传递一个 SVGO 配置对象 来自定义优化行为：

¥You can pass a SVGO configuration object to customize optimization behavior:

astro.config.mjs

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

plugins

类型：Array<string | PluginConfig>
默认：[]

¥Type: Array<string | PluginConfig>
Default: []

用于优化 SVG 组件导入的 SVGO 插件 数组。

¥An array of SVGO plugins that will be used to optimize your SVG component imports.

此功能可以包含任何按 ID 名称指定的插件，包括 SVGO 的 preset-default 插件集合。插件可以选择性地作为包含其 name 和 active 状态的对象传递，以便根据需要启用或禁用。

¥This can include any plugins by ID name, including SVGO’s preset-default collection of plugins. A plugin can optionally be passed as an object including both its name and active status, to enable or disable as necessary.

astro.config.mjs

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

其他配置选项

¥Other configuration options

你还可以将 其他 SVGO 配置选项（例如 floatPrecision 和 multipass）直接传递给你的配置对象：

¥You can also pass other SVGO configuration options, such as floatPrecision and multipass, directly to your config object:

astro.config.mjs

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

常见用例

¥Common use cases

SVGO 提供了一个功能强大的 默认插件列表，其中包含预设的优化方案，比单独添加每个插件更加便捷。但是，你可能需要根据自身需求进行进一步的自定义。例如，它可能会删除项目或进行过于激进的清理，以适应你的实际情况。

¥SVGO provides an extensive default plugin list with opinionated optimizations that is more convenient than adding each plugin individually. However, you may need to customize it further for your needs. For example, it may remove items or clean up too aggressively for your situation.

保留特定属性

¥Preserve specific attributes

你可能需要保留某些 SVG 属性，例如 SVGO 默认移除的 viewBox：

¥You may want to preserve certain SVG attributes, such as the viewBox, that SVGO removes by default:

astro.config.mjs

export default defineConfig({
  experimental: {
    svgo: {
      plugins: [
        'preset-default',
        {
          name: 'removeViewBox',
          active: false // Preserve viewBox attribute
        }
      ]
    }
  }
})

移除特定元素

¥Remove specific elements

你可以配置插件以删除特定的不需要的元素，例如元数据或隐藏层。请注意，许多插件已包含在 preset-default 中，因此你通常只需配置它们的行为：

¥You can configure plugins to remove specific unwanted elements like metadata or hidden layers. Note that many plugins are already included in preset-default, so you typically only need to configure their behavior:

astro.config.mjs

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

自定义精度

¥Custom precision

控制路径数据中数值的精度：

¥Control the precision of numeric values in path data:

astro.config.mjs

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

工作原理

¥How it works

SVG 优化在构建过程中进行，而非运行时：

¥SVG optimization happens during the build process, not at runtime:

• 在开发模式下，SVG 文件不会进行优化，以确保更快的重建速度和更流畅的开发体验。

• 在生产版本中，所有导入的 SVG 文件都会在构建过程中进行一次优化，从而减小文件大小。

• 无运行时开销 - 优化的 SVG 作为预处理静态资源提供。

虽然优化过程可能会略微增加构建时间，但最终会减小文件大小并加快页面加载速度，从而为用户带来更好的体验。

¥While the optimization process may slightly increase your build times, the result is smaller file sizes and faster page loads for your users.

进一步阅读

¥Further reading

• SVGO 文档