feat: add SVGO optimization support for SVG assets (#13880)

Co-authored-by: Sarah Rainsberger <[email protected]>
Co-authored-by: Florian Lefebvre <[email protected]>

Author: 3 people

.changeset/cyan-tables-poke.md

@@ -0,0 +1,38 @@
+---
+'astro': minor
+---
+
+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 with default settings, add the following to your `astro.config.mjs`:
+```js
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  experimental: {
+    svgo: true,
+  },
+});
+```
+
+To customize optimization, pass a [SVGO configuration object](https://svgo.dev/docs/plugins/):
+
+```js
+export default defineConfig({
+  experimental: {
+    svgo: {
+      plugins: [
+        'preset-default',
+        {
+          name: 'removeViewBox',
+          active: false
+        }
+      ],
+    },
+  },
+});
+```
+
+For more information on enabling and using this feature in your project, see the [experimental SVG optimization docs](https://docs.astro.build/en/reference/experimental-flags/svg-optimization/).

packages/astro/package.json

@@ -156,6 +156,7 @@
     "semver": "^7.7.3",
     "shiki": "^3.15.0",
     "smol-toml": "^1.5.0",
+    "svgo": "^4.0.0",
     "tinyexec": "^1.0.2",
     "tinyglobby": "^0.2.15",
     "tsconfck": "^3.1.6",

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

@@ -1,10 +1,37 @@
+import { optimize } from 'svgo';
 import { parse, renderSync } from 'ultrahtml';
+import { AstroError, AstroErrorData } from '../../core/errors/index.js';
+import type { AstroConfig } from '../../types/public/config.js';
 import type { SvgComponentProps } from '../runtime.js';
 import { dropAttributes } from '../runtime.js';
 import type { ImageMetadata } from '../types.js';
 
-function parseSvg(contents: string) {
-	const root = parse(contents);
+function parseSvg({
+	path,
+	contents,
+	svgoConfig,
+}: {
+	path: string;
+	contents: string;
+	svgoConfig: AstroConfig['experimental']['svgo'];
+}) {
+	let processedContents = contents;
+	if (svgoConfig) {
+		try {
+			const config = typeof svgoConfig === 'boolean' ? undefined : svgoConfig;
+			const result = optimize(contents, config);
+			processedContents = result.data;
+		} catch (cause) {
+			throw new AstroError(
+				{
+					...AstroErrorData.CannotOptimizeSvg,
+					message: AstroErrorData.CannotOptimizeSvg.message(path),
+				},
+				{ cause },
+			);
+		}
+	}
+	const root = parse(processedContents);
 	const svgNode = root.children.find(
 		({ name, type }: { name: string; type: number }) => type === 1 /* Element */ && name === 'svg',
 	);
@@ -17,9 +44,17 @@ function parseSvg(contents: string) {
 	return { attributes, body };
 }
 
-export function makeSvgComponent(meta: ImageMetadata, contents: Buffer | string) {
+export function makeSvgComponent(
+	meta: ImageMetadata,
+	contents: Buffer | string,
+	svgoConfig: AstroConfig['experimental']['svgo'],
+): string {
 	const file = typeof contents === 'string' ? contents : contents.toString('utf-8');
-	const { attributes, body: children } = parseSvg(file);
+	const { attributes, body: children } = parseSvg({
+		path: meta.fsPath,
+		contents: file,
+		svgoConfig,
+	});
 	const props: SvgComponentProps = {
 		meta,
 		attributes: dropAttributes(attributes),

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

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

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

@@ -7,6 +7,7 @@ import type {
 } from '@astrojs/markdown-remark';
 import { markdownConfigDefaults, syntaxHighlightDefaults } from '@astrojs/markdown-remark';
 import { type BuiltinTheme, bundledThemes } from 'shiki';
+import type { Config as SvgoConfig } from 'svgo';
 import { z } from 'zod';
 import { localFontFamilySchema, remoteFontFamilySchema } from '../../../assets/fonts/config.js';
 import { EnvSchema } from '../../../env/schema.js';
@@ -106,6 +107,7 @@ export const ASTRO_CONFIG_DEFAULTS = {
 		staticImportMetaEnv: false,
 		chromeDevtoolsWorkspace: false,
 		failOnPrerenderConflict: false,
+		svgo: false,
 	},
 } satisfies AstroUserConfig & { server: { open: boolean } };
 
@@ -526,6 +528,10 @@ export const AstroConfigSchema = z.object({
 				.boolean()
 				.optional()
 				.default(ASTRO_CONFIG_DEFAULTS.experimental.failOnPrerenderConflict),
+			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/core/errors/errors-data.ts

@@ -2064,6 +2064,17 @@ export const SessionConfigWithoutFlagError = {
 	hint: 'For more information, see https://docs.astro.build/en/guides/sessions/',
 } satisfies ErrorData;
 
+/**
+ * @docs
+ * @message An error occurred while optimizing the SVG file with SVGO.
+ */
+export const CannotOptimizeSvg = {
+	name: 'CannotOptimizeSvg',
+	title: 'Cannot optimize SVG',
+	message: (path: string) => `An error occurred while optimizing SVG file "${path}" with SVGO.`,
+	hint: 'Review the included SVGO error message provided for guidance.',
+} satisfies ErrorData;
+
 /*
  * Adding an error? Follow these steps:
  * 1. Determine in which category it belongs (Astro, Vite, CSS, Content Collections etc.)

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

@@ -7,6 +7,7 @@ import type {
 	ShikiConfig,
 	SyntaxHighlightConfigType,
 } from '@astrojs/markdown-remark';
+import type { Config as SvgoConfig } from 'svgo';
 import type { BuiltinDriverName, BuiltinDriverOptions, Driver, Storage } from 'unstorage';
 import type { UserConfig as OriginalViteUserConfig, SSROptions as ViteSSROptions } from 'vite';
 import type { AstroFontProvider, FontFamily } from '../../assets/fonts/types.js';
@@ -2537,6 +2538,50 @@ export interface AstroUserConfig<
 		 * See the [experimental Chrome DevTools workspace feature documentation](https://docs.astro.build/en/reference/experimental-flags/chrome-devtools-workspace/) for more information.
 		 */
 		chromeDevtoolsWorkspace?: boolean;
+
+		/**
+		 * @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.
+		 */
+		svgo?: boolean | SvgoConfig;
 	};
 }
 

packages/astro/test/core-image-svg.test.js

@@ -150,4 +150,50 @@ describe('astro:assets - SVG Components', () => {
 			});
 		});
 	});
+
+	describe('SVGO optimization', () => {
+		/** @type {import('./test-utils').Fixture} */
+		let optimizedFixture;
+		/** @type {import('./test-utils').DevServer} */
+		let optimizedDevServer;
+
+		before(async () => {
+			optimizedFixture = await loadFixture({
+				root: './fixtures/core-image-svg-optimized/',
+			});
+
+			optimizedDevServer = await optimizedFixture.startDevServer();
+		});
+
+		after(async () => {
+			await optimizedDevServer.stop();
+		});
+
+		describe('with optimization enabled', () => {
+			let $;
+			let html;
+
+			before(async () => {
+				let res = await optimizedFixture.fetch('/optimized');
+				html = await res.text();
+				$ = cheerio.load(html, { xml: true });
+			});
+
+			it('optimizes SVG with SVGO', () => {
+				const $svg = $('#optimized svg');
+				assert.equal($svg.length, 1);
+				assert.equal(html.includes('This is a comment'), false);
+				assert.equal(!!$svg.attr('xmlns:xlink'), false);
+				assert.equal(!!$svg.attr('version'), false);
+			});
+
+			it('preserves functional SVG structure', () => {
+				const $svg = $('#optimized svg');
+				const $paths = $svg.find('path');
+				assert.equal($paths.length >= 1, true);
+				assert.equal($svg.attr('width'), '24');
+				assert.equal($svg.attr('height'), '24');
+			});
+		});
+	});
 });

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

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

packages/astro/test/fixtures/core-image-svg-optimized/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@test/core-image-svg-optimized",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  },
+  "scripts": {
+    "dev": "astro dev"
+  }
+}