I understand how to make a documents entire background transparent, but not sure how to make just 1 object transparent ** that stays transparent** when I export it.
I'm using inkscape to create some simple icons for a game.
For this issue, imagine a red letter A on a 10 px sq rectangle. (the rectangle is needed to set the dimensions of the exported A icon so that the icon is 10 px square in the game)
The problem is that I need to see the A, while the square that it sits on, should be transparent. That's not happening after I export the selected A and rectangle. The A is displaying OK, but so to is the rectangle as a painted object!. I'd expect to see just the A without any background as I see it in Inkscape, after its exported.
So far I've tried:
* Setting the document background to transparent checkerboard, and its background color wheel alpha to 0. I also tried to used both black and white for the alpha0 setting, and also turned document background back on again as combinations for testing. * Placed the red A above the Rectangle in their stack order * In terms of the rectangle: A) Set the rectangle to have no paint B) Gave the rectangle paint, but then setting the paint opaque and Alpha both to 0
In all cases, I see a transparent rectangle in Inkscape, but when I export the 10px sq selected image, I see the A just fine, but the background rectangle is not transparent -- its the color of the background set in the document setting background that I set to transparent (or the color if I used paint locally on the rectangle that I set to alhpa=0)
Somehow the rectangle is still picking up a background from somewhere when its being exported?.. I'd expect to see just the A without any background after its exported.
BTW, I've opened the exported A icon in other tools like Krita, and there too I see a background -- so the icon displays with a background in other drawing tools, not just the game.
What are the steps to make that rectangle appear transparent when I export my 10px sq A-icon please?
My document settings are the same.. My problem is not when I'm viewing the icon in Inkscape -- it looks like yours too.
But if you export the A and Square as a png, then, is the square transparent in the export when imported and viewed in something like Krita? what are your export settings?
Also, what are your OBJECT (the square's) fill and stroke paint settings? Are you using alpha setting there too/no paint/or only at the document level?
When I export what You show have, and pull the exported png into another app, I don't see what was in Inkscape -- now the Square is Opaque. So the A sits on a (white or black) rectangle. I need the square to be transparent as it was in Inkscape. That's the problem.
Hmm.. Additionally, just thinking out here -- Do I need to do anything to the combined A and rectangle images before i export it -- flatten, merge..?? (not sure what the right terms or options are here) , but at this time I'm simply highlighting/selecting the 2 images together and hitting export. Should I be doing some pre-processing of the 2 images before I export it so that the Alpha does not get stripped away (IF thats whats happening?)
@TylerDurden , @PixelPest I sincerely appreciate your attempts at answers and questions, but reading them sounds to me like I was not clear, so let me try again:
I'm using Win10, inkscape: Inkscape 0.92.4 (5da689c313, 2019-01-14)
I need to create an icon, that is 10 px square for a game (sorry, can't mention which one due to contract obligations). And I can not use a 10px square inkscape document as the background as suggested as that does not scale to the size and needs of my project (many icons to create).
Instead, I have 1 document with a transparent background document setting.
On one layer of the layers of the document, I created a simple square that is 10x10 px (call this the icon base), and then placed a Red A on top of it (call this the Letter A). I set the icon base's Alpha to 0, because I want icon base to be transparent in the final exported icon.png, and applied red paint to the Letter A.
So now, in Inkscape, when I select both objects, as expected, I see a transparent icon base with a red Letter A on top of it. So now I have 2 objects that I need to export as "the icon". All's well and good to this point.
The problem is: When I export the 2 selected objects as icon.png, in my game, I see the red Letter A alright, but the icon base IS NOT TRANSPARENT. (as it correctly displays in Inkscape).
Somehow, somewhere during the export process, icon base is losing its alpha channel (or that's what I think is happening, I could be wrong)
Therefore, what should do and/or what settings should I be checking in Inkscape, to ensure that when exported, icon base' s transparencyis exported as a transparent icon base ?
Hope that helps clarify the issue and the problem statements.
Grateful for any pointers, or things to check, or that I should try doing.
I´m sorry - but this all doesn´t make any sense. As I said I made thousands of in-app icons: 32x32/16x16px, multires whatever needed.
Why are you so stuck on the idea of needing an "icon base"? When you make a new Inkscape document go to its preferences and set it up to 10x10px - place the red "A" on it and that´s it. Are you really saying my example files in my first reply are not having a transparent background in your destination app? Please explain.
At the risk of repeating myself, your example Pixel, and my set up, are the same except that my document is larger and I'm creating my art and exporting to the size that's needed as I have outlined above. And I can not share files for contractual reasons.
I can not use the size of the document to determine the export png output size, if that's what you are suggesting. I'm not "hung up on it". I have good reasons relevant to my personal project to use a large document (which I have set to transparent and then am trying to use transparent squares as the base layer) to help define the size of a selected group of objects that I wish to export. I've used a simple 10x10 px example, but in truth I have many pieces of art of various sizes that I need to create and export. Many of them will duplicate some of the same objects, which I will be transforming in ways and recoloring etc. If I have to create a new document, sized to the export for each of the pieces I need to create, then that simply does not scale for my project/needs. But, if as you are seeing to suggest that that's the ONLY way to do this, then thank you, that solution will not work for me, and I'll just move on. Thank you for trying to trouble shoot this.
@Mark_e_7 As indicated by the other replies above, what you're seeing is not the normal, expected behaviour from Inkscape. There's one well-known way in which the transparent background might lose its transparency in 0.92, but it doesn't sound like you're using it. Nevertheless, for the sake of completeness, here it is:
Never use File > Save As > Cairo PNG. Always use File > Export as PNG Image.
Assuming you're exporting the right way, the behaviour you're seeing is odd. So, for now, forget about your existing project and let's try to get to the bottom of what's going on. Do the following (don't skip steps, even if they're obvious):
Launch Inkscape with a blank canvas.
In File > Document Properties > Page, make sure the Background Colour field has zero alpha. Optionally tick the Checkerboard Background field, but it doesn't actually make any difference to the export.
Draw a rectangle in the canvas. Make it a reasonable size for this test (your 10px × 10px example is small enough that aliasing of the content could potentially be affecting things, so go significantly larger than that).
Give the rectangle a visible fill colour with Alpha set to 255 (right click on the Fill colour field at the bottom left of the window, and select "Make fill opaque").
Create your content over the top. For now, just put some text in, for example. Make sure the text has a visible fill.
Select both the text and the rectangle, and create a group. This isn't essential, but makes for easier batch exporting when you do get back to having lots of icons on a page.
Enter the group and select the rectangle. Remove its fill (right click on the colour field, and "Remove fill"). Setting the Alpha to 0 will also work, but removing the fill is quicker and 'safer' as there's then definitely no colour there.
Exit the group.
Save the SVG file for further testing or investigation.
Select the group and use File > Export PNG Image. Once again, make sure the export dimensions are set to something reasonably large.
Check the exported file for transparency. If the background doesn't appear to be transparent, check it in a different program to be sure. Ideally compare it with one that's known to have transparency, to make sure it's not the viewing software that's at fault.
If that works then there's something wrong with your workflow or, less likely, with your original document. If that doesn't work then there's something wrong with Inkscape or the software you're using to view the exported files. In that case, since this test file is not commercially sensitive, you should upload both the Inkscape SVG file and the exported PNG here, so we can take a look at them.
Please report back with the outcome. I'm sure we can help get to the bottom of this, but you need to work with us to go through the basics, rather than just saying all the suggestions won't work for your particular case. There's something amiss, and it's only by going through the basics and confirming that Inkscape is (or isn't) behaving as expected that we'll work out what's going on with your real file.
Beyond the Basics Creating object-level transparency
Inkscape.org
I understand how to make a documents entire background transparent, but not sure how to make just 1 object transparent ** that stays transparent** when I export it.
I'm using inkscape to create some simple icons for a game.
For this issue, imagine a red letter A on a 10 px sq rectangle. (the rectangle is needed to set the dimensions of the exported A icon so that the icon is 10 px square in the game)
The problem is that I need to see the A, while the square that it sits on, should be transparent. That's not happening after I export the selected A and rectangle. The A is displaying OK, but so to is the rectangle as a painted object!. I'd expect to see just the A without any background as I see it in Inkscape, after its exported.
So far I've tried:
* Setting the document background to transparent checkerboard, and its background color wheel alpha to 0. I also tried to used both black and white for the alpha0 setting, and also turned document background back on again as combinations for testing.
* Placed the red A above the Rectangle in their stack order
* In terms of the rectangle:
A) Set the rectangle to have no paint
B) Gave the rectangle paint, but then setting the paint opaque and Alpha both to 0
In all cases, I see a transparent rectangle in Inkscape, but when I export the 10px sq selected image, I see the A just fine, but the background rectangle is not transparent -- its the color of the background set in the document setting background that I set to transparent (or the color if I used paint locally on the rectangle that I set to alhpa=0)
Somehow the rectangle is still picking up a background from somewhere when its being exported?.. I'd expect to see just the A without any background after its exported.
BTW, I've opened the exported A icon in other tools like Krita, and there too I see a background -- so the icon displays with a background in other drawing tools, not just the game.
What are the steps to make that rectangle appear transparent when I export my 10px sq A-icon please?
Thanks.
That is strange to me. I made already thousands of icons and all have the alpha channel enabled be default:
That´s the file:
and that´s the output:
Maybe I missed your point.
My document settings are the same.. My problem is not when I'm viewing the icon in Inkscape -- it looks like yours too.
But if you export the A and Square as a png, then, is the square transparent in the export when imported and viewed in something like Krita? what are your export settings?
Also, what are your OBJECT (the square's) fill and stroke paint settings? Are you using alpha setting there too/no paint/or only at the document level?
When I export what You show have, and pull the exported png into another app, I don't see what was in Inkscape -- now the Square is Opaque. So the A sits on a (white or black) rectangle. I need the square to be transparent as it was in Inkscape. That's the problem.
Hmm.. Additionally, just thinking out here -- Do I need to do anything to the combined A and rectangle images before i export it -- flatten, merge..?? (not sure what the right terms or options are here) , but at this time I'm simply highlighting/selecting the 2 images together and hitting export. Should I be doing some pre-processing of the 2 images before I export it so that the Alpha does not get stripped away (IF thats whats happening?)
How is this possible with the attached PNG file - what is your destiny application?
I´m not getting what you mean with rectangle? What is it for? The canvas probably? Can you upload an example file?
@Mark_e_7 , maybe no need to use the rectangle, PNG export can use your document size (10x10), by using the selector tabs.
Please share and example svg and its exported png file.
Also, what OS/version, Inkscape version and installer used.
@TylerDurden , @PixelPest I sincerely appreciate your attempts at answers and questions, but reading them sounds to me like I was not clear, so let me try again:
I'm using Win10, inkscape: Inkscape 0.92.4 (5da689c313, 2019-01-14)
I need to create an icon, that is 10 px square for a game (sorry, can't mention which one due to contract obligations). And I can not use a 10px square inkscape document as the background as suggested as that does not scale to the size and needs of my project (many icons to create).
Instead, I have 1 document with a transparent background document setting.
On one layer of the layers of the document, I created a simple square that is 10x10 px (call this the icon base), and then placed a Red A on top of it (call this the Letter A). I set the icon base's Alpha to 0, because I want icon base to be transparent in the final exported icon.png, and applied red paint to the Letter A.
So now, in Inkscape, when I select both objects, as expected, I see a transparent icon base with a red Letter A on top of it. So now I have 2 objects that I need to export as "the icon". All's well and good to this point.
The problem is: When I export the 2 selected objects as icon.png, in my game, I see the red Letter A alright, but the icon base IS NOT TRANSPARENT. (as it correctly displays in Inkscape).
Somehow, somewhere during the export process, icon base is losing its alpha channel (or that's what I think is happening, I could be wrong)
Therefore, what should do and/or what settings should I be checking in Inkscape, to ensure that when exported, icon base' s transparency is exported as a transparent icon base ?
Hope that helps clarify the issue and the problem statements.
Grateful for any pointers, or things to check, or that I should try doing.
I´m sorry - but this all doesn´t make any sense. As I said I made thousands of in-app icons: 32x32/16x16px, multires whatever needed.
Why are you so stuck on the idea of needing an "icon base"? When you make a new Inkscape document go to its preferences and set it up to 10x10px - place the red "A" on it and that´s it. Are you really saying my example files in my first reply are not having a transparent background in your destination app? Please explain.
I agree, but the OP says it doesn't work.
In either case, something seems not right with the transparency. Cannot replicate the issue here, tho.
@Mark_e_7 , please share example files.
At the risk of repeating myself, your example Pixel, and my set up, are the same except that my document is larger and I'm creating my art and exporting to the size that's needed as I have outlined above. And I can not share files for contractual reasons.
I can not use the size of the document to determine the export png output size, if that's what you are suggesting. I'm not "hung up on it". I have good reasons relevant to my personal project to use a large document (which I have set to transparent and then am trying to use transparent squares as the base layer) to help define the size of a selected group of objects that I wish to export. I've used a simple 10x10 px example, but in truth I have many pieces of art of various sizes that I need to create and export. Many of them will duplicate some of the same objects, which I will be transforming in ways and recoloring etc. If I have to create a new document, sized to the export for each of the pieces I need to create, then that simply does not scale for my project/needs. But, if as you are seeing to suggest that that's the ONLY way to do this, then thank you, that solution will not work for me, and I'll just move on. Thank you for trying to trouble shoot this.
@Mark_e_7 As indicated by the other replies above, what you're seeing is not the normal, expected behaviour from Inkscape. There's one well-known way in which the transparent background might lose its transparency in 0.92, but it doesn't sound like you're using it. Nevertheless, for the sake of completeness, here it is:
Assuming you're exporting the right way, the behaviour you're seeing is odd. So, for now, forget about your existing project and let's try to get to the bottom of what's going on. Do the following (don't skip steps, even if they're obvious):
If that works then there's something wrong with your workflow or, less likely, with your original document. If that doesn't work then there's something wrong with Inkscape or the software you're using to view the exported files. In that case, since this test file is not commercially sensitive, you should upload both the Inkscape SVG file and the exported PNG here, so we can take a look at them.
Please report back with the outcome. I'm sure we can help get to the bottom of this, but you need to work with us to go through the basics, rather than just saying all the suggestions won't work for your particular case. There's something amiss, and it's only by going through the basics and confirming that Inkscape is (or isn't) behaving as expected that we'll work out what's going on with your real file.
.... and you´re not willing to "hit cmd+N for a new file and place a red "A" 10pt on it. So I´m outta here.
@Mark_e_7 , a dummy file could be shared, as long as it has the same issues.