为什么 next.js Image 组件没有将 svg 转换为 .webp 文件？答案

【问题标题】：Why is next.js Image component not converting the svg to .webp file?为什么 next.js Image 组件没有将 svg 转换为 .webp 文件？
【发布时间】：2022-08-03 21:47:52
【问题描述】：

语境

所以我在 Next.js 中创建了一个简单的 Hero + Navbar。我使用 next.js Image 组件。在我网站上的所有图片（我认为总共 3 张）上，大小为 0B 并立即加载。它们的类型为 .webp - 所以 next.js 图像确实转换了这些文件。

问题

在导航栏中，我的徽标是 2KB 的 SVG。我使用它的方式与使用其他 .png 文件的方式相同，但这次是 .svg 在浏览器中，文件不会缩小，它仍然是 .svg 而不是 .webp 的类型。这是为什么？

这是我如何使用它的屏幕截图：

这是网络选项卡（根据图像过滤）。

我像这样import logoDark from \"../public/assets/Logon New.svg\"在页面中导入svg文件

难道我做错了什么？为什么 next.js 不能制作非常快的 .webp？

非常感谢

标签： javascript svg next.js

【解决方案1】：

多部分答案：

为什么不需要 SVG 的进一步优化

无需获取 SVG 并将它们转换为光栅格式。矢量格式是通常优化并提供无损缩放，除非桌面程序添加更多元数据并使文件膨胀 - 即使这可以使用https://jakearchibald.github.io/svgomg/等工具进行纠正

`next/image` 未优化 SVG：

该文档显示了为什么 svg 文件被单独留下

出于几个原因，默认加载器不会优化 SVG 图像。首先，SVG 是一种矢量格式，这意味着它可以无损地调整大小。其次，SVG 具有许多与 HTML/CSS 相同的功能，如果没有适当的内容安全策略 (CSP) 标头，可能会导致漏洞。

如果您需要使用默认的图像优化 API 提供 SVG 图像，您可以在 next.config.js 中设置 dangerouslyAllowSVG 和 contentSecurityPolicy：

https://nextjs.org/docs/api-reference/next/image#dangerously-allow-svg

【讨论】：

语境

问题

为什么不需要 SVG 的进一步优化

next/image 未优化 SVG：

`next/image` 未优化 SVG：