1

I have a SVG file that contains a set of icons.

For each icon there are two different objects in the SVG file. One is the icon itself (id=foo_icon), and a second is a solid white rectangle behind the icon that defines the bounding box (id=foo_box). This rectangle is solid (and not transparent) for easier handling within Inkscape.

I want to export each icon to PNG, with the correct bounding box, and with a transparent background. I would like to do this automatically, from a script.

I have tried the following:

  • inkscape -e foo_icon.png --export-id=foo_box icons.svg

    This exports the icon with the correct bounding box, but the background is not transparent, because foo_box is exported and white.

  • inkscape -e foo_icon.png --export-id=foo_icon --export-id-only icons.svg

    This exports the icon correctly, with transparent background, but the bounding box is not correct (it is taken from foo_icon, instead of foo_box).

Is there a way to achieve what I want? I need to tell Inkscape, for each icon ("foo"), to set the export area to the bounding box of foo_box, but only export foo_icon and hide all other objects.

1

I can think of the following ways:

  • If your icons do not exceed their respective bounding boxes, delete all objects other than foo_box and foo_icon from the SVG with a script and then use --export-area-drawing:

    inkscape -e foo_icon.png --export-id=foo_icon --export-id-only --export-area-drawing icons.svg
    
  • If your know the exact position of your bounding boxes, specify the export area manually (using --export-area=).

  • Use a script to temporarily edit the SVG to make the bounding box transparent.

  • Use a script to extract the size and position of the bounding box and specify the export area accordingly (using --export-area=).

  • Other than specifying the export area manually (which is what I wanted to avoid) I see that your suggestions 1/ and 3/ involve temporary modifications to the SVG, while 4/ involves extracting information and then using that with --export-area. Can you provide an example of any of these three ? – Grodriguez Jan 8 '16 at 17:11
  • @Grodriguez: SVGs are XML-based, so any library that allows for reasonably editing XML files should do the job. You may not even need that depending on how your SVG is structured. You have to look into the SVG’s source code to get an idea how to best realise this, as this may somewhat depend on the details. Option 3 could just be done by replacing #ffffffff with #ffffff00 throughout the SVG if your bounding boxes are the only thing that is white on your icons. – Wrzlprmft Jan 8 '16 at 19:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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