Glyfz Office 2016 Ribbon Bar Icons, SVG

A few people have asked about SVG versions of the ribbon bar icons. Unfortunately due to the difference between the features Illustrator and SVG support I'm pretty sure there's no automated way to export them at the moment. I'll show how it can be done.

But I'll start by explaining why I think PNG's are probably still the better option.



On the face of things the idea of using an SVG for your icon is tempting. Only one resource that can be scaled depending on the display and in the old days that may well have been true. Back then you might have been happy to scale from, say, 100% up to 200%, 300% and 400%. 1 pixels lines at 100% become 2, 3 and 4 pixels lines, all nice and simple. Unfortunately the simple days are behind us.

Windows 10 now has scale factors of 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300% and 400%, which makes life more complicated. So if you simply scale an icon to the scale factor, a 1 pixel line is blurry at 125, 150, 175, 225 and 250%. On the other hand the PNG's have been created to be crisp for each scale factor.

It's early days in the use of SVG's on the Windows desktop but there are ways you could work around this. The obvious being that you still only scale to 100%, 200%, 300% and 400%. So 100% would be used for 100%, 125%, 150% scale factors. 200% for 175% (?), 200% and 225% scale factors, 300%, 400%.The lines will then be crisp but the icons will look smaller than they should do at times. The alternative is you put up with blurred lines, which seems a backward step. Again if you stick to PNG's then you don't have any of these problems to solve.

So, if it were me, I'd probably resist the temptation to use SVG's and stick with PNG's that just work.


Exporting Icons To SVG

I tried to find an easy way to automate the export the Illustrator AI's to SVG but couldn't find one. This is the only way I can see how it could be done, which is fine for one or two icons, not so great for a few thousand (understatement of the year). The bit that breaks is transparency, page knockout groups. The bit that's used to create the cutouts, for example around the elements such as new, plus and minus. So what you have to do is flatten transparency then manually remove objects to recreate the cutouts.

  • I think the best way is to have a new Illustrator template with three artboards, one for each size. I also think it makes sense from a quality perspective to use the 400% images. So create 128x128, 96x96 and 64x64 pixels artboards and save that as a template.
  • Create a new document from the template and copy/paste the images from the original in.
  • Unless I'm missing something then flatten transparency only seems to work if the cutout object has a stroke. So you have to check the cutouts to find any that are a fill only. If you find any then set the stroke to any colour and set Align Stroke to Inside.
  • Select everything, or a single artboard if you prefer to do one at a time, and then Object>Flatten Transparency... In the dialog make sure Preserve Alpha Transparency is set.
  • The cutout parts will now be solid where they overlap something underneath. Object>Ungroup and select the parts in the cutout and delete them either one at a time or multi-select and delete.
  • Save the document, I'd use a new folder rather than mix them in with the originals, and then you can export to SVG in the normal way.

So a total pain for more than a few and something I'm sure the clever people at Adobe could have taken care of for us. Perhaps next year or perhaps when SVG supports knockout groups.