How do vector images work in Xcode (i.e. pdf files

Question

How does vector support work in Xcode 6?

When I try resizing an image, it looks jagged, what gives?

Answer 1

For those who still not updated, there were changes in Xcode 9 (iOS 11).

What’s new in Cocoa Touch (WWDC 2017 Session 201) (@32:55) https://developer.apple.com/videos/play/wwdc2017/201/

In few words, Asset Catalog now includes the new checkbox in Attributes Inspector named “Preserve Vector Data”. When checked, PDF data will be included in the compiled binary, increasing its size of course. But it gives a chance for iOS to scale the vector data in both directions and provide nice images.(With its own difficulties). For iOS below 11, old scaling mechanisms described in answers upwards is used.

Answer 2

You can use normal PDF files inside your project as Vector images and render images of any size using this extension. This way is way better because iOS will not generate .PNG images out of your PDF files, plus you can render you images with any size you want:

extension UIImage {

static func fromPDF(filename: String, size: CGSize) -> UIImage? {
    guard let path = Bundle.main.path(forResource: filename, ofType: "pdf") else { return nil }
    let url = URL(fileURLWithPath: path)
    guard let document = CGPDFDocument(url as CFURL) else { return nil }
    guard let page = document.page(at: 1) else { return nil }

    let imageRect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
    if #available(iOS 10.0, *) {
        let renderer = UIGraphicsImageRenderer(size: size)
        let img = renderer.image { ctx in
            UIColor.white.withAlphaComponent(0).set()
            ctx.fill(imageRect)
            ctx.cgContext.translateBy(x: 0, y: size.height)
            ctx.cgContext.scaleBy(x: 1.0, y: -1.0)
            ctx.cgContext.concatenate(page.getDrawingTransform(.artBox, rect: imageRect, rotate: 0, preserveAspectRatio: true))
            ctx.cgContext.drawPDFPage(page);
        }

        return img
    } else {
        // Fallback on earlier versions
        UIGraphicsBeginImageContextWithOptions(size, false, 2.0)
        if let context = UIGraphicsGetCurrentContext() {
            context.interpolationQuality = .high
            context.setAllowsAntialiasing(true)
            context.setShouldAntialias(true)
            context.setFillColor(red: 1, green: 1, blue: 1, alpha: 0)
            context.fill(imageRect)
            context.saveGState()
            context.translateBy(x: 0.0, y: size.height)
            context.scaleBy(x: 1.0, y: -1.0)
            context.concatenate(page.getDrawingTransform(.cropBox, rect: imageRect, rotate: 0, preserveAspectRatio: true))
            context.drawPDFPage(page)
            let image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return image
        }
        return nil
    }
}

}

Answer 3

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. 44x44 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. (You can use a tool to examine the contents of Assets.car to verify this.)

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

• [e-mail] at 44x44
• [e-mail] at 88x88
• [e-mail] at 132x132

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

• [e-mail] at 100x100
• [e-mail] at 200x200
• [e-mail] at 300x300

---

Implications:

• You cannot choose a new size for the image; it will only look good if you keep it at the 44x44 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.

Answer 4

This is a supplement to the excellent answer by @Senseful.

How to make vector images in .pdf format

I will tell how to do this in Inkscape since it is free and open source but other programs should be similar.

In Inkscape:

1. Create a new project.
2. Go to File > Document Properties and set the custom page size to whatever your @1x size is (44x44, 100x100, etc) with the units in px.
3. Make your artwork.
4. Go to File > Save As... > Printable Document Format (*.pdf) > Save > OK. (Alternatively, you could go to Print > Print to File > Output format: PDF > Print but there are not as many options.)

Notes:

• As is mentioned in the accepted answer, you cannot resize your image because Xcode still produces the rasterized images at build time. If you need to resize your image you should make a new .pdf file with a different size.

• If you already have an .svg image that is the wrong page size, do the following:

  1. Change the page size (Inkscape > File > Document Properties)
  2. Select all objects (Ctrl+A) on the work space and resize them to fit in the new page size. (Hold down Ctrl to keep aspect size.)

• To convert an .svg file into a .pdf you can also find online utilities to do the job for you. Here is one example from this answer. This has the benefit of allowing you to set the .pdf size easily.

Further reading

• Using Vector Images in Xcode 6

Answer 5

In Xcode 8, you can still add a pdf, create a new Image Set, and in the Attributes Inspector, set the Scales to Single Scale option.