Unsupported image format "svg"

Support
,
1

Netlify site name: spryker-community.netlify.app

When deploying my (Astro based) website, I get the Unsupported image format "svg" error.

See below for the full log (sorry, new user and I’m not allowed to upload anything)

Weirdly enough, the site builds and deploys without a problem locally, on GitHub Pages and on Vercel. But I’d prefer to use Netlify :slight_smile:

So what is different on Netlify that it doesn’t build, are there any separate image setting that I should adjust/activate to allow for SVG? I also have another Astro website running perfectly fine on Netlify and it also has SVG images so that doesn’t seem to be a problem? The log also isn’t really specific as to which SVG is the problem so I don’t really know where to start solving this.

To reproduce:

  1. Clone [repo](GitHub - mearashadowfax/ScrewFast: Open-source Astro website template with sleek, customizable TailwindCSS components., main or monolingual branch (same result))
  2. npx @astrojs/upgrade
  3. npx astro add netlify
  4. npm run astro check (will result in 0 errors and 0 warnings)
  5. Deploying locally: works as expected
  6. Deploying to Github pages: works as expected
  7. Deploying to Netlify: will result in an error:
9:38:26 PM: 19:38:26 ▶ src/pages/404.astro
9:38:26 PM: 19:38:26   └─ /404.html[AstroUserError] Unsupported image format "svg"
9:38:26 PM:   Hint:
9:38:26 PM:     Use one of avif, jpg, png, webp instead.
9:38:26 PM:   Stack trace:
9:38:26 PM:     at Object.validateOptions (file:///opt/build/repo/node_modules/@astrojs/netlify/dist/image-service.js:32:19)
9:38:26 PM:     at async getImage (file:///opt/build/repo/dist/chunks/_astro_assets_BfOTnQq2.mjs:989:42)

Any suggestions towards a solution are much appreciated! :pray:

Full log: https://github.com/user-attachments/files/16102410/log.txt

2

SOLVED

For any other users that are encountering this:

My Astro site was importing faviconSvgSrc in the frontmatter:

import faviconSvgSrc from "@images/icon.svg";

Then it was generated:

const faviconSvg = await getImage({
  src: faviconSvgSrc,
  format: "svg",
});

And used as follows:

<link href={faviconSvg.src} rel="icon" type="image/svg+xml" sizes="any" />

It seems that Netlify’s image service is having trouble importing this SVG, or there might be another issue at play. After removing all occurrences of faviconSvgSrc, the deployment worked successfully on both branches.

As an alternative, I used

<link href="/icon.svg" rel="icon" type="image/svg+xml" sizes="any" />