From 4b82e55cf15899babb61128a7393362e667ff724 Mon Sep 17 00:00:00 2001 From: Alvin Bryan <107407814+alvinometric@users.noreply.github.com> Date: Thu, 13 Jul 2023 12:22:31 -0700 Subject: [PATCH] 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 --- .changeset/tasty-bags-accept.md | 5 +++++ packages/astro/src/assets/consts.ts | 16 ++++++++++++---- packages/astro/src/assets/services/service.ts | 11 ++++++++--- packages/astro/src/assets/services/sharp.ts | 4 ++++ packages/astro/src/assets/services/squoosh.ts | 5 ++++- packages/astro/src/core/errors/errors-data.ts | 4 ++-- packages/astro/test/core-image.test.js | 18 +++++++++++------- ...supported-format.astro => svgSupport.astro} | 0 8 files changed, 46 insertions(+), 17 deletions(-) create mode 100644 .changeset/tasty-bags-accept.md rename packages/astro/test/fixtures/core-image/src/pages/{unsupported-format.astro => svgSupport.astro} (100%) diff --git a/.changeset/tasty-bags-accept.md b/.changeset/tasty-bags-accept.md new file mode 100644 index 000000000..d639ccab4 --- /dev/null +++ b/.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. diff --git a/packages/astro/src/assets/consts.ts b/packages/astro/src/assets/consts.ts index 9fd1bc7f0..d184c9359 100644 --- a/packages/astro/src/assets/consts.ts +++ b/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; diff --git a/packages/astro/src/assets/services/service.ts b/packages/astro/src/assets/services/service.ts index 9706c3ed0..c5f9cf935 100644 --- a/packages/astro/src/assets/services/service.ts +++ b/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 = { }); } } 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 diff --git a/packages/astro/src/assets/services/sharp.ts b/packages/astro/src/assets/services/sharp.ts index 04ddf77fa..f77a87654 100644 --- a/packages/astro/src/assets/services/sharp.ts +++ b/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. diff --git a/packages/astro/src/assets/services/squoosh.ts b/packages/astro/src/assets/services/squoosh.ts index 45933d600..d9307a219 100644 --- a/packages/astro/src/assets/services/squoosh.ts +++ b/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, + Exclude, Record > = { 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. diff --git a/packages/astro/src/core/errors/errors-data.ts b/packages/astro/src/core/errors/errors-data.ts index a9fa78174..52fdbed6c 100644 --- a/packages/astro/src/core/errors/errors-data.ts +++ b/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 diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js index 0edc26426..d5b9a051a 100644 --- a/packages/astro/test/core-image.test.js +++ b/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; diff --git a/packages/astro/test/fixtures/core-image/src/pages/unsupported-format.astro b/packages/astro/test/fixtures/core-image/src/pages/svgSupport.astro similarity index 100% rename from packages/astro/test/fixtures/core-image/src/pages/unsupported-format.astro rename to packages/astro/test/fixtures/core-image/src/pages/svgSupport.astro