Flight 209, you’re clear for takeoff.

Roger.

Huh?

That’s a sequence from Airplane, one of my favorite movies. Are we cleared for takeoff to use vector assets in our iOS projects?

iOS 8 and Xcode 6 have brought about the ability to use vector assets in your applications. In the past, designers had to generate multiple versions of the same asset to satisfy multiple resolutions. Using vector assets can save you time because you only have to generate the asset once—even better, it will prepare your apps for future iOS devices.

Most people think of vectors as images that can scale up and down limitlessly, and still look good. That’s true, but unfortunately, Xcode 6 doesn’t fully support vector assets in iOS yet. Instead, Xcode generates raster images that are based on the @1x PDF image, rather than scaling a vector at runtime. However, you can still create and use vector graphics that are non-destructive and editable in the future. Let’s look at how it can be done.

Getting There

The best way to create vector assets is with an application like Adobe Illustrator. A lot of designers already have Illustrator in their toolset as part of the Adobe Creative Cloud.

In Illustrator, it’s simple to export vector assets from your design files:

1. Create a new document in RGB with the size of the @1x asset you’ll be exporting.
2. Place your path in the new document, just as you would normally.
3. Save as PDF.

There are other vector-based drawing tools you can use to create your assets. Sketch is a powerful, inexpensive entry point to create vector assets; you can read our review for our thoughts on it. You can also use Inkscape, a free and open-source tool.

Using a Vector Asset

1. Save your image as a .pdf file at the proper @1x size
2. Drag and drop your pdf file into Images.xcassets.
3. In the Attributes Inspector, set the Type to Vectors.
4. Pull your image into your file, just like you would any other image.

For example, a tab bar button named ‘Maps’ is sized at 25 x 24 in your interface. You simply use your vector asset saved at 25 x 24 in your storyboard. At runtime, Xcode will create three images:

• map-icon-unselected@1x.png at 25 x 24
• map-icon-unselected@2x.png at 50 x 48
• map-icon-unselected@3x.png at 75 x 72

A Round-Trip Ticket?

While iOS 8 doesn’t include full vector support, OS X does. In OS X, you can scale your image in code or by using AutoLayout, without any distortion. With some experimenting, I’ve been able to size vector assets while targeting size classes in Xcode without distortion. When you target a compact or regular size class in your Universal Storyboard, you will have to set a height and width constraint on the vector asset to change its size.

Our Final Destination

The ability to use vector assets opens up some questions when designing UI elements. When we work with .png files, we usually design at @2x resolution. Developers build in interface builder at @1x. It would seem logical for us to create our interfaces at @1x. I think this would make specifying quicker for designers, and is easier for developers to dissect.

Do we have clearance, Clarence? With the new advances, developers will be giving us the Roger, Roger to start using vector assets in our apps.