Archive for the ‘vector’ Category

AppCode File Template for CoreGraphics and PaintCode

Wednesday, November 21st, 2012

In my last post I setup a CALayer subclass for CoreGraphics and PaintCode.

I created an AppCode template that I am sharing here.

The header file template:

Implamentation file template:


Vector Graphics in iOS with CoreGraphics and PaintCode from an SVG file

Monday, November 19th, 2012

Since I started iOS development there has always been one thing missing for me. That has been a vector graphic file format. There is no format currently natively supported by apple.

I did some digging and found SVGKit. This is a very nice library that loads in .svg files. It even supports SVG animations. Not to mention its free. So I had to share this. However it can be tricky to set up.

In the end I settled on using PaintCode. PaintCode is a vector based graphics application that generates CoreGraphics Objective-C. PaintCode will also load in SVG files.

The idea is you load an SVG file into PaintCode. Edit it if needed then copy the Objective-C code into your project.

There are different ways you can include it in your projects. I would like to use it in layer of the CALayer flavour.

What I have done is create a CALayer subclass. That all you have to do is past in the PaintCode code.

For convenience I create all my vector assets at 100×100 pixels. I then use a scale to get it to the right size.

This assumes you have PaintCode and have already got the code ready. Also assumes the image is 100×100.

Step 1:
Add the “QuartzCore.framework” to your project.

Step 2:
Create a new file using the “Objective-C Class” template for iOS. USE CALayer Subclass

Step 3:
Add the bellow line to to your Header file(.h).


Step 4:

Add the bellow code to the implementation file(.m). Note: see line 17 if your image is not 100×100 pixels

Step 5:

Add the CoreGraphics code to the drawImage method.

Step 6:

Add this layer to a view that is currently on the view stack.


Thats all you need.



I created an AppCode template for this.