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):
So it’s up to you to decide would you use it in your project or not.
Usage of vector images
To fix it, you need to set
Scale Factors in right sidebar to
Now all you need is to drag n drop your image from
Universal placeholder to have this:
Now you are ready to use it in your project like any other image resource.
Alternatively you can import vector image using these steps:
- Open your
- In the bottom-left corner open
New Image Set
- Name your newly created image set and set
Scale Factorin right sidebar to
- Drag n Drop your vector image into provided placeholder with