如何将SVG用作PWA图标？

Question

如何将SVG用作PWA图标？

7

制作渐进式Web应用程序（PWA）时，您需要创建大量不同大小的图标并在.manifest文件中声明它们。一个SVG图标看起来可以很好地解决这个问题，但不幸的是，目前我无法做到这一点。

我尝试了以下方法：

1.使用Illustrator创建2个不同的SVG，并将它们设置为方形画板（画布）。结果：在Chrome开发工具中，要么显示“图像文件大小不正确（1200x1200）：必须提供至少144x144”，要么是“无法加载您的svg”。然而，在Chrome中打开同一网址上的相同SVG却可以完美显示！

2.在.manifest文件中设置“sizes”：“any”。虽然此关键字被认为被接受，但是开发工具会显示错误信息。

3.添加“purpose”：“maskable”或“purpose”：“maskable any”或“purpose”：“any”。

开发工具指出我的SVG（150x150）小于最小要求（144x144），同时还要求我必须提供至少一个png、svg或wepP格式的图标。

- fathergorry

1

你不必为 PWA 的图标创建“大量不同尺寸”。在 manifest.webmanifest 文件中（也可以使用 JSON 扩展名找到），您可以放置像 144x144（Chrome 使用的主要图标）、192x192 和 512x512 这样的尺寸（2 的幂是常用的图标尺寸）。请查看 Google 的文档、MDN 的文档和 W3C 规范，了解有关 Web 应用程序清单的详细信息。 - BarryCap

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- fathergorry · Accepted Answer

实际上有一些规则没有在开发者工具中提到。您应该严格按照以下格式编写清单：

There are some rules by fact that are not mentioned in devtools. You should format manifest exactly like this:

  "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.
  }]

现代标准中有太多的官僚主义，请杀了我吧！