How to use SVG as PWA icon?

user_1475428 0
Viewed 2621

When making a progressive web application (PWA), you have to create enormous amount of different sizes of its icon and declare them in a .manifest file. It seems obvious that a single SVG would solve this mess brilliantly but unfortunately I cannot do this for now.

I tried this:

  1. Create 2 different SVG, set them square artboards (canvas) in Illustrator. Result: in Chrome devtools - either "Image file has incorrect size (1200x1200): must provide at least 144x144" or "Failed to load your svg". However, same svg on same url been opened in Chrome is visible perfectly!
  2. Set "sizes":"any" in .manifest. Although this keyword mentions as accepted, devtools show an error.
  3. Added "purpose": "maskable" or "purpose": "maskable any" or "purpose": "any".

Devtools say that my SVG (150x150) is less than minimal required (144x144) and also, I must supply at least one icon in png, svg(!!!) or wepP format.

progressive-web-apps svg
1 Answers

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

There's so much bureaucracy in modern standarts, kill me please!

user_14754280
Related