Hello,

I've got a SVG file that has several parts that I'd like to split apart into separate SVGs. The SVG looks like this:

(It's from the Tera online fansite kit)

As things are layed out nicely in a grid you can probably guess how I want to split this up. I did try to follow the tutorial tips on inkscape.org about "How to do slicing (multiple rectangular export areas)?" But I just got a blank rectangle as a copy, perhaps because it's aimed at cutting a part out of bitmap graphics and this is a vector graphic? I also tried cutting out some elements of the graphic in firebug (firefox extension allowing source manipulation) but things aren't grouped nicely so it would take ages to figure out which parts belong together and I'd still be left with some weird coordinates if I sorted out all of that manually.
Surely there must be an easy way to split this image up as long as the cutout doesn't contain any shape going over the border? Any help with this would be greatly appreciated.
If anyone wants the SVG itself I did upload it to the web, the sourcecode might look a bit weird because it was originally a .ai file.

Hi there!

Here is a much organised version, where you can go by group id's with the right extension.
https://dl.dropbox.com/s/tnznt7y5ptyfjkv/hlp61.svg
The lower cards backgrounds are now set to transparent but can changed to be white easily.
For the specific extension, check these topics:
http://www.inkscapeforum.com/viewtopic.php?f=5&t=6345&p=54227
http://www.inkscapeforum.com/viewtopic.php?f=20&t=13942

Good luck!

Thank you, that's wonderful I poked around in firebug for a bit to see what the result was and that's great, many thanks .
I will see tomorrow if I can split it into separate files and then hopefully do what the real purpose behind it was, turn it into a font-file for use on a website.

Didn't expect someone to actually take the time and group things up (be it programmatically), many thanks again!

Hmm for using as a dingbat maybe further reworking should be done.
Fonts use only "flat shapes".
That is, no paths on eachother, only one colour to be used, and all combined together for each font.
Not sure how font making really works, there is a feature for that in inkscape you could try -making separate files unnecessary.
But even more clueless on online usage of such custom font, how it could be rendered on all machines without that font installed to them.

My original idea was to use FontCreator to create a custom font. While looking around on how to import SVGs into it I found out that Inkscape itself can create an .svg as a fontfile. Using the information webdesignerdepot and cleversomeday.wordpress.com provide I managed to make an SVG fontfile in Inkscape itself .
Used freefontconverter to convert it to a .ttf file and it's working quite well although I placed my baseline a bit too low it seems. This is the result for now:


As you can see the icons themselves stick out the top of the table cells because the baseline is placed too far down but I'll fix that at some later point, want to look into making it screenreader friendlier anyhow. At the moment the berserker icon for example simply is the letter 'b' in my custom font, so for a screenreader it would be 'B Berserker' which doesn't make any sense . For now I got other things to work on and the quality seems more than adequate. The fontfile itself is only 5276 bytes (only class icons for now) which is a small price to pay for having awesomely scaling icons. Heck the png sprite I used for the same purpose before this was pretty much the same size and a bigger pain to use, lots of CSS was needed for it, negative margins, separate class for every image, custom coordinates for every image. Compared to that the font is really easy to use.

That is, no paths on eachother

Path -> Union (Ctrl++) worked very nicely for that , the other requirements were already fulfilled without any further edits.
Thanks again for the help, the grouping was very very useful.