summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--.changeset/tasty-bags-accept.md5
-rw-r--r--packages/astro/src/assets/consts.ts16
-rw-r--r--packages/astro/src/assets/services/service.ts11
-rw-r--r--packages/astro/src/assets/services/sharp.ts4
-rw-r--r--packages/astro/src/assets/services/squoosh.ts5
-rw-r--r--packages/astro/src/core/errors/errors-data.ts4
-rw-r--r--packages/astro/test/core-image.test.js18
-rw-r--r--packages/astro/test/fixtures/core-image/src/pages/svgSupport.astro (renamed from packages/astro/test/fixtures/core-image/src/pages/unsupported-format.astro)0
8 files changed, 46 insertions, 17 deletions
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<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
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<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.
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
index 2d1f08b96..2d1f08b96 100644
--- a/packages/astro/test/fixtures/core-image/src/pages/unsupported-format.astro
+++ b/packages/astro/test/fixtures/core-image/src/pages/svgSupport.astro