Creating scaled images with PDF Vectors

Feeding Xcode with image assets at 1x, 2x and 3x resolutions is a painful process. It has also been largely avoidable since Xcode 6 when Apple added support for PDF vector images to the asset catalog. It seems not to be well documented except in this WWDC 2014 session so this post is a quick reminder, should you need it.

Creating the PDF Vector Image

You need a drawing tool capable of creating a PDF vector image. I like Pixelmator or more recently Autodesk Graphic but there are many others. The important step is to create a PDF image for the @1x size of your image. So for example if I want my final image to be 64x64 points I create the original image with a size of 64x64 pixels. Xcode will then take care of generating the 2x (128x128 pixels) and 3x (192x192 pixels) images for us.

So here is what my image looks like in Graphic:

Creating the vector image

To export as a PDF image:

Export as PDF

Adding a PDF to the Asset Catalog

Add a new image set to your asset catalog as usual but this time in the attributes inspector change “Scale Factors” from the default which is “Multiple” to “Single Vector”:

Single Vector Asset

You will notice that you now only have a single choice for the image asset rather than the usual 1x, 2x, 3x. Drop the PDF file into the asset catalog.

Asset Catalog

You do not need to do anything different when using this asset in your code so the following works as you would expect to create an image from the asset:

let image = UIImage(named: "star")

It is worth pointing that we are not using vector images in our iOS app. We are only adding the PDF vector image to our Xcode asset catalog and behind the scenes it is creating the scaled bitmap images for us when it compiles the asset catalog at build time. (In this case iOS is different from OS X which is able to scale at runtime).

This saves time now but will also make you happy the day that Apple introduces a device requiring 4x assets. All you should need to do is rebuild your project with the latest version of Xcode to get those extra 4x images.

Never miss a post!

iOS Size Classes Cheat Sheet

Subscribe and get my free iOS Size Classes Cheat Sheet

Unsubscribe at any time.
No time to watch WWDC videos?

Sign up to get my iOS posts direct to your inbox and I will send you a free PDF of my iOS Size Classes Cheat Sheet.

Unsubscribe at any time.
Archives Categories
comments powered by Disqus