Allow SVGs when using Assets (#7643)

* Allow SVG files when using Assets

* Fixed TypeScript error

* fix: some small nits and add a test

* chore: changeset

---------

Co-authored-by: Princesseuh <[email protected]>

.changeset/tasty-bags-accept.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Add support for using `.svg` files with `astro:assets`'s base services. The SVGs will NOT be processed and will be return as-is, however, proper attributes, alt enforcement etc will all work correctly.

packages/astro/src/assets/consts.ts

@@ -18,8 +18,16 @@ export const VALID_INPUT_FORMATS = [
 	'svg',
 ] as const;
 /**
- * Valid formats for optimizations in our base services.
- * Certain formats can be imported (namely SVGs) but not processed, so they are excluded from this list.
+ * Valid formats that our base services support.
+ * Certain formats can be imported (namely SVGs) but will not be processed.
  */
-export const VALID_OPTIMIZABLE_FORMATS = ['jpeg', 'jpg', 'png', 'tiff', 'webp', 'gif'] as const;
-export const VALID_OUTPUT_FORMATS = ['avif', 'png', 'webp', 'jpeg', 'jpg'] as const;
+export const VALID_SUPPORTED_FORMATS = [
+	'jpeg',
+	'jpg',
+	'png',
+	'tiff',
+	'webp',
+	'gif',
+	'svg',
+] as const;
+export const VALID_OUTPUT_FORMATS = ['avif', 'png', 'webp', 'jpeg', 'jpg', 'svg'] as const;

packages/astro/src/assets/services/service.ts

@@ -1,6 +1,6 @@
 import { AstroError, AstroErrorData } from '../../core/errors/index.js';
 import { joinPaths } from '../../core/path.js';
-import { VALID_OPTIMIZABLE_FORMATS } from '../consts.js';
+import { VALID_SUPPORTED_FORMATS } from '../consts.js';
 import { isESMImportedImage } from '../internal.js';
 import type { ImageOutputFormat, ImageTransform } from '../types.js';
 
@@ -143,16 +143,21 @@ export const baseService: Omit<LocalImageService, 'transform'> = {
 				});
 			}
 		} else {
-			if (!VALID_OPTIMIZABLE_FORMATS.includes(options.src.format as any)) {
+			if (!VALID_SUPPORTED_FORMATS.includes(options.src.format as any)) {
 				throw new AstroError({
 					...AstroErrorData.UnsupportedImageFormat,
 					message: AstroErrorData.UnsupportedImageFormat.message(
 						options.src.format,
 						options.src.src,
-						VALID_OPTIMIZABLE_FORMATS
+						VALID_SUPPORTED_FORMATS
 					),
 				});
 			}
+
+			// We currently do not support processing SVGs, so whenever the input format is a SVG, force the output to also be one
+			if (options.src.format === 'svg') {
+				options.format = 'svg';
+			}
 		}
 
 		// If the user didn't specify a format, we'll default to `webp`. It offers the best ratio of compatibility / quality

packages/astro/src/assets/services/sharp.ts

@@ -37,6 +37,10 @@ const sharpService: LocalImageService = {
 
 		const transform: BaseServiceTransform = transformOptions as BaseServiceTransform;
 
+		// Return SVGs as-is
+		// TODO: Sharp has some support for SVGs, we could probably support this once Sharp is the default and only service.
+		if (transform.format === 'svg') return { data: inputBuffer, format: 'svg' };
+
 		let result = sharp(inputBuffer, { failOnError: false, pages: -1 });
 
 		// Never resize using both width and height at the same time, prioritizing width.

packages/astro/src/assets/services/squoosh.ts

@@ -12,7 +12,7 @@ import type { Operation } from './vendor/squoosh/image.js';
 
 const baseQuality = { low: 25, mid: 50, high: 80, max: 100 };
 const qualityTable: Record<
-	Exclude<ImageOutputFormat, 'png'>,
+	Exclude<ImageOutputFormat, 'png' | 'svg'>,
 	Record<ImageQualityPreset, number>
 > = {
 	avif: {
@@ -38,6 +38,9 @@ const service: LocalImageService = {
 
 		let format = transform.format;
 
+		// Return SVGs as-is
+		if (format === 'svg') return { data: inputBuffer, format: 'svg' };
+
 		const operations: Operation[] = [];
 
 		// Never resize using both width and height at the same time, prioritizing width.

packages/astro/src/core/errors/errors-data.ts

@@ -503,8 +503,8 @@ See https://docs.astro.build/en/guides/server-side-rendering/ for more informati
 		message: (format: string, imagePath: string, supportedFormats: readonly string[]) =>
 			`Received unsupported format \`${format}\` from \`${imagePath}\`. Currently only ${supportedFormats.join(
 				', '
-			)} are supported for optimization.`,
-		hint: "If you do not need optimization, using an `img` tag directly instead of the `Image` component might be what you're looking for.",
+			)} are supported by our image services.`,
+		hint: "Using an `img` tag directly instead of the `Image` component might be what you're looking for.",
 	},
 	/**
 	 * @docs

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

@@ -109,14 +109,18 @@ describe('astro:image', () => {
 				expect(res.headers.get('content-type')).to.equal('image/webp');
 			});
 
-			it('errors on unsupported formats', async () => {
-				logs.length = 0;
-				let res = await fixture.fetch('/unsupported-format');
-				await res.text();
+			it('properly skip processing SVGs, but does not error', async () => {
+				let res = await fixture.fetch('/svgSupport');
+				let html = await res.text();
 
-				expect(logs).to.have.a.lengthOf(1);
-				expect(logs[0].message).to.contain('Received unsupported format');
-			});
+				$ = cheerio.load(html);
+				let $img = $('img');
+				expect($img).to.have.a.lengthOf(1);
+
+				let src = $img.attr('src');
+				res = await fixture.fetch(src);
+				expect(res.status).to.equal(200);
+			})
 
 			it("errors when an ESM imported image's src is passed to Image/getImage instead of the full import", async () => {
 				logs.length = 0;