From c4bb13d23e280444ed9e30bd8d1a2c56641f7aa3 Mon Sep 17 00:00:00 2001 From: Florian Lefebvre Date: Wed, 15 Apr 2026 10:41:26 +0200 Subject: [PATCH 1/9] feat: svg optimizer --- .../experimental-flags/svg-optimization.mdx | 242 +++++++++--------- 1 file changed, 128 insertions(+), 114 deletions(-) diff --git a/src/content/docs/en/reference/experimental-flags/svg-optimization.mdx b/src/content/docs/en/reference/experimental-flags/svg-optimization.mdx index 5a9c2c9229667..7d6e5a9e6d0c5 100644 --- a/src/content/docs/en/reference/experimental-flags/svg-optimization.mdx +++ b/src/content/docs/en/reference/experimental-flags/svg-optimization.mdx @@ -9,30 +9,30 @@ import Since from '~/components/Since.astro'

-**Type:** `boolean | object`
+**Type:** `SvgOptimizer`
**Default:** `false`

-This experimental feature enables automatic optimization of your [SVG components](/en/guides/images/#svg-components) using [SVGO](https://svgo.dev/) during build time. +This experimental feature enables automatic optimization of your [SVG components](/en/guides/images/#svg-components) at build time. 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. -To enable this feature with default settings, set it to `true` in your Astro config: +To enable this feature, specify `svgOptimizer` in your Astro config: ```js title="astro.config.mjs" ins={5} -import { defineConfig } from "astro/config" +import { defineConfig, svgoOptimizer } from "astro/config" export default defineConfig({ experimental: { - svgo: true + svgOptimizer: svgoOptimizer() } }) ``` ## Usage -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: +No change to using SVG components is required to take advantage of this feature. With experimental SVG optimizaion enabled, all your SVG component import files will be automatically optimized: ```astro title="src/pages/index.astro" --- @@ -46,32 +46,36 @@ The SVG will be optimized during the build process, resulting in smaller file si 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 an [SVGO configuration object](https://github.com/svg/svgo#configuration) to customize optimization behavior: +Astro provides one built-in optimizer using [SVGO](https://svgo.dev/): -```js title="astro.config.mjs" -export default defineConfig({ - experimental: { - svgo: { - multipass: true, - floatPrecision: 2, - plugins: [ - 'preset-default', - 'removeXMLNS', - { - name: "removeXlink", - params: { - includeLegacy: true - } - } - ] +```js +import { svgoOptimizer } from "astro/config" +``` + +### Configuration + +You can pass a [configuration object](https://github.com/svg/svgo#configuration) to customize optimization behavior: + +```js +svgoOptimizer({ + multipass: true, + floatPrecision: 2, + plugins: [ + 'preset-default', + 'removeXMLNS', + { + name: "removeXlink", + params: { + includeLegacy: true + } } - } + ] }) ``` -### `plugins` +#### `plugins` **Type:** `Array`
**Default:** `[]` @@ -82,55 +86,47 @@ This can include SVGO's [`preset-default`](https://svgo.dev/docs/preset-default/ To use a plugin’s default configuration, add its name to the array. If you need more control, use the `overrides` parameter to customize specific plugins within `preset-default`, or pass an object with a plugin's `name` to override its individual parameters. -```js title="astro.config.mjs" -export default defineConfig({ - experimental: { - svgo: { - plugins: [ - { - name: 'preset-default', - params: { - overrides: { - convertPathData: false, - convertTransform: { - degPrecision: 1, - transformPrecision: 3 - }, - inlineStyles: false - }, +```js +svgoOptimizer({ + plugins: [ + { + name: 'preset-default', + params: { + overrides: { + convertPathData: false, + convertTransform: { + degPrecision: 1, + transformPrecision: 3 }, + inlineStyles: false }, - 'removeXMLNS', - { - name: "removeXlink", - params: { - includeLegacy: true - } - } - ] + }, + }, + 'removeXMLNS', + { + name: "removeXlink", + params: { + includeLegacy: true + } } - } + ] }) ``` -### Other configuration options +#### Other configuration options There are a few [SVGO configuration options](https://github.com/svg/svgo/blob/66d503a48c6c95661726262a3068053c429b06a9/lib/types.ts#L335), especially `floatPrecision` and `multipass`, that can be passed directly to your config object: -```js title="astro.config.mjs" -export default defineConfig({ - experimental: { - svgo: { - multipass: true, - floatPrecision: 2 - } - } +```js +svgoOptimizer({ + multipass: true, + floatPrecision: 2, }) ``` The `multipass` option sets whether to run the optimization engine multiple times until no further optimizations are found. The `floatPrecision` option sets the number of decimal places to preserve globally, but can be overridden for a specific plugin by specifying a custom value in its `params` property. -## Common use cases +### Common use cases SVGO provides an extensive [default plugin list](https://svgo.dev/docs/preset-default/) with opinionated optimizations. While using this preset is more convenient than adding each plugin individually, you may need to customize it further. For example, it may remove items or clean up too aggressively for your situation, especially when using animations. @@ -138,23 +134,19 @@ SVGO provides an extensive [default plugin list](https://svgo.dev/docs/preset-de You may want to preserve certain SVG attributes and elements, such as `