使用SVG在PWA清单中时，是否可以使用所有图标尺寸？

Question

我正在使用SVG文件作为应用图标。 我在清单中有以下代码，但是我发现有时桌面/某些移动模型上的图标不正确，并且Web推送通知也不正确。 那么，我该如何确定适合SVG文件的大小？ 以下是图标的清单内容。

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

- user1066231

Answer 1

最好明确指定“类型”：

"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条目。

...(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的清单对于大多数最新平台应该是可以的。人们可能应该把那些不支持SVG图标的东西扔进垃圾桶里。”

“顺便说一下，Google的PWACompat库真的很好用。以下代码，没有任何<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" />

- Tom Chen