{"id":437,"date":"2012-11-19T17:10:04","date_gmt":"2012-11-19T17:10:04","guid":{"rendered":"http:\/\/www.blogs.abeazam.com\/dev\/?p=437"},"modified":"2012-11-21T11:45:55","modified_gmt":"2012-11-21T11:45:55","slug":"vector-graphics-in-ios-with-coregraphics-and-paintcode-from-an-svg-file","status":"publish","type":"post","link":"http:\/\/www.blogs.abeazam.com\/dev\/2012\/11\/vector-graphics-in-ios-with-coregraphics-and-paintcode-from-an-svg-file\/","title":{"rendered":"Vector Graphics in iOS with CoreGraphics and PaintCode from an SVG file"},"content":{"rendered":"

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.<\/p>\n

I did some digging and found SVGKit<\/a>. 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.<\/p>\n

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

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

There are different ways you can include it in your projects. I would like to use it in layer of the CALayer flavour.<\/p>\n

What I have done is create a CALayer subclass. That all you have to do is past in the PaintCode code.<\/p>\n

For convenience I create all my vector assets at 100×100 pixels. I then use a scale to get it to the right size.<\/p>\n

This assumes you have PaintCode and have already got the code ready. Also assumes the image is 100×100.<\/p>\n

Step 1:
\nAdd the “QuartzCore.framework” to your project.<\/p>\n

Step 2:
\nCreate a new file using the “Objective-C Class” template for iOS. USE CALayer Subclass<\/strong><\/p>\n

Step 3:
\nAdd the bellow line to to your Header file(.h).<\/p>\n

\/\/this method will kick off the drawing\r\n- (void) drawImage;<\/pre>\n
 <\/p>\n
Step 4:<\/p>\n
Add the bellow code to the implementation file(.m). Note:<\/strong> see line 17 if your image is not 100×100 pixels<\/p>\n
- (id)init\r\n{\r\n    self = [super init];\r\n    if (self) {\r\n\r\n\t\t[self setNeedsDisplay];\r\n    }\r\n\r\n    return self;\r\n}\r\n\r\n-(void)display\r\n{\r\n\r\n    UIScreen *screen = [UIScreen mainScreen];\r\n    \/\/Sets the hight and width of the image to 100x100 if you have a different image size change here\r\n    CGSize imgSize = CGSizeMake(ceilf(100.0f * self.contentsScale), ceilf(100.0f * self.contentsScale));\r\n\r\n    \/\/\/this is for the retina rescale \r\n    UIGraphicsBeginImageContextWithOptions(imgSize, NO, [screen scale]);\r\n\r\n    CGContextRef context = UIGraphicsGetCurrentContext();\r\n    CGContextScaleCTM(context, self.contentsScale, self.contentsScale);\r\n\r\n    [self drawImage];\r\n\r\n   \/\/grabs the drawn image from the draw context and adds it to UIImage then to the contents of the layer\r\n    UIImage *aImage = UIGraphicsGetImageFromCurrentImageContext();\r\n    UIGraphicsEndImageContext();\r\n    CALayer *curLayer = (CALayer*)self;\r\n\r\n    curLayer.frame = CGRectMake(0, 0, imgSize.width, imgSize.height);\r\n\r\n    curLayer.contents = (id)aImage.CGImage;\r\n\r\n}\r\n\r\n- (void)drawImage\r\n{\r\n\r\n\/\/\/------------------------------\r\n\/\/\/add PaintCode draw code here!!!!\r\n\/\/\/------------------------------\r\n\r\n}<\/pre>\n
Step 5:<\/p>\n
Add the CoreGraphics code to the drawImage method.<\/p>\n
Step 6:<\/p>\n
Add this layer to a view that is currently on the view stack.<\/p>\n
CustomeLayerClass *myLayer = [CustomeLayerClass layer];\r\n\r\n\/\/this will scale the image up 3 fold\r\nmyLayer.contentsScale = 3.0;\r\n\r\n[[[self view] layer] addSublayer:myLayer];<\/pre>\n
 <\/p>\n
Thats all you need.<\/p>\n
 <\/p>\n
**Edit<\/p>\n
I created an AppCode template<\/a> for this.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[89,25,26,28,30,36,37,88,53],"tags":[],"_links":{"self":[{"href":"http:\/\/www.blogs.abeazam.com\/dev\/wp-json\/wp\/v2\/posts\/437"}],"collection":[{"href":"http:\/\/www.blogs.abeazam.com\/dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.blogs.abeazam.com\/dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.blogs.abeazam.com\/dev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.blogs.abeazam.com\/dev\/wp-json\/wp\/v2\/comments?post=437"}],"version-history":[{"count":9,"href":"http:\/\/www.blogs.abeazam.com\/dev\/wp-json\/wp\/v2\/posts\/437\/revisions"}],"predecessor-version":[{"id":452,"href":"http:\/\/www.blogs.abeazam.com\/dev\/wp-json\/wp\/v2\/posts\/437\/revisions\/452"}],"wp:attachment":[{"href":"http:\/\/www.blogs.abeazam.com\/dev\/wp-json\/wp\/v2\/media?parent=437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.blogs.abeazam.com\/dev\/wp-json\/wp\/v2\/categories?post=437"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.blogs.abeazam.com\/dev\/wp-json\/wp\/v2\/tags?post=437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}