I am trying to export a series of circular images which make up the health bar in my game. I'm coding it in C#, which only accepts bitmap images AFAIK, meaning that I have to export my animation as bitmap, no way around that. The problem comes with scaling and locating my images.

This is nearly full health:

Nearly full health

And this is barely any health:

Not much health

I am looking to get a set of all 400 x 400 images so that if continuously switched between with the x and y position being located at the top left corner, it would be a smooth animation. I already have the SVG images, however, since the SVGs get smaller with less health, trace bitmap just makes the image larger if I specify "400 x 400" instead of letting me export the object at the same size as the others. I am aware that I could perhaps add a completely transparent square onto the image, but positioning it is going to be a pain and I'm hoping that there is a quicker way. I'm not 100% sure that I'll get a perfect animation either, and I'd like to know how to do things like this in the future, not only just waste time on one specific animation like this because it could take hours. So, what would be the quickest way that I could export all of these images correctly?

Here's an example of what I want to get after exporting bitmap images: Ideal exportation

  • Do you need/want the slight black border?
    – Wrzlprmft
    Aug 11, 2015 at 6:08
  • Yes, that is intentional. Aug 11, 2015 at 14:43
  • I don't really get the question. What is the problem? To produce 100 (360) images, 1 per percent (degree)? How to produce the SVG programatically? How to export all the files and glue them together? Has the white space to be completely transparent? Only the outside? Why is positioning a transparent frame a pain - how do you produce the arcs? Did you already produce them? Would it be more easy to position the arcs on a transparent circle? Aug 12, 2015 at 11:01
  • Oops, I didn't realize that I left out that part: I already have my images, a set of 25 (Considering making 50 if anybody has a quick solution) images that make up my health bar animation. I'm hoping to export the smaller SVGs as 400 x 400 bitmaps that will align to my bigger health sections when positioned at the same pixel. I'll add an image to the picture. ... ... ... As for positioning the transparent frame, it's a pain because I can't drag it to get it exact until I change the color, I have to apply it to all of my frames, and getting it exactly aligned is both difficult and annoying. Aug 12, 2015 at 14:58
  • The positioning problem is something that I don't understand. Can you put each shape on a layer, align them with the smallest on top, and then hide all but one layer, export, move down a layer with the hide, export etc. All while having the transparent box on its own layer selected.
    – jqning
    Aug 12, 2015 at 20:26

1 Answer 1


Can you put each shape on its own layer, align them with the smallest on top, and then hide all but one layer, export, move down a layer with the hide, export etc. All while having the transparent box on its own layer selected.

Alternatively, create a 400x400 square shape and draw your shapes inside it and properly locate the shapes relative to it. Select this shape before you hit the Export command. On the Export window hit selection.

(Crank down opacity or make the shape white so it does not appear in you bmp.)

Alternatively you can just make your Page or Drawing 400x400 and select proper Export area in Export window.

EDIT: You will see this when you export but the "square" workflow works well because since you have the same shape each time Inkscape will default to the same file name so you can just append 01, 02, 03 etc after each same to indicate the order. It's quick and accurate.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.