Mobile app version of vmapp.org
Login or Join
Si6392903

: Question about Inkscape (icons with solid white background with an alpha image) EDIT: Hello, yes, I am trying to get transparent icons on a solid white background. Also, the second link is not

@Si6392903

Posted in: #Alpha #Inkscape #Logo #Transparency

EDIT:
Hello, yes, I am trying to get transparent icons on a solid white background.
Also, the second link is not broken. It needs html code to display it correctly.
Here is a screen shot of what it does when I change background color using html.
I can get it using Pixlr, but the image quality suffers.

[



I have looked high and low but everything online deals with a transparent background. I have managed to do that using Inkscape, but what I need is a solid white background with an alpha image.

PNG with a transparent alpha background

I have also managed to make the image itself transparent with a solid background using Pixlr. But, the quality is just horrible. Can I achieve the below using Inkscape or similar without compromising on image sharpness?

PNG with transparent background

PNG with transparent icon

The second will show up as blank image unless it is embedded with background color in html.

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Si6392903

2 Comments

Sorted by latest first Latest Oldest Best

 

@Shanna688

Another option. I don't know Pixlr, but since you are able to save PNG with alpha, it appears to be a decent image editor.


Export the icon from AI or Inkscape to PNG, as you have done previously, but with a very large image size (e.g. 10 times larger than needed)
Open it in Pixlr, add solid background and make the coloured areas transparent
Resize (resample) the image to the required size (use the best quality settings)


Hopefully the alpha channel gets smoothed during resize and you will get the required good image quality.

10% popularity Vote Up Vote Down


 

@Ogunnowo857

So you are drawing your icons in Inkscape? Try this:


If you are using lines of some width, use the "Path > Stroke to path" command to convert them into filled paths without a stroke.
If you are using text, use the "Object > Ungroup" command to convert each text object into individual filled paths.
If you are using filled paths, leave them unchanged but check that they don't have a stroke.
Select all resulting paths.
Use the "Path > Union" command to merge them into one filled path.
Draw a rectangle of the desired icon's size over the merged path.
Select both the rectangle and the merged path.
Use the "Path > Exclusion" command to subtract the path from the rectangle.
Adjust the color of the resulting object.
Export to PNG.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme