Creating scaled images with PDF VectorsOct 19, 2015 · 2 minute read · Comments
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:
To export as a PDF image:
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”:
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.
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.