Glyfz Office 2016 Ribbon Bar Icons, SVG Helper Script

I've put together an Illustrator CC script that helps in the conversion of the master Glyfz Office 2016 .ai masters to svg's. It only goes so far, the job of removing the cutouts is still down to you. What it does (not quite in this order) is:

  • You are prompted to select the master ai file.
  • It creates a new image file and copies over the 3 400% icons over, re-arranging them so they're right next to each other.
  • It adds a stroke to any cutouts that don't have them so that flatten transparency works.
  • If it's Illustrator CC 2017 it executes the "Make Pixel Perfect" function.
  • It brings up the flatten transparency dialog (see below). You need to click OK.
  • It ungroups and saves the new image file to the SVG sub-folder ready for final manual work and exporting.

The final manual work is to remove the paths within what should be the cutouts. Usually it will have been spit in to multiple paths so don't miss any. Then save and export as SVG.

Download ›

Configuring and Notes

There are only a couple of points:

  • You need to set the path to the template (Glyfz 2016 SVG.ait) location at the beginning of the first function, processIt()
  • When the Flatten Transparency dialog comes up you need to uncheck "Convert All Strokes To Outlines" and check "Preserve Alpha Transparency" (make a preset)

If Anyone Can Fully Automate the Process....

Whilst using the script is better than performing each step manually it would be great if it were completely automated, probably with the exception of clicking through the flatten transparency dialog. I've been playing around but can't think of a way.

So if anyone can come up with a script that can be shared then in return I'll give them a license of the Glyfz Office 2016 png's and also the vector masters.

You're welcome to base it on this script if you like. There are 3 sample .ai files in the archive, the same image just different amount of layers etc.