Xcode 6 allows VECTOR image assets… how to use them?

Question

I was fiddling with Xcode 6 vs images assets when I noticed something very interesting: we now can specify vector images in them (go see in the Utilities pa

Answer 1

If you're looking for an answer to the question: "How can I use vector graphics in my iOS app and always scale them with beautiful perfection?", then I can highly recommend UIImage+PDF from https://github.com/mindbrix/UIImage-PDF

I find this works absolutely brilliantly. Instead of having all images in PNG format of three different resolutions, I now have a tiny little PDF file for each image. I can display these as follows:

// Objective C:
self.icon.image = [UIImage imageWithPDFNamed:@"icon.pdf" fitSize:self.icon.frame.size];

// Swift:
icon.setImage(UIImage(PDFNamed: "icon.pdf", fitSize: icon.frame.size))

In addition to fitSize:, there is also atWidth:, atHeight and atSize:.

I'm using UIImage+PDF for all images that can be vectorized, and only use PNGs still for photo images.

I'm also running my PDF files through something like http://smallpdf.com/compress-pdf, to ensure the smallest file sizes for them.

Erik

Answer 2

Here's how to experiment with vector images in the asset catalog in Xcode 6:

1. Make a new image set.

2. Select a blank image slot in your image set and switch the pop-up in the attributes inspector to Vectors. You now have a single universal image slot.

3. Drag a vector PDF into that slot.

Now, wherever that image is used, it is sized to its context (e.g. a fixed-size image view) without rasterization, as shown in this screen shot:

EDIT Despite this answer, the larger PDF drawing was rasterizing. But now, see https://stackoverflow.com/a/45623000/341994 : in Xcode 9, the vector PDF scales properly, without rasterizing.

EDIT In Xcode 11, this formula works: In the asset catalog, you must set the Scales pop-up menu to Individual Scales and put the vector-based image into the 1x slot. Check Preserve Vector Data. Done.

Answer 3

I just create a custom font with say, icons or even app logotypes and use it that way and pull it into my app. I can then adjust font sizes for devices and screen resolutions really easily.

Answer 4

In cases where you are building app icons, PDF won't work. You might want to take a look at a project I just built a project called Speculid. It can build PNG, PDF, etc... from source images including SVG files. Feedback would be greatly appreciated.

Answer 5

you can use this online tool to convert your images from svg to pdf

http://www.fileformat.info/convert/image/svg2pdf.htm

1- upload image

2- select width:24px,height:24px

3- copy to your xcode project

4- go to Images.xcassets

5- right click and create new image set

6- from the right panel select (attribute inspector)

7- change types to vector

8- drag and drop your pdf image there

9- use it in your project

Answer 6

one tip - create PDF @2x resolution and file name with @2x (myfile@2x.pdf) do this and you get perfect sharpen and contrast images, special for iPad 2 and mini.