Chromium中Web应用清单SVG图标加载失败问题求助

问题描述 #

• Chromium版本：148.0.7778.167 (Official Build) snap (64-bit)
• PWA应用清单中SVG图标加载失败，报错「Icon ....svg failed to load」
• 同目录下的logo.png图标加载正常，Firefox浏览器无此兼容问题
• 已按建议修改后的manifest.webmanifest内容：

{
   "name": "Test app",
   "icons": [
      {
         "src": "/icons/logo.svg",
         "type": "image/svg+xml",
         "sizes": "512x512"
      },
      {
         "src": "/icons/logo.svg",
         "type": "image/svg+xml",
         "sizes": "192x192"
      },
      {
         "src": "/icons/logo.png",
         "type": "image/png",
         "sizes": "144x144"
      },
      {
         "src": "/icons/logo.svg",
         "type": "image/svg+xml",
         "sizes": "any"
      }
   ],
   "start_url": "/index.html",
   "display": "standalone"
}

解决步骤 #

• 校验SVG的MIME类型
  在Chromium DevTools的Network面板中查看SVG请求的响应头，确认Content-Type为image/svg+xml。如果服务器返回的是text/plain或其他类型，需要调整服务器配置（比如Nginx/Apache的MIME映射）。

• 简化图标清单配置
  移除重复的SVG条目，仅保留sizes: "any"的SVG配置即可——该条目可适配所有尺寸，无需重复声明固定尺寸的同一张SVG：

  {
     "name": "Test app",
     "icons": [
        {
           "src": "/icons/logo.png",
           "type": "image/png",
           "sizes": "144x144"
        },
        {
           "src": "/icons/logo.svg",
           "type": "image/svg+xml",
           "sizes": "any"
        }
     ],
     "start_url": "/index.html",
     "display": "standalone"
  }
  

• 检查SVG文件有效性
  用文本编辑器打开SVG文件，确认无语法错误（如未闭合标签、无效属性）。Chromium对SVG语法的容错性低于Firefox，微小的语法问题都可能导致加载失败。

• 验证SVG路径可访问性
  在Chromium地址栏直接输入/icons/logo.svg，确认能正常显示图片。如果路径存在问题，尝试改用相对路径（如./icons/logo.svg）测试。

• 清除浏览器缓存
  进入Chromium设置→隐私和安全→清除浏览数据，选择「缓存的图片和文件」「Cookie和其他站点数据」，清除后重新加载PWA应用。

内容的提问来源于stack exchange，提问作者AlanQ