You found the perfect vector icons and lived happily ever after… until you run headlong into Xcode. Xcode 7 doesn’t have full vector support for iOS, which can make your icons look something like this:
How Vectors Work in Xcode 7
Instead of scaling vectors at run time, the Xcode system takes your PDF image and generates @1x PNG, @2x PNG, and @3x PNG assets at build time.
Say you have a home.pdf that is a 100x100px vector asset. When you build your project, Xcode creates the following files from it:
- @1x home.png at 100x100px
- @2x home.png at 200x200px
- @3x home.png at 300x300px
When you run the app, iOS automatically picks the size of the icon depending on the device.
Why Vectors Work This Way in Xcode 7
There are a few possible reasons for Apple to make it work like this:
- Backwards compatible with previous iOS versions
- No performance hits. By comparison, resizing vectors may be a computationally intensive task at run time
Why Use Vectors if We End up Having PNGs
- To save time creating image assets (unless you have a tool that already does it for you)
- Fewer files to maintain
- Future proof support (e.g. if in iOS 15 Apple begins to require @4x assets)
Embedding Vectors in Xcode 7
1. Generate PDFs With the @1x Asset
You can use Adobe Illustrator or any other vector editing tool.
Remember that you cannot choose a new size for the image. Stick with the size you’ve specified, or create a new PDF for a larger size.
Any doubts about the icon sizes? Check out our guide.
2. Create an Image Set in Your XCAsset File
If you don’t have an Images.xcassets file, you’ll have to create it first. From there, choose New Image Set from the Editor menu.
3. Set the Scale Factors to Single Vector
If you use Xcode 6.3 or newer, select the Attributes Inspector and pick Single Vector in the Scale Factors. In older versions you should set Types to Vectors.
4. Drag and Drop Your PDF Into the All, Universal Section
The drop point All, Universal will automatically appear in the Image Set.
5. Refer to Your Image by Its Name, Like for any PNG File
For example: [UIImage imageNamed:@”Home”]
Credits
Thank you, dear Senseful, for your competent answer on Stack Overflow. It became the foundation for this article.
Icons8 iOS developer Pavel prepared a rewrite. Pavel is also a CTO at ZipZapMac – a Mac software development company. He knows the solutions to a variety of problems: from working around bugs of OS X components to avoiding a ban in App Store.
Our editor Josh and a content strategist Uliana helped us to make this text even more readable.
No matter if you’re a developer or a designer – usability studies benefit one. And they can be fun as well – check out Don’t Listen to Users and 4 Other Myths About Usability Testing
Bonus: how to increase your productivity [written by our lead developer] : Productivity Tools: When the Faintest Ink Is More Powerful Than the Strongest Memory
