Loading SVG with next/image and dangerouslyAllowSVG

[nirajniroula]

Summary

SVG image urls with additional parameter not loading.

Description

Our team recently faced the task of upgrading NodeJS from version 16 to 18 due to the upcoming end of support for Node 14 and 16 by Vercel. During the upgrade, we also needed to update NextJS from version 11 to version 12, along with several other packages. (Note: Everything was running fine before upgrade.)

While performing the upgrade, we encountered a peculiar issue related to NextJS image support for SVG images. The problem arose with two different images that were sourced from the same place, a headless CMS. Surprisingly, one of the images displayed without any issues, while the other had trouble loading.

The source URLs of both images looked something like this:

• Image Source 1: https://images.prismic.io/abc-demo/7723d14c-1233-4550-92da-59da4a86218f_Nav+Icon_Banking.svg?auto=compress,format 
• Image Source 2: https://abc-demo.cdn.prismic.io/abc-demo/9ddebda9-26bc-49c1-b2c0-55d7bdc52c13_New_Banner.svg

One crucial difference between the two URLs was the presence of the auto=compress,format parameter in Image Source 1 and the image loads without any issues when the parameter is removed.

The parameter was appended by prismic (CMS) which uses imgixAPI for image optimization. I couldn't look further into the Next ImageAPI (specifically how it works when parameter are also used) except for this documentation.

Additionally, the issue was fixed by setting dangerouslyAllowSVG: true in next.config.js.
Although the issue was resolved, I would appreciate if someone could help me find

1. why one of the images displayed without any issues, while the other had trouble loading before setting dangerouslyAllowSVG: true and
2. how exactly dangerouslyAllowSVG: true solved the issue.

Thanks in advance.

Additional information

next config for image

images: {
    domains: [
      "abc-demo.cdn.prismic.io",
      "images.prismic.io",
    ],
  },

[styfle]

When the src prop ends with .svg, then the next/image component will automatically set unoptimized.

next.js/packages/next/src/shared/lib/get-img-props.ts

Lines 389 to 393 in 2072f86

	if (isDefaultLoader && src.endsWith('.svg') && !config.dangerouslyAllowSVG) {
	// Special case to make svg serve as-is to avoid proxying
	// through the built-in Image Optimization API.
	unoptimized = true
	}

If you know the content type is svg but the src prop doesnt end with .svg (your first example), then you can add the unoptimized prop to get the same behavior.

I highly recommend you avoid dangerouslyAllowSVG config unless you understand the security risks.

I also created a PR to update the docs: #60735

[nirajniroula]

Thanks for the explanation.

[nirajniroula]

@styfle One thing though, do you have any idea why when the svg content type not ending with .svg doesn't load with optimization set to true? Could it be due to this param (auto=compress,format) affecting the next/image's optimization process.

[styfle]

The content type header and file extension are two different things.

My description above applies to the file extension and are client-side checks by the image component, not performed by the image optimization API.

[RobsonOlv]

In case using AWS S3 pre-signed URLs, the src will contain query params. So the src.endsWith('.svg') is possibly problematic.

[Ebrahim-Ramadan]

just add
dangerouslyAllowSVG: true,
in your next.config.mjs
and you should be fine

Next.js is blocking SVG images by default when using the

component unless you explicitly allow them using the dangerouslyAllowSVG option.

[paulocf92]

Should we follow the docs recommendations even if we're using imported (self-hosted) svg files to be fed to Image component? Or just svgs pointing to external urls? The svgs are looking with jagged edges without those props currently. 😕