aeirola / react-native-svg-app-icon

Generate all app icons for you React Native apps from a single SVG file

Home Page:https://www.npmjs.com/package/react-native-svg-app-icon

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Error: Input image should be opaque - But why this icon is rejected?

giugrilli opened this issue · comments

I keep getting this error. I asked my graphic designer to remove all transparencies, don't understand much of graphic.

here is the icon: https://we.tl/t-xxohhKRDxD

Why this keeps getting the error?

Looking at the file, it doesn't seem to include any solid background colour, making it a transparent SVG file. The use of enable-background doesn't achieve what your designer might have assumed it would.

You could make the image non-trasparent by adding a solid background layer such as

<rect fill="#fff" width="108" height="108" />

to the start of the SVG element.

You can also wait for the next version to be released, which will allow transparent icons to be used. I'll hope to get that one out soon.

Version 0.2.0 now supports transparent images as well, so this should not be an issue anymore. Feel free to reopen the issue, or create a new one, in case you still have some issues with the file.

commented

I was also having the opaque issue, even using a proper fore and background. I found out that in Inkscape, I scrolled by accident the opacity bar (keeps happening) of the background and it was at ~99.7%. Changed to 100% and fixed it! :) Maybe the error could tell where in which file that happened? I was really thinking it was a foreground issue until I had the idea of checking the opacity bar.

@SrBrahma unfortunately not really feasible to try to interpret a SVG file and determine why some pixels aren't fully covered.

One solution would be to just strip the alpha channel to make the image fully opaque, but I was afraid that could produce some accidental errors in the output. For example from minimal gaps between elements which would only show on high resolution rasters.

commented

I don't think it's needed to change the opacity of the input, but a indicator if the error happened on icon.svg or icon-background.svg would be nice!

Ah, yes. That makes sense. Actually only the background image needs to be opaque, but the error message for transparent background images could definitely be better. I'll see if I could get it fixed some day.

commented

#42 also improves the error message