Tag Archives: development

SVG icons in Orbital

Screen Shot 2013-08-06 at 5.51.25 PM

In Orbital Feed Reader I’m trying to make sure that I’m doing things in smart ways – I don’t have much time to work on it. One thing that people do when they create software is make icons – lots of them for different sizes. This has always seemed strange to me – most icons aren’t photos, so I don’t get the point.  There’s a graphics format called SVG – Scalable Vector Graphics  – that automatically resizes itself at any resolution.  It’s smooth and very small – and all modern browsers support SVG.

So I’m trying to use SVG for any icons that aren’t available as unicode symbols.

Those two icons are free icons for Feeds and OPML and they are both SVG.  This was such an easy choice that I don’t know why everyone doesn’t do it. The only thing that was a little off is that the OPML icon had a little bit more blank space than I wanted, so I edited it in the free, open source SVG editor Inkscape. Here’s the new version I made.


Creative Commons License BY-SA 3.0
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

The folks over at liquidorb made this icon available under a CC-BY-SA license so I’m giving them credit and making my derivative work available under the same license.

Unicode Icons in Orbital

Font icons are kind of fashionable in web development these days. What’s awesome about them is that you get all the clever wonderful benefits of how good browsers are at rendering webfonts. In a way, a web font used for font icons is like a png sprite for SVGs – you get one server round trip and then a bunch of reusable images.

It’s a good idea if you need to show some custom icons. Me, I’m too cheap for that. For Orbital I’m trying to make sure that there is a very small footprint. Rather than using a custom web font I’m just getting creative with the unicode tables.

Screen Shot 2013-08-06 at 5.40.43 PM

As far as I can tell, unicode has some pretty easy to understand symbols for add (+), refresh(⟳) and edit(✎). So I get decent, scalable icons for zero server round trips!