Overview of vector images in iOS

First of all iOS SDK doesn’t support vector images. When you add vector images to your project, Xcode generate multiple images during the building process. That means if you add vector image with 40x40 size to your project - it will not scale nicely to 240x240 in your app, it will be blurry and awkward as it would be if you add multiple images with x1, x2, x3 scale with 40x40pt size.

Do we need it then?

It’s a tough question and there are lot of critics about this approach. In one hand it’s a future-proof solution, because if tomorrow Apple release retina @4 display - your Xcode project will generate x4 images itself. So you don’t need to go into your assets and add everywhere x4 images. But you should understand that application will need to be re-builded with Xcode again, because as I said before - image generation happens during the build process and not in runtime. In other hand - Xcode generates images in it’s own way, and you can’t control this process. So many people complain that Xcode can generate “bad” images, while they can generate “nice” images and have full control over it. (As for myself I didn’t find any differences between Xcode-generated images and images generated using design software. I tried Sketch and Photoshop, but nope, looks same):

Vector vs Multiple Images

So it’s up to you to decide would you use it in your project or not.

Usage of vector images

Xcode supports .pdf vector images to generate all supported scaled sizes during building process. However, these type of images could not be simply added using drag-n-drop into assets folder and require some additional treatment. If you drag-n-drop it, you’ll see next:

Drag n Drop Vector images: Initial

To fix it, you need to set Scale Factors in right sidebar to Single Vector:

Drag n Drop Vector images: Scale Factor change

Now all you need is to drag n drop your image from Unassigned to Universal placeholder to have this:

Drag n Drop Vector images: Final Stage

Now you are ready to use it in your project like any other image resource.

Alternatively you can import vector image using these steps:

  1. Open your .xcassets in Xcode
  2. In the bottom-left corner open Add menu -> New Image Set
  3. Name your newly created image set and set Scale Factor in right sidebar to Single Vector
  4. Drag n Drop your vector image into provided placeholder with Universal mark

Updated:

Leave a Comment