search

vite-pwa / assets-generator

Zero-config PWA Assets Generator
https://vite-pwa-org.netlify.app/assets-generator/
MIT License
94 stars 9 forks source link

Generated icons have jagged edges #35

Open atjn opened 8 months ago

atjn commented 8 months ago

I am generating my icons with the minimal-2023 preset and the original icon is:

<svg style="height:100%;width:100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <path d="m3 3h26v6h-26z" fill="#C1CBFF"/>
  <path d="m5 9h22v18h-22z" fill="#D6DDFF"/>
  <path d="m15 3h2v24h-2z" fill="#8EA1FF" opacity=".7"/>
</svg>

The generated icons should look like this: image

But the 64x64 has wierd fringing in the top: image

And the 192x192 also has it down the middle: image

Even the 512x512 has it, although it is too small to notice. I don't understand how that happens, it seems to me like it would definitely produce a uniform color given that it is following a completely straight SVG line.

I haven't tried to see if I can find a setting that would make this go away, but even if there is one, I think the default settings should be changed to ensure that straight lines also look straight in the generated icons.

userquin commented 8 months ago

This package uses sharp to generate the icons, I have no idea why this weird output, I Will check it on my local.

cyberalien commented 8 months ago

Sharp uses libvips to generate icons, which uses ImageMagick to parse SVGs, so probably ImageMagick bug: https://github.com/imagemagick/imagemagick