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

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 pane after selecting Images.xcassets).

I tried a small app (containing a big UIImageView) with a .SVG image (didn't work), then a .EPS (didn't work either) and I finally tried a .PDF It worked! Well, although I saw the image, It appeared pixellated and not vectorized.

So it seems Apple is preparing the way for vector icons/images. No more zillions versions of app icons, no more "@2x" images. But can anyone unlock that feature?

Here're some of my thoughts after some experiments on vector assets:

1. Compile time support

After several trials, I believe that it's just a compile time support. Xcode generate all the 1x, 2x and 3x images at compile time. Which means it works with older iOS versions. At the same time, it means that in the final build, it's still in PNG format, and you cannot get lager lossless image from the vector file.

2. Why PDF instead of SVG or other formats

For SVG and other formats, the vector image has no actual size info, while PDF has size info. I think what Xcode 6 does is using the size info in PDF as actual display size, then generate 2x 3x files from the vector image.

3. File size of PDF does not matter

At the begining, our concern is that PDF will be much bigger than PNGs. We tried http://smallpdf.com/ to compress it and it work pretty well. But if the original PDF file is not included in the build as I said before, then the file size of PDF does not matter.

Will continue editing this post if I find any other things.

EDIT 14-09-25

@mredig mentioned that for iOS, it generates bitmaps at compile time, but for OSX it includes the vector image in a scalable form.

via: http://martiancraft.com/blog/2014/09/vector-images-xcode6/

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.

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

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

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.

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

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.