如何使用SVG作为PWA图标？

在制作渐进式web应用程序（PWA）时，必须创建大量不同大小的图标，并在.manifest文件中声明它们。很明显，一个SVG就能很好地解决这个问题，但不幸的是，我现在还不能做到这一点

我试过这个：

创建2个不同的SVG，在Illustrator中将其设置为方形艺术板（画布）。结果：在Chrome开发工具中-要么“图像文件大小不正确（1200x1200）：必须至少提供144x144”，要么“无法加载svg”。然而，在Chrome中打开的相同url上的相同svg是完全可见的

在清单中设置“大小”：“任意”。尽管该关键字提到已接受，但devtools显示一个错误

增加“目的”：“可掩盖”或“目的”：“可掩盖任何”或“目的”：“任何”

---

Devtools说我的SVG（150x150）低于最低要求（144x144），而且我必须至少提供一个png、SVG（！！！）或wepP格式的图标。

事实上，有些规则在Devtools中没有提到。 您应该按照如下方式设置清单的格式：

  "icons": [{
    "src": "/my/etc/pwa1/cheese_sq.svg", //inside the scope!
    "sizes": "48x48 72x72 96x96 128x128 256x256", //see the size in the devtools, not in editor. I've set up size 1200x1200 in Illustrator, but Chrome says it's 150x150. Also, "sizes":"any" not work.
    "type": "image/svg+xml", //not image/svg which is still visible in web
    "purpose": "any" //not "maskable any" as you may see there in answers.
  }]

---

现代艺术中有这么多官僚主义，杀了我吧

但是，这个正确注册的svg图标在某些情况下可能不会显示。更好地使用png的动物园。是的，你应该使用png，然后有不同的用例。如果没有PNG，您可能无法通过某些浏览器中的PWA测试。使用我的工具来生成你的清单和图标集，如果你喜欢，OMG你的应用程序生成这么多大小。如果这被认为是一个好的实践，那么PWA的意识形态就出了严重的问题……这不是PWA的意识形态LOL，只是消费者使用了这么多不同的设备。我的意思是有超过10000种不同的机器人。这是我所知道的不同浏览器和不同类型设备使用的各种图标的集合。如果有这么多设备，那么Android操作系统应该对SVG和良好的大小调整算法有强大的支持，而不是将这些问题推到应用程序开发人员身上。