How to Create Vector Images with Xcode

by: | Aug 8, 2016

Creating artwork for your mobile application is a crucial part of the development process. Strong imagery gives apps more character and makes them more engaging. But with all of the different device and screen sizes, creating and managing that artwork for all the permutations has always been a challenge. For iOS, using Xcode to create vector images helps mobile app designers and developers simplify that task.

For many apps, you need icons and splash screen images in different sizes, and also @1x, @2x and @3x versions for each asset inside the app. Vector images, a feature first introduced in Xcode 6, allows single assets to scale to all sizes. When you create vector images, instead of using three copies of the same image in three different sizes, only one file is required. Xcode does the heavy lifting so the image displays in the proper sizes on the different devices and in your app’s different screens.

You may be asking, so how do I create vector images in Xcode? The process involves two major steps.

Step 1. Create Vector Images in PDFs

To begin, you’ll need a vector PDF exported from your favorite vector-based drawing tool at the @1x size. The app design team at ArcTouch typically uses Sketch.

Once the design is complete, the exported PDF will be a scalable vector, perfectly capable of scaling to the @2x and @3x resolutions in iOS.

Step 2. Add the Mobile Vector Image to Xcode

In order to create vector images in Xcode, you’ll need an Xcode Asset Catalog to manage your images. You can mix standard image imports and XCAssets without any issues. Here’s how you can add the vector image in Xcode:

Create an XCAsset file, or open one if you already have it in your project:

create vector images XCAsset

Select “New Image Set” from the Editor menu:

create vector images new image-set

In the new image set that appears, select the blank image set, then show the Utilities panel:

create vector images utilities panel

Select the Attributes Inspector. Under the Scale Factor drop-down menu, select “Single Vector:”

create vector images single vector

The image set will change to just one drop point, labeled “All – Universal:”

create vector images all universal

Drag and drop your vector PDF created above onto the drop point:

create vector images drop point

Done. Just go to your ViewController and add the image as usual:

create vector images view controller

Now you can run the app either on devices that feature screens with different resolutions (retina and non-retina), or do so using the Simulator. As you’ll see, the image is displayed perfectly on all screen types and sizes.

When you build your project, Xcode will do the hard work, creating @1x, @2x, and @3x PNG files from the vector PDF that you’ve used in the Xcode Asset Catalog. For example, if you had a @1x PDF that was 150px x 150px, then Xcode will generate the following PNG sizes for use in the application:

  • @1x PNG at 150px x 150px
  • @2x PNG at 300px x 300px
  • @3x PNG at 450px x 450px

When you run the application, iOS will automatically pick the appropriate @1x, @2x, or @3x image that Xcode generated based on the device requirements. Xcode generates raster images that are based on the @1x PDF image instead of scaling a vector at run-time. As you can see, when you create vector images for your Xcode project, you save app design time and development time — and ensure predictable results in the user interface on all devices.

the smart app ebook ad