Vector images on Xcode 6

One of the new features of Xcode 6 is the capability to use vector instead of rasterised images. For some unknown reason, this has been done a little bit trickier than expected from the Apple people. here I will use the tabbar as example.

The first thing that surprises anybody when creates a new project with storyboard and a tabbar view controller is the fact that Apple creates two view controllers for you, and this two view controllers have two images, named first and second, that are not regular png/gif images, but PDF! Still to understand the reason Apple did not gave direct support for SVG files, but we will have to live with that…

First of all, needed tools, if you are plenty of money, why not getting Adobe Illustrator, but if you are a developer and does not really need any of the cutting edge Illustrator functionalities, another good alternative if Inkscape. To install Inkscape, first you will have to install quartz.
Is a little more difficult than a regular OS X program, but after installing both applications Inkscape should work perfect (mind rebooting after installing XQuartz)

One we have sorted out the tools to use, we need an image, we can download any SVG file we would like from much of the free of charge icon libraries on the internet, or create our own from scratch (if you are mainly a developer, maybe it would be better to start downloading one…), once we have an image in Inkscape, we need to define the size of the canvas, in the case of the tabbar, we will create a canvas of 37.5×37.5px, to do that we will go to File-Document Properties, then in the pop up window that will open, we will see the first tab named Page, in which we can put our custom size, as stated before we will put here 37,5px for width and height.

Now it is time to scale the image to fit inside the canvas, as we are dealing with vector images there is nothing to worry about, and we can scale (object-scale-second tab/Scale) as much as we want, and use the arrow tool to place it inside the canvas.

When you will be happy with the image, save it with PDF 1.5 format (“Save as” command).

And finally we arrive to the Xcode App, we should open the images.xcassets of our app, and there we can deploy the PDF or click on the + icon on the bottom to create a new file.
To be purist, the image generated is a generic image with 1x 2x and 3x empty slots to put our images, but Apple just have one universal image for that, as we don’t want to be less than Apple, we will make our images behave the same.

To make a single universal image, we should open the image in the Finder App, and open the Contents.json file that is kept in the same folder as the image we are editing.

The file should state similar at this:
{
"images" : [
{
"idiom" : "universal",
"scale" : "1x",
"filename" : "image.pdf"
},
{
"idiom" : "universal",
"scale" : "2x"
},
{
"idiom" : "universal",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

We should remove all unused scales, and the scale part of the one containing the filename, so it should behave like this:
{
"images" : [
{
"idiom" : "universal",
"filename" : "message.pdf"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

As always, less is more…

Now you can use your new vector image in the tabbar.

One thought on “Vector images on Xcode 6

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.