在 PWA 清单中使用 SVG 时是否可以使用所有图标大小

Question

我正在使用 SVG 文件作为应用程序图标。我的清单中有以下代码，但我发现有时图标在桌面/某些移动型号中无法正确显示，而且在网络推送通知中也没有正确显示。那么，我如何确定 SVG 文件适合的大小。以下是图标的清单内容

"icons": [
    {
    "src": "/images/icons/iotradio.svg",
    "sizes": "36x36 48x48 72x72 96x96 120x120 128x128 144x144 152x152 180x180 192x192 384x384 512x512"
    }
]

Answer 1

更好地指定type：

"type": "image/svg+xml",

您的尺寸列表很好，但如果您想要更完整的列表：

36x36 48x48 57x57 60x60 72x72 76x76 96x96 114x114 120x120 128x128 144x144 152x152 180x180 192x192 256x256 384x384 512x512

常见的做法（为了获得最佳兼容性）是生成许多不同大小的 PNG 并列出它们，直到 512x512，最后是 513x513 的 SVG 条目。

36x36 48x48 57x57 60x60 72x72 76x76 96x96 114x114 120x120 128x128 144x144 152x152 180x180 192x192 256x256 384x384 512x512

但现在已经是 2021 年了，我想对于大多数最新平台来说，仅 SVG 清单应该没问题。人们可能应该将那些不支持 SVG 图标的图标扔进垃圾桶。

顺便说一句，Google 的 PWACompat 库非常好。以下代码，不带任何 <link rel="[??-icon or -image]"...或<meta name="[web-app / theme / msapplication-related stuff]"...，是截至 2021 年的最佳实践（尽管它没有解决某些旧版浏览器不支持 SVG 图标的潜在问题）：

...(from 36-icon.png to 384-icon.png)...
{
  "src": "512-icon.png",
  "sizes": "512x512",
  "type": "image/png"
},
{
  "src": "icon.svg",
  "sizes": "513x513",
  "type": "image/svg+xml"
}