Thursday, September 19, 2013

Typing iOS Icons in SVG

I know many people when faced with the task of making an icon will fire up Photoshop and start pushing pixels. But lately, when graphics are needed, I've been jumping into my text editor, BBEdit, and creating an SVG document from scratch. Like this one for—appropriately—my new iOS app about learning and playing with SVG paths called SVG Paths:



  
  
  
 

  
    
   
    
    
    
    
    
    
    
   



Sorry about what my code formatter is doing to the rect element in the above.

I can then open the result in iDraw, scale the drawing down to the appropriate size for an iOS icon and save it out as a PNG.  For smaller icon sizes, 29 pixels? really?, I might tweak it a bit to emphasize just one sub-element. The advantage for me is I get exactly what I expect with mathematically pure shapes. And it's a lot simpler than the times I've programmed graphics in raw Postscript. It wouldn't necessarily be a good way to make an elaborately textured icon, but with the flat simplicity mantra of iOS 7 the stark clean lines of SVG are a good fit.

Oh, and here's an animated GIF my new app can generate of me drawing the icon: