How to Create Vector Images with Xcode

How to use vectors in Xcode (7 and 6.3+):

  1. Save an image as a .pdf file at the proper @1x size (e.g. 44×44 for a toolbar button).
  2. In your Images.xcassets file, create a new Image Set.
  3. In the Attributes Inspector, set the Scale Factors to Single Vector.
  4. Drag and drop your pdf file into the All, Universal section.
  5. You can now refer to your image by its name, just as you would any .png file.
    UIImage(named: "myImage")

How to use vectors in older versions of Xcode (6.0 – 6.2):

  • Follow the steps above, except for step 3, set Types to Vectors.

How vectors work in Xcode

Vector support is confusing in Xcode, because when most people think of vectors, they think of images that can scale up and down and still look good. However, Xcode 6 and 7 don’t have full vector support for iOS, so things work a little differently.

The vector system is really simple. It takes your .pdf image, and creates @1x.png, @2x.png, and @3x.png assets at build time.

For example, assume you are given foo.pdf which is a 44×44 vector asset. At build time it will generate the following files:

  • foo@1x.png at 44×44
  • foo@2x.png at 88×88
  • foo@3x.png at 132×132

This works the same for any sized image. For example, if you have bar.pdf which is 100×100, you will get:

  • bar@1x.png at 100×100
  • bar@2x.png at 200×200
  • bar@3x.png at 300×300

Implications:

  • You cannot choose a new size for the image; it will only look good if you keep it at the 44×44 size. The reason is that full vector support is not implemented. The only thing these vectors do is save you the time of saving your image assets. If you have a tool (e.g. a Photoshop script) that already makes this a one-step process, the only thing you will gain by using pdf vectors is future-proof support (e.g. if in iOS 9 Apple begins to require @4x assets, these will just work), and you will have fewer files to maintain.
  • You should ask for all your assets at the @1x size, saved as PDF files. Among other things, this will allow UIImageViews to have the correct intrinsic content size.

Why it (probably) works this way:

  • This makes it backwards compatible with previous iOS versions.
  • Resizing vectors may be a computational intensive task at runtime; by implementing it this way, there are no performance hits.
Recent Posts

Leave a Comment

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt