svg - 在 PWA manifest 中使用 SVG 时是否可以使用所有图标大小

Question

我正在为应用程序图标使用 SVG 文件。我在 list 中有我的以下代码，但我看到有时图标无法正确出现在桌面/某些移动模型中，也没有出现在 Web 推送通知中。那么，我如何确定我的 SVG 文件适合的大小。以下是图标的 list 内容
"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",

您的尺码 list 没问题，但如果您想要更完整的 list :

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

通常的做法(为了获得最佳兼容性)是生成大量不同大小的 PNG 并将它们列出到 512x512，最后是 513x513 的 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"
}

但是我们现在是 2021 年，我猜对于大多数最新平台来说，仅 SVG 的 list 应该没问题。人们可能应该把那些不支持 SVG 图标的东西扔进垃圾箱。
顺便说一句， Google's PWACompat library真的很好。以下代码， 没有任何 <link rel="[??-icon or -image]"...或 <meta name="[web-app / theme / msapplication-related stuff]"... , 是截至 2021 年的最佳实践(虽然它没有解决一些旧版浏览器不支持 SVG 图标的潜在问题):

<link rel="manifest" href="manifest.webmanifest" />
<script async src="https://cdn.jsdelivr.net/npm/pwacompat" crossorigin="anonymous"></script>
<!-- for legacy browsers: -->
<link rel="icon" type="image/png" href="res/icon-128.png" sizes="128x128" />