How to flatten SVG files

Tom picture Tom · Dec 29, 2014 · Viewed 7.2k times · Source

There is this site http://game-icons.net/ that offers huge number of open source icons. That is 1345 SVG files to this day. I would love to use them with a web project I am working on right now. The logical step is to transform them into an icon font. Normally, I would just upload them to https://icomoon.io/app/#/select/font and voila ... but!

The icons are inverse, white symbols on a black rectangle. I can invert colors in Illustrator, but some of the icons have overlaping shapes and this breaks them when icomoon tries to make them Black-transparent.

Example: http://game-icons.net/lorc/originals/archery-target.html The circles are white, not transparent.

How to flatten a Black-White SVG file with overlaping shapes into an icomoon friendly Black-transparent SVG?

My wish is to make the font open source as well and send it back to the site admins for everybody to enjoy.

Answer

Paul LeBeau picture Paul LeBeau · Dec 30, 2014

At the moment the icons have layers of black and white paths. You are going to need to use the "merge paths" feature of Illustrator or Inkscape to make the white (or black) paths into holes where appropriate. I think this is pretty much going to be a manual task. You could write a script to help with some of the work, but I suspect you would end up needing to fix a large number of the icons afterward anyway.