From 3ccd5260d067cb664addb3302dc20bf6df1f9ad3 Mon Sep 17 00:00:00 2001 From: "Azat S." Date: Sun, 1 Jun 2025 01:17:23 +0300 Subject: [PATCH 1/6] feat: add SVGO optimization support for SVG assets --- packages/astro/package.json | 1 + packages/astro/src/assets/utils/svg.ts | 26 ++++++++-- .../astro/src/assets/vite-plugin-assets.ts | 9 +++- .../astro/src/core/config/schemas/base.ts | 10 ++++ packages/astro/src/types/public/config.ts | 49 +++++++++++++++++++ pnpm-lock.yaml | 3 ++ 6 files changed, 93 insertions(+), 5 deletions(-) diff --git a/packages/astro/package.json b/packages/astro/package.json index 290a6cbf086d..afca7c08bb15 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -152,6 +152,7 @@ "semver": "^7.7.2", "shiki": "^3.12.0", "smol-toml": "^1.4.2", + "svgo": "^4.0.0", "tinyexec": "^1.0.1", "tinyglobby": "^0.2.14", "tsconfck": "^3.1.6", diff --git a/packages/astro/src/assets/utils/svg.ts b/packages/astro/src/assets/utils/svg.ts index c272f345c18c..738f95fa07e6 100644 --- a/packages/astro/src/assets/utils/svg.ts +++ b/packages/astro/src/assets/utils/svg.ts @@ -1,10 +1,24 @@ +import type { AstroUserConfig } from '../../types/public/index.js'; + import { parse, renderSync } from 'ultrahtml'; +import { optimize } from 'svgo'; + 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(contents: string, svgConfig?: AstroUserConfig['svg']) { + let processedContents = contents; + if (svgConfig?.optimize) { + try { + const result = optimize(contents, svgConfig.svgoConfig); + processedContents = result.data; + } catch (error) { + console.warn('SVGO optimization failed:', error); + processedContents = contents; + } + } + const root = parse(processedContents); const svgNode = root.children.find( ({ name, type }: { name: string; type: number }) => type === 1 /* Element */ && name === 'svg', ); @@ -17,9 +31,13 @@ function parseSvg(contents: string) { return { attributes, body }; } -export function makeSvgComponent(meta: ImageMetadata, contents: Buffer | string) { +export function makeSvgComponent( + meta: ImageMetadata, + contents: Buffer | string, + svgConfig?: AstroUserConfig['svg'], +): string { const file = typeof contents === 'string' ? contents : contents.toString('utf-8'); - const { attributes, body: children } = parseSvg(file); + const { attributes, body: children } = parseSvg(file, svgConfig); const props: SvgComponentProps = { meta, attributes: dropAttributes(attributes), diff --git a/packages/astro/src/assets/vite-plugin-assets.ts b/packages/astro/src/assets/vite-plugin-assets.ts index 34c3d123ef65..aae4f0e7b8d9 100644 --- a/packages/astro/src/assets/vite-plugin-assets.ts +++ b/packages/astro/src/assets/vite-plugin-assets.ts @@ -2,6 +2,7 @@ import type * as fsMod from 'node:fs'; import { extname } from 'node:path'; import MagicString from 'magic-string'; import type * as vite from 'vite'; +import type { AstroUserConfig } from '../types/public/index.js'; import { AstroError, AstroErrorData } from '../core/errors/index.js'; import type { Logger } from '../core/logger/core.js'; import { @@ -244,7 +245,13 @@ export default function assets({ fs, settings, sync, logger }: Options): vite.Pl if (id.endsWith('.svg')) { const contents = await fs.promises.readFile(imageMetadata.fsPath, { 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.svg as AstroUserConfig['svg'], + ), + }; } // We can only reliably determine if an image is used on the server, as we need to track its usage throughout the entire build. diff --git a/packages/astro/src/core/config/schemas/base.ts b/packages/astro/src/core/config/schemas/base.ts index 3df0c5f367de..0d1559cab902 100644 --- a/packages/astro/src/core/config/schemas/base.ts +++ b/packages/astro/src/core/config/schemas/base.ts @@ -70,6 +70,10 @@ export const ASTRO_CONFIG_DEFAULTS = { service: { entrypoint: 'astro/assets/services/sharp', config: {} }, responsiveStyles: false, }, + svg: { + optimize: true, + svgoConfig: {}, + }, devToolbar: { enabled: true, }, @@ -283,6 +287,12 @@ export const AstroConfigSchema = z.object({ responsiveStyles: z.boolean().default(ASTRO_CONFIG_DEFAULTS.image.responsiveStyles), }) .default(ASTRO_CONFIG_DEFAULTS.image), + svg: z + .object({ + optimize: z.boolean().default(true), + svgoConfig: z.record(z.any()).optional(), + }) + .optional(), devToolbar: z .object({ enabled: z.boolean().default(ASTRO_CONFIG_DEFAULTS.devToolbar.enabled), diff --git a/packages/astro/src/types/public/config.ts b/packages/astro/src/types/public/config.ts index 20b6f74c15ce..f878204f8530 100644 --- a/packages/astro/src/types/public/config.ts +++ b/packages/astro/src/types/public/config.ts @@ -8,6 +8,7 @@ import type { SyntaxHighlightConfigType, } from '@astrojs/markdown-remark'; import type { BuiltinDriverName, BuiltinDriverOptions, Driver, Storage } from 'unstorage'; +import type { Config as SvgoConfig } from 'svgo'; import type { UserConfig as OriginalViteUserConfig, SSROptions as ViteSSROptions } from 'vite'; import type { AstroFontProvider, FontFamily } from '../../assets/fonts/types.js'; import type { ImageFit, ImageLayout } from '../../assets/types.js'; @@ -1401,6 +1402,54 @@ export interface AstroUserConfig< breakpoints?: number[]; }; + /** + * @docs + * @kind heading + * @name SVG Options + */ + svg?: { + /** + * @docs + * @name 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; + + /** + * @docs + * @name 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; + }; + /** * @docs * @kind heading diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f89e015c462b..7722e7b8b7b7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -609,6 +609,9 @@ importers: smol-toml: specifier: ^1.4.2 version: 1.4.2 + svgo: + specifier: ^4.0.0 + version: 4.0.0 tinyexec: specifier: ^1.0.1 version: 1.0.1 From e9dcc24769cf0fe8e71f00011f18a6fd61158bcc Mon Sep 17 00:00:00 2001 From: "Azat S." Date: Sun, 1 Jun 2025 02:00:35 +0300 Subject: [PATCH 2/6] test: add SVGO optimization tests --- packages/astro/test/core-image-svg.test.js | 46 +++++++++++++++++++ .../core-image-svg-optimized/astro.config.mjs | 16 +++++++ .../core-image-svg-optimized/package.json | 11 +++++ .../src/assets/unoptimized.svg | 16 +++++++ .../src/pages/optimized.astro | 14 ++++++ .../core-image-svg-optimized/tsconfig.json | 11 +++++ pnpm-lock.yaml | 6 +++ 7 files changed, 120 insertions(+) create mode 100644 packages/astro/test/fixtures/core-image-svg-optimized/astro.config.mjs create mode 100644 packages/astro/test/fixtures/core-image-svg-optimized/package.json create mode 100644 packages/astro/test/fixtures/core-image-svg-optimized/src/assets/unoptimized.svg create mode 100644 packages/astro/test/fixtures/core-image-svg-optimized/src/pages/optimized.astro create mode 100644 packages/astro/test/fixtures/core-image-svg-optimized/tsconfig.json diff --git a/packages/astro/test/core-image-svg.test.js b/packages/astro/test/core-image-svg.test.js index 308554be1069..bbaede3a6ad3 100644 --- a/packages/astro/test/core-image-svg.test.js +++ b/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'); + }); + }); + }); }); diff --git a/packages/astro/test/fixtures/core-image-svg-optimized/astro.config.mjs b/packages/astro/test/fixtures/core-image-svg-optimized/astro.config.mjs new file mode 100644 index 000000000000..dec6b32d2acb --- /dev/null +++ b/packages/astro/test/fixtures/core-image-svg-optimized/astro.config.mjs @@ -0,0 +1,16 @@ +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + svg: { + optimize: true, + svgoConfig: { + plugins: [ + 'preset-default', + { + name: 'removeViewBox', + active: false + } + ] + } + } +}); diff --git a/packages/astro/test/fixtures/core-image-svg-optimized/package.json b/packages/astro/test/fixtures/core-image-svg-optimized/package.json new file mode 100644 index 000000000000..4557b402af29 --- /dev/null +++ b/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" + } +} diff --git a/packages/astro/test/fixtures/core-image-svg-optimized/src/assets/unoptimized.svg b/packages/astro/test/fixtures/core-image-svg-optimized/src/assets/unoptimized.svg new file mode 100644 index 000000000000..49293779d377 --- /dev/null +++ b/packages/astro/test/fixtures/core-image-svg-optimized/src/assets/unoptimized.svg @@ -0,0 +1,16 @@ + + + + + Test Icon + An icon for testing SVGO optimization + + + + + + + + diff --git a/packages/astro/test/fixtures/core-image-svg-optimized/src/pages/optimized.astro b/packages/astro/test/fixtures/core-image-svg-optimized/src/pages/optimized.astro new file mode 100644 index 000000000000..69ce261c9bd0 --- /dev/null +++ b/packages/astro/test/fixtures/core-image-svg-optimized/src/pages/optimized.astro @@ -0,0 +1,14 @@ +--- +import TestIcon from '../assets/unoptimized.svg'; +--- + + + + SVG Optimization Test + + +
+ +
+ + diff --git a/packages/astro/test/fixtures/core-image-svg-optimized/tsconfig.json b/packages/astro/test/fixtures/core-image-svg-optimized/tsconfig.json new file mode 100644 index 000000000000..923ed4e24fb7 --- /dev/null +++ b/packages/astro/test/fixtures/core-image-svg-optimized/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "astro/tsconfigs/strict", + "compilerOptions": { + "baseUrl": ".", + "paths": { + "~/assets/*": [ + "src/assets/*" + ] + }, + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7722e7b8b7b7..41b2a7b4c7ab 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2867,6 +2867,12 @@ importers: specifier: workspace:* version: link:../../.. + packages/astro/test/fixtures/core-image-svg-optimized: + dependencies: + astro: + specifier: workspace:* + version: link:../../.. + packages/astro/test/fixtures/core-image-unconventional-settings: dependencies: astro: From b108306f04ff2429ad9e08ce63e8c8101bae2359 Mon Sep 17 00:00:00 2001 From: "Azat S." Date: Sat, 7 Jun 2025 13:12:03 +0300 Subject: [PATCH 3/6] fix: improve svgo config zod schema --- packages/astro/src/core/config/schemas/base.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/astro/src/core/config/schemas/base.ts b/packages/astro/src/core/config/schemas/base.ts index 0d1559cab902..cd618558eb2c 100644 --- a/packages/astro/src/core/config/schemas/base.ts +++ b/packages/astro/src/core/config/schemas/base.ts @@ -5,6 +5,7 @@ import type { RemarkRehype as _RemarkRehype, ShikiConfig, } from '@astrojs/markdown-remark'; +import type { Config as SvgoConfig } from 'svgo'; import { markdownConfigDefaults, syntaxHighlightDefaults } from '@astrojs/markdown-remark'; import { type BuiltinTheme, bundledThemes } from 'shiki'; import { z } from 'zod'; @@ -290,7 +291,7 @@ export const AstroConfigSchema = z.object({ svg: z .object({ optimize: z.boolean().default(true), - svgoConfig: z.record(z.any()).optional(), + svgoConfig: z.custom((value) => value && typeof value === 'object').optional(), }) .optional(), devToolbar: z From 2bb89eaea31ec636d591adb9330daf11daa6fa5d Mon Sep 17 00:00:00 2001 From: "Azat S." Date: Sat, 7 Jun 2025 13:15:11 +0300 Subject: [PATCH 4/6] chore: add changeset about adding svgo --- .changeset/cyan-tables-poke.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cyan-tables-poke.md diff --git a/.changeset/cyan-tables-poke.md b/.changeset/cyan-tables-poke.md new file mode 100644 index 000000000000..0e83559eb543 --- /dev/null +++ b/.changeset/cyan-tables-poke.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Add SVGO optimization support for SVG assets From 49027ab441526900b9145eebea7f1487e409976b Mon Sep 17 00:00:00 2001 From: "Azat S." Date: Sat, 7 Jun 2025 13:30:05 +0300 Subject: [PATCH 5/6] fix: make svgo optimization experimental --- .changeset/cyan-tables-poke.md | 2 +- packages/astro/src/assets/utils/svg.ts | 6 +- .../astro/src/assets/vite-plugin-assets.ts | 4 +- .../astro/src/core/config/schemas/base.ts | 24 ++--- packages/astro/src/types/public/config.ts | 98 +++++++++---------- .../core-image-svg-optimized/astro.config.mjs | 22 +++-- 6 files changed, 80 insertions(+), 76 deletions(-) diff --git a/.changeset/cyan-tables-poke.md b/.changeset/cyan-tables-poke.md index 0e83559eb543..045fd24847b5 100644 --- a/.changeset/cyan-tables-poke.md +++ b/.changeset/cyan-tables-poke.md @@ -2,4 +2,4 @@ 'astro': patch --- -Add SVGO optimization support for SVG assets +Add experimental SVGO optimization support for SVG assets diff --git a/packages/astro/src/assets/utils/svg.ts b/packages/astro/src/assets/utils/svg.ts index 738f95fa07e6..8daef9b873be 100644 --- a/packages/astro/src/assets/utils/svg.ts +++ b/packages/astro/src/assets/utils/svg.ts @@ -1,4 +1,4 @@ -import type { AstroUserConfig } from '../../types/public/index.js'; +import type { AstroConfigType } from '../../core/config/schemas/index.js'; import { parse, renderSync } from 'ultrahtml'; import { optimize } from 'svgo'; @@ -7,7 +7,7 @@ import type { SvgComponentProps } from '../runtime.js'; import { dropAttributes } from '../runtime.js'; import type { ImageMetadata } from '../types.js'; -function parseSvg(contents: string, svgConfig?: AstroUserConfig['svg']) { +function parseSvg(contents: string, svgConfig?: AstroConfigType['experimental']['svg']) { let processedContents = contents; if (svgConfig?.optimize) { try { @@ -34,7 +34,7 @@ function parseSvg(contents: string, svgConfig?: AstroUserConfig['svg']) { export function makeSvgComponent( meta: ImageMetadata, contents: Buffer | string, - svgConfig?: AstroUserConfig['svg'], + svgConfig?: AstroConfigType['experimental']['svg'], ): string { const file = typeof contents === 'string' ? contents : contents.toString('utf-8'); const { attributes, body: children } = parseSvg(file, svgConfig); diff --git a/packages/astro/src/assets/vite-plugin-assets.ts b/packages/astro/src/assets/vite-plugin-assets.ts index aae4f0e7b8d9..187eae2fd816 100644 --- a/packages/astro/src/assets/vite-plugin-assets.ts +++ b/packages/astro/src/assets/vite-plugin-assets.ts @@ -2,7 +2,7 @@ import type * as fsMod from 'node:fs'; import { extname } from 'node:path'; import MagicString from 'magic-string'; import type * as vite from 'vite'; -import type { AstroUserConfig } from '../types/public/index.js'; +import type { AstroConfigType } from '../core/config/schemas/index.js'; import { AstroError, AstroErrorData } from '../core/errors/index.js'; import type { Logger } from '../core/logger/core.js'; import { @@ -249,7 +249,7 @@ export default function assets({ fs, settings, sync, logger }: Options): vite.Pl code: makeSvgComponent( imageMetadata, contents, - settings.config.svg as AstroUserConfig['svg'], + settings.config.experimental?.svg as AstroConfigType['experimental']['svg'], ), }; } diff --git a/packages/astro/src/core/config/schemas/base.ts b/packages/astro/src/core/config/schemas/base.ts index cd618558eb2c..b917bbdc3415 100644 --- a/packages/astro/src/core/config/schemas/base.ts +++ b/packages/astro/src/core/config/schemas/base.ts @@ -5,9 +5,9 @@ import type { RemarkRehype as _RemarkRehype, ShikiConfig, } from '@astrojs/markdown-remark'; -import type { Config as SvgoConfig } from 'svgo'; 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'; @@ -71,10 +71,6 @@ export const ASTRO_CONFIG_DEFAULTS = { service: { entrypoint: 'astro/assets/services/sharp', config: {} }, responsiveStyles: false, }, - svg: { - optimize: true, - svgoConfig: {}, - }, devToolbar: { enabled: true, }, @@ -110,6 +106,10 @@ export const ASTRO_CONFIG_DEFAULTS = { staticImportMetaEnv: false, chromeDevtoolsWorkspace: false, failOnPrerenderConflict: false, + svg: { + optimize: true, + svgoConfig: {}, + }, }, } satisfies AstroUserConfig & { server: { open: boolean } }; @@ -288,12 +288,6 @@ export const AstroConfigSchema = z.object({ responsiveStyles: z.boolean().default(ASTRO_CONFIG_DEFAULTS.image.responsiveStyles), }) .default(ASTRO_CONFIG_DEFAULTS.image), - svg: z - .object({ - optimize: z.boolean().default(true), - svgoConfig: z.custom((value) => value && typeof value === 'object').optional(), - }) - .optional(), devToolbar: z .object({ enabled: z.boolean().default(ASTRO_CONFIG_DEFAULTS.devToolbar.enabled), @@ -526,6 +520,14 @@ export const AstroConfigSchema = z.object({ .boolean() .optional() .default(ASTRO_CONFIG_DEFAULTS.experimental.failOnPrerenderConflict), + svg: z + .object({ + optimize: z.boolean().default(true), + svgoConfig: z + .custom((value) => value && typeof value === 'object') + .optional(), + }) + .optional(), }) .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.`, diff --git a/packages/astro/src/types/public/config.ts b/packages/astro/src/types/public/config.ts index f878204f8530..806f5514e049 100644 --- a/packages/astro/src/types/public/config.ts +++ b/packages/astro/src/types/public/config.ts @@ -7,8 +7,8 @@ import type { ShikiConfig, SyntaxHighlightConfigType, } from '@astrojs/markdown-remark'; -import type { BuiltinDriverName, BuiltinDriverOptions, Driver, Storage } from 'unstorage'; 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'; import type { ImageFit, ImageLayout } from '../../assets/types.js'; @@ -1402,54 +1402,6 @@ export interface AstroUserConfig< breakpoints?: number[]; }; - /** - * @docs - * @kind heading - * @name SVG Options - */ - svg?: { - /** - * @docs - * @name 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; - - /** - * @docs - * @name 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; - }; - /** * @docs * @kind heading @@ -2544,6 +2496,54 @@ 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; + + /** + * @docs + * @kind heading + * @name SVG Options + */ + svg?: { + /** + * @docs + * @name 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; + + /** + * @docs + * @name 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; + }; }; } diff --git a/packages/astro/test/fixtures/core-image-svg-optimized/astro.config.mjs b/packages/astro/test/fixtures/core-image-svg-optimized/astro.config.mjs index dec6b32d2acb..84d8a09b8e5f 100644 --- a/packages/astro/test/fixtures/core-image-svg-optimized/astro.config.mjs +++ b/packages/astro/test/fixtures/core-image-svg-optimized/astro.config.mjs @@ -1,16 +1,18 @@ import { defineConfig } from 'astro/config'; export default defineConfig({ - svg: { - optimize: true, - svgoConfig: { - plugins: [ - 'preset-default', - { - name: 'removeViewBox', - active: false - } - ] + experimental: { + svg: { + optimize: true, + svgoConfig: { + plugins: [ + 'preset-default', + { + name: 'removeViewBox', + active: false + } + ] + } } } }); From d8a9173d0912292199472a68a00849af64cb4541 Mon Sep 17 00:00:00 2001 From: "Azat S." Date: Sat, 7 Jun 2025 15:21:19 +0300 Subject: [PATCH 6/6] fix: fix svgo options jsdoc --- packages/astro/src/assets/utils/svg.ts | 4 ++-- packages/astro/src/types/public/config.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/astro/src/assets/utils/svg.ts b/packages/astro/src/assets/utils/svg.ts index 8daef9b873be..d444df4013af 100644 --- a/packages/astro/src/assets/utils/svg.ts +++ b/packages/astro/src/assets/utils/svg.ts @@ -1,7 +1,7 @@ -import type { AstroConfigType } from '../../core/config/schemas/index.js'; +import { optimize } from 'svgo'; import { parse, renderSync } from 'ultrahtml'; -import { optimize } from 'svgo'; +import type { AstroConfigType } from '../../core/config/schemas/index.js'; import type { SvgComponentProps } from '../runtime.js'; import { dropAttributes } from '../runtime.js'; diff --git a/packages/astro/src/types/public/config.ts b/packages/astro/src/types/public/config.ts index 806f5514e049..d5f7f60539d4 100644 --- a/packages/astro/src/types/public/config.ts +++ b/packages/astro/src/types/public/config.ts @@ -2505,7 +2505,7 @@ export interface AstroUserConfig< svg?: { /** * @docs - * @name svg.optimize + * @name experimental.svg.optimize * @type {boolean} * @default `true` * @description @@ -2518,7 +2518,7 @@ export interface AstroUserConfig< /** * @docs - * @name svg.svgoConfig + * @name experimental.svg.svgoConfig * @type {SvgoConfig} * @default `{}` * @description