From SVG to Objective-C (Quartz 2D) with Qwarkee


It may come as a surprise that iOS doesn't natively support SVG images. You must therefore either use a TIFF, JPEG, PNG or GIF, or draw your images natively in code. It comes as a welcome addition then that Qwarkee has been created to avoid the need for adding multiple image files to your project to cover all the size and resolution bases of the iOS devices without creating every image manually in code.

The question is does it work? The answer is yes. And here's how:

(1) Open Qwarkee
(2) Drag your image to the drop zone
(3) Select a destination for your Objective-C .m and .h files
(4) Open your Xcode project
(5) Use ⌥ + ⌘ + A to add files to your project
(6) Select the two files you created
(7) With any UIView selected in your Storyboard change its class to that of your image
(8) Build and run

Here's an SVG image created in Inkpad on the iPad



and here's the same image in Quartz 2D running in the iPad simulator a few seconds later:


I'm still getting to grips with sizing and positioning and no doubt you'll want to manipulate the code once inside your app but the ability to convert a vector image so quickly into iOS-friendly code, and at such a low price (£2.99) can only be good news.

Update: at the time of writing the app was £2.99, but since the addition of new functionality the price has risen to £27.99. There is a light version here, which is still set at the original price. You may also wish to investigate PaintCode, which currently retails at £69.99, or Code Automat (see comments).

The full app is available here.

Further reading

Ryan's App Blog, 'SVG to CoreGraphics conversion'
Jeff Menter's Software Blog, 'Method for Interpreting Illustrator Art Assets as Cocoa CGPathRef'


Comments

  1. Alternatively, you can also use www.codeautomat.com to convert your SVG files to Objective-C.

    ReplyDelete
  2. Miso: Thank you for taking the time to comment. I wasn't aware of this site or the PaintCode app, but it would be interesting to do a side-by-side test.

    ReplyDelete

Post a Comment