Will <Image> component from next/image auto minify an SVG while building?
#next/image
faint loom
half coralBOT
Hi @faint loom. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
No, the default loader for the <Image> component from next/image does not optimize SVG images. This is due to a few reasons. First, SVG is a vector format meaning it can be resized losslessly. Second, SVG has many of the same features as HTML/CSS, which can lead to vulnerabilities without proper Content Security Policy (CSP) headers.
Therefore, it is recommended to use the unoptimized prop when the src prop is known to be SVG. This happens automatically when src ends with .svg.
Here is an example of how to use the unoptimized prop:
import Image from 'next/image'
const UnoptimizedImage = (props) => {
return <Image {...props} unoptimized />
}
If you need to serve SVG images with the default Image Optimization API, you can set dangerouslyAllowSVG inside your next.config.js:
module.exports = {
images: {
dangerouslyAllowSVG: true,
contentDispositionType: 'attachment',
contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
},
}
In addition, it is strongly recommended to also set contentDispositionType to force the browser to download the image, as well as contentSecurityPolicy to prevent scripts embedded in the image from executing.
Sources:
- Next.js Docs - Image Component and Image Optimization (https://nextjs.org/docs/app/api-reference/components/image#dangerouslyallowsvg)
- Next.js Docs - Image Component Advanced Props (https://nextjs.org/docs/app/api-reference/components/image#unoptimized)