refactor: simplify svgo config

Author: azat-io

.changeset/cyan-tables-poke.md

@@ -6,29 +6,30 @@ Adds experimental SVGO optimization support for SVG assets
 
 Astro now supports automatic SVG optimization using SVGO during build time. This experimental feature helps reduce SVG file sizes while maintaining visual quality, improving your site's performance.
 
-To enable SVG optimization, add the following to your `astro.config.mjs`:
+To enable SVG optimization with default settings, add the following to your `astro.config.mjs`:
 ```js
 import { defineConfig } from 'astro/config';
 
 export default defineConfig({
   experimental: {
-    svg: {
-      optimize: true,
-    },
+    svgo: true,
   },
 });
 ```
 
-With SVG optimization enabled, you can further customize behavior with [SVGO plugins](https://svgo.dev/docs/plugins/):
+To customize optimization, pass a [SVGO configuration object](https://svgo.dev/docs/plugins/):
 
 ```js
 export default defineConfig({
   experimental: {
-    svg: {
-      optimize: true,
-      svgoConfig: {
-        plugins: ['preset-default'],
-      },
+    svgo: {
+      plugins: [
+        'preset-default',
+        {
+          name: 'removeViewBox',
+          active: false
+        }
+      ],
     },
   },
 });

packages/astro/src/assets/utils/svg.ts

@@ -6,11 +6,12 @@ import type { SvgComponentProps } from '../runtime.js';
 import { dropAttributes } from '../runtime.js';
 import type { ImageMetadata } from '../types.js';
 
-function parseSvg(contents: string, svgConfig: AstroConfig['experimental']['svg']) {
+function parseSvg(contents: string, svgoConfig: AstroConfig['experimental']['svgo']) {
 	let processedContents = contents;
-	if (svgConfig?.optimize) {
+	if (svgoConfig) {
 		try {
-			const result = optimize(contents, svgConfig.svgoConfig);
+			const config = typeof svgoConfig === 'boolean' ? undefined : svgoConfig;
+			const result = optimize(contents, config);
 			processedContents = result.data;
 		} catch (cause) {
 			throw new AstroError(AstroErrorData.CannotOptimizeSvg, { cause });
@@ -32,10 +33,10 @@ function parseSvg(contents: string, svgConfig: AstroConfig['experimental']['svg'
 export function makeSvgComponent(
 	meta: ImageMetadata,
 	contents: Buffer | string,
-	svgConfig: AstroConfig['experimental']['svg'],
+	svgoConfig: AstroConfig['experimental']['svgo'],
 ): string {
 	const file = typeof contents === 'string' ? contents : contents.toString('utf-8');
-	const { attributes, body: children } = parseSvg(file, svgConfig);
+	const { attributes, body: children } = parseSvg(file, svgoConfig);
 	const props: SvgComponentProps = {
 		meta,
 		attributes: dropAttributes(attributes),

packages/astro/src/assets/vite-plugin-assets.ts

@@ -273,7 +273,7 @@ export default function assets({ fs, settings, sync, logger }: Options): vite.Pl
 							});
 							// We know that the contents are present, as we only emit this property for SVG files
 							return {
-								code: makeSvgComponent(imageMetadata, contents, settings.config.experimental.svg),
+								code: makeSvgComponent(imageMetadata, contents, settings.config.experimental.svgo),
 							};
 						}
 						return {

packages/astro/src/core/config/schemas/base.ts

@@ -107,9 +107,7 @@ export const ASTRO_CONFIG_DEFAULTS = {
 		staticImportMetaEnv: false,
 		chromeDevtoolsWorkspace: false,
 		failOnPrerenderConflict: false,
-		svg: {
-			optimize: false,
-		},
+		svgo: false,
 	},
 } satisfies AstroUserConfig & { server: { open: boolean } };
 
@@ -530,14 +528,10 @@ export const AstroConfigSchema = z.object({
 				.boolean()
 				.optional()
 				.default(ASTRO_CONFIG_DEFAULTS.experimental.failOnPrerenderConflict),
-			svg: z
-				.object({
-					optimize: z.boolean().default(ASTRO_CONFIG_DEFAULTS.experimental.svg.optimize),
-					svgoConfig: z
-						.custom<SvgoConfig>((value) => value && typeof value === 'object')
-						.optional(),
-				})
-				.optional(),
+			svgo: z
+				.union([z.boolean(), z.custom<SvgoConfig>((value) => value && typeof value === 'object')])
+				.optional()
+				.default(ASTRO_CONFIG_DEFAULTS.experimental.svgo),
 		})
 		.strict(
 			`Invalid or outdated experimental feature.\nCheck for incorrect spelling or outdated Astro version.\nSee https://docs.astro.build/en/reference/experimental-flags/ for a list of all current experiments.`,

packages/astro/src/types/public/config.ts

@@ -2540,49 +2540,48 @@ export interface AstroUserConfig<
 		chromeDevtoolsWorkspace?: boolean;
 
 		/**
-		 * @kind heading
-		 * @name SVG Options
+		 * @name experimental.svgo
+		 * @type {boolean | SvgoConfig}
+		 * @default `false`
+		 * @description
+		 * Enable SVG optimization using SVGO during build time.
+		 *
+		 * Set to `true` to enable optimization with default settings, or pass a configuration
+		 * object to customize SVGO behavior.
+		 *
+		 * When enabled, all imported SVG files will be optimized for smaller file sizes
+		 * and better performance while maintaining visual quality.
+		 *
+		 * ```js
+		 * {
+		 *   experimental: {
+		 *     // Enable with defaults
+		 *     svgo: true
+		 *   }
+		 * }
+		 * ```
+		 *
+		 * To customize optimization, pass a [SVGO configuration object](https://svgo.dev/):
+		 *
+		 * ```js
+		 * {
+		 *   experimental: {
+		 *     svgo: {
+		 *       plugins: [
+		 *         'preset-default',
+		 *         {
+		 *           name: 'removeViewBox',
+		 *           active: false
+		 *         }
+		 *       ]
+		 *     }
+		 *   }
+		 * }
+		 * ```
+		 *
+		 * See the [experimental SVGO optimization docs](https://docs.astro.build/en/reference/experimental-flags/svg-optimization/) for more information.
 		 */
-		svg?: {
-			/**
-			 * @name experimental.svg.optimize
-			 * @type {boolean}
-			 * @default `true`
-			 * @description
-			 * Whether to enable SVG optimization using SVGO during build time.
-			 *
-			 * When enabled, all imported SVG files will be optimized for smaller file sizes
-			 * and better performance while maintaining visual quality.
-			 */
-			optimize?: boolean;
-
-			/**
-			 * @name experimental.svg.svgoConfig
-			 * @type {SvgoConfig}
-			 * @default `{}`
-			 * @description
-			 * Configuration object passed directly to SVGO for customizing SVG optimization.
-			 *
-			 * See [SVGO documentation](https://svgo.dev/) for available options.
-			 *
-			 * ```js
-			 * {
-			 *   svg: {
-			 *     svgoConfig: {
-			 *       plugins: [
-			 *         'preset-default',
-			 *         {
-			 *           name: 'removeViewBox',
-			 *           active: false
-			 *         }
-			 *       ]
-			 *     }
-			 *   }
-			 * }
-			 * ```
-			 */
-			svgoConfig?: SvgoConfig;
-		};
+		svgo?: boolean | SvgoConfig;
 	};
 }
 

packages/astro/test/fixtures/core-image-svg-optimized/astro.config.mjs

@@ -1,18 +1,15 @@
 import { defineConfig } from 'astro/config';
 
 export default defineConfig({
-  experimental: {
-    svg: {
-      optimize: true,
-      svgoConfig: {
-        plugins: [
-          'preset-default',
-          {
-            name: 'removeViewBox',
-            active: false
-          }
-        ]
-      }
-    }
-  }
+	experimental: {
+		svgo: {
+			plugins: [
+				'preset-default',
+				{
+					name: 'removeViewBox',
+					active: false,
+				},
+			],
+		},
+	},
 });