hi all, first post here. I am hoping you can teach me a quicker way of including a transparent background in a drawing. what i do is draw images on inkscape which are less than 48px x 48px. they will be used to animate the image (e.g. walking, shooting, etc.). i've drawn all of the images in one svg file. now since every image has different sizes (all of which are less than 48px x 48px), what i do is draw a 48px x 48px rectangle in the same layer, make its draworder to be the lowest and make it transparent. then i group (ctrl+g) the background with the image. i do this for all the images i created.

is there a quicker way to this? i need all of the images to be 48px x 48px. also if i need to ungroup the image, i am having difficulty selecting the transparent image because i cannot click on it anymore. i can window it but everything else gets selected also.

hope my explanation is not too confusing.
thanks

Welcome to InkscapeForum!

Hhhmm.....well my question would be why do you need to select the transparent background?

.....And my next question, is why do you need the transparent rectangle in the first place? Inkscape's background is transparent by default. That means that all your characters automatically have a transparent background.....unless you've changed the background color/alpha.

I don't know much about animating SVGs. I'm thinking that you'd need each character, or "frame", either in its own layer, or maybe even a single doc. How are you going to animate it? Javascript? SMIL? Synfig? Blender? Or will you be converting to raster (i.e. GIFs)?

If you need to continue in this way though, you could use the Tab key to select the transparent rectangle. Tab will select the first thing you drew, and Shift + Tab will select the last thing you drew (in general). So you can tab, tab, tab, etc. until you see the bounding box around the character. Or if there are a lot of objects, you could select something, and Tab will select the thing you drew after you drew the one that's selected (if that made sense?). So you wouldn't need to tab through everything.

hi thanks for the reply.
What i do is i batch export them as png files so every drawing has its own frame. i drew all of the character movements in one svg file and just export them into individual png files. I need the transparent rectangle because i need the character to be at the same "anchor point" throughout the animation. e.g. a spawning effect from a tiny dot to a big dot. the tiny dot will start out at the bottom of the frame (e.g. ground) and it will slowly grow into a big dot. all throughout the animation the bottom of the dot is still touching the ground. if i dont have a consistent size frame, the animation will start at the center of the dot and will just grow radially. the other reason is the invisible frame is needed when i do "touch" events on the frames. a consistent size frame will ensure that i will be able to touch enough surface area to guarantee the image was touched. if i didnt have it, it would be very difficult to try to hit a tiny dot.
i am doing this for my game for the iphone. the animation is done through cocos2d and using a spritesheet made with texturepacker. i will show some of the frames i created but i dont know how to attach images to this forum? i should probably upload them to flickr and link them here.

the "tab" is a great tip. thank you.

View mode 'outline' will show all objects even if they have an invisible stroke and fill. You have to click on the actual path, but it is very convenient for the purpose you want.

hi thanks for the view mode 'outline tip'. that works! i guess there is no quicker way to have a constant 48px x 48px background behind the image other than manually adding a transparent square?

Using the Full Editor, rather than Quick Reply, you can find Upload attachments tab below Submit button. That will host the image here. You can also upload them anywhere, and using the Full Editor's IMG tags, use the link to insert the image. viewtopic.php?f=6&t=11753

thanks for the tip, below are 2 images i created, one of them with the transparent background and the other i gave the background a fill color.
so i have like 30 of these in the same svg file where in the character have different positions. i anchor the character to the lower left corner. the background is 48px x 48px. what i do is:
1. duplicate the background image
2. position the image
3. make the background transparent
4. group them
5. export the image as .png

now i do this for all of the images. any advice to make the task quicker is appreciated.

Is there any reason that you can't simply do it like this: Set the canvas size to 48px x 48px and draw each image on a different layer. When you export (assuming you're using File => Export Bitmap) make sure that only one layer is visible at a time, then select the "Page" option for the Export Area.

Export isn't dependent on what you see on screen, if you're in outline mode the export will still be full colour - so your other alternative is just to use Druban's suggestion. Each time you click on a square the Export Bitmap coordinates are updated live, so creating your images is simply a case of switching to outline mode and clicking each square at a time, setting its filename and clicking export. Click on the next square, set its filename, export...

It might be worth creating your squares as clones on another layer. That way you can avoid clicking them by accident (or avoid clicking your images when you want to select the squares), and you can easily give them all a fill by changing the "master" object when you want to see them for reference, and make them all transparent just as easily for export.

hi Xav,
the clone suggestion solves the transparent background, that helps out a lot since now i dont have to duplicate the rectangles and move them manually.

you are right, drawing within the canvas limits is the simplest way. but i do not know how to batch export them if i use the canvas since they are occupying the same canvass. i batch export the images also because i need to recreate them in 2 different sizes (48px and 96px). i found the pages-extension (allows multiple pages in the same project) last night but had problem installing it. it shows up in extensions dropdown menu but i havent been able to make it work yet.

also, after i group the image with the background, i then export->bitmap it and specify a filename. if i had to do some edits, i Ungroup the image, do the edits and Group them again. but when i do the export->bitmap again, the filename defaults back to the "ga1234.png" which is just a random filename. does anyone know how to prevent this? or if i can change the default filename to be something else and in sequence (e.g. icon_1, icon_2, icon_3,etc)?

this method that i do right now is just the way i know how to do it but if you guys have any other procedures that you know to create animation frames, can you share them please. thanks so much

Now that I understand what you're doing better, I don't think there's much I can say that would help. Animation is mostly out of my league. There is a guy on this forum, who is using Inkscape to make....at least one game, maybe more, I'm not sure. Here's his website, which contains a lot of info about his work http://sugarpillstudios.com/ (member name is LiquidAsh). Oh, and here's the topic announcing the game and asking for players to test: viewtopic.php?f=9&t=11844

I have no idea how he animates it though.

hi brynn, i will definitely check out the link you posted. i have the animating task dialed, its the creation of the frames that takes time for me. i just manually edit the drawings until i get the effect that i want. like for one of my characters, i have at least 25 frames so that i can show walking, shooting, dying, etc. and i just create them with a prefix name and a number (e.g. slime_1,slime_2). that's why I'm trying to find ways to make file naming, grouping, background making quicker because i need to do it for a lot of frames. inkscape rocks! i tried gimp and it was not as easy for me to use as inkscape. thanks again.

Ah, I hadn't realised you were batch exporting.

As for grouping then needing to make subsequent edits: you don't have to ungroup, you can just double-click on the group to "enter" it (or right-click => Enter Group...), then make your edits, then double-click on a blank bit of the canvas to exit the group (or right-click => Go To Parent). That should leave your filename the same as you're not creating a new group each time.

I believe the filename comes from the ID of the group, which you can get to (and set) via right-click => Object Properties. It needs to meet the conventions of id attributes in XML files, so if you stick to alphanumerics, underscores and hyphens (no spaces) you should be fine. I mention this because you might find it easier to set all the IDs first, before doing the export. Depending on the structure of your page, there's a god chance all the groups will be siblings in the XML editor, which might make it even easier to rattle through them setting their IDs.

Yahoo! Xav, thanks for the great tips. ungrouping, grouping and renaming files kills the most time so this helps a lot!

i noticed that in order for the file naming to work correctly, i have to:
1. right click->object properties and change the ID and Label.
2. i had to close the export bitmap window and reopen it again and then do the export.
if i don't close the window, it keeps the old filename.

thanks so much to all of you. this forum has been great and really friendly to noobs like me:)

Please refer below link
https://www.youtube.com/watch?v=XdDMBI4eT-I
it say 'awesome trick with inkscape