Open a 32 x 32 pixel canvas and import the symbol?
I think you didn't get my question. I can open the 32x32 PNG and it doesn't get cropped but if I copy the 32x32 PNG from one canvas into my canvas where the sprite is it gets cropped.
Maybe that helps to understand the problem:
1) Canvas with facebook icon 32x32px. I select everything and copy it.
2) Canvas which should contain more than one icon (96x64 px).
When pasted the transparent border gets cropped. If I import the icon directly it also gets cropped.
1 person found this helpful
Try drawing an "invisible object"—a rectangle with no fill and no stroke—the size of your canvas (32x32), in your original symbol.
Hmm its kind of a nice workaround but a little bit much effort because I have to open it and create the object, group the objects etc. Better would be if there is any option which I can switch on/of so that I can drag it directly into my sprite PNG. But it seems that this would be the only solution, maybe I stick to illustrator for arranging many objects.
I think the problem, as you're experiencing it, is that it doesn't import the canvas, just the objects. (That, and it treats transparency as a non-entity.)
However, it respects transparency in terms of positioning. If you're willing to pay attention to the numbers, you should be able to use the Info panel to help you place the imported objects—e.g., starting at (x:0, y:0), then (x:32, y:0), and so on—without the need to draw an invisible pseudo-canvas within each imported file.
BTW, I have no idea whether this works or not, but if you're feeling adventurous, you might check out this extension, the CSS Sprite Maker: