Xcode 6 - How to Create Vector Image Assets for an iOS App
The Udacity iOS Nanodegree course often asks questions to inspire additional exploration of tools such as Xcode. During the Intro to iOS App Development with Swift lesson, Udacity asked students, âHow will you create image assets for your app? In other words, how can you generate 1x, 2x and 3x image assets automatically?â Since Udacity encourages blogging as a strategy for reinforcement and learning, I decided to go ahead and post my findings (and many, many more to come).
In order to save time creating vector images, Xcode 6 has support for creating vector images at build-time. In order to do this:
1. Create the vector image of your choice using vector-based software like Adobe Illustrator. This image has to be the 1x size that you expect to use for your app.
2. Export the vector image to a PDF.
3. Open up Xcode 6 and create an Image Assets (Images.xcassets) if you do not already have one. This file can be found in the Project navigator.
4. Create a "New Image Set.â
5. View the Attributes of the Image Set you just created and change the property "Scale Factors" to "Single Vector." Note: The Image Set will now show one "Universal" slot for a single image.
6. Drag your exported PDF into the "Universal All" slot in your Image Set / Assets.
7. Build and run your app.
Note: Although at build-time Xcode 6 will generate the additional necessary vector images for your apps, it does not store the images in your Image Set. However, this is a nice way to save space and stay organized since you would not have to manually create a new image for each sizing scale, especially if in the future Apple introduces 4x, 5x, etc.
Ta-da! Hopefully this is a helpful Xcode feature for some of you. If you are interested in reading about this process in detail, there are some great articles here:
Using Vector Images In Xcode 6
Stack Overflow - How do vector images work in Xcode 6 (i.e. pdf files)?


















