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 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?

Through

There is a blog on the subject here: ericasadun.com/2014/06/09/… however they didn't have any luck with using just one image, rather they had to use 1 PDF for each image size. At this point I think the feature isn't complete, yet. – Dummy

@Dummy I don't agree. It seems to me to work just great. – Pete

@Jean Le Moignan Can you please share the link where you read that? – Hymn

@Hymn I wish I could but I based the question entirely on trial and error in Xcode, not on any written material. – Through

I noticed that, if you create a tab-based iOS app, the default tab button icons are pdfs in an asset catalog. Not sure what are the requirements for said pdfs (haven't had time to open them in -say- Adobe Illustrator). – Chromatogram

DISCLAIMER: If somebody comes here looking for "smart" appicons from one vector - there is no way :( but you can alwyas use tools like this: icon.angrymarmot.org – Kuenlun

One problem with PDF is that it doesn't have SVG's concept of a scale invariant line stroke (vector-effect="non-scaling-stroke") so that zooming a PDF will either result in the outline stroke disappearing or growing ridiculously bulky. – Precess

I'm really surprised that nobody here mentioned github.com/mindbrix/UIImage-PDF yet. In my app I'm having great success with this. For any drawn image I am now using a single small little PDF file and I can display it perfectly at any size using UIImage+PDF :-) I love it! – Chancellorship

It seems that Xcode 8.3 no longer allows svg assets. – Fifteen

Answer 1

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/

Muoimuon

This is also how I believe it works... you don't actually get scalable assets at runtime, but Xcode creates bitmap assets for you at build time so you don't have to export multiple PNGs. It would be interesting to inspect (decompile?) the compiled asset catalog (.car), but I haven't found a way to do so. – Pensive

I found this article: martiancraft.com/blog/2014/09/vector-images-xcode6 It explains that, for iOS, it generates bitmaps at compile time, but for OSX it includes the vector image in a scalable form. – Heptavalent

what about ipad resources? – Scenario

How to not include original PDF? I can't find any setting to do that in Xcode. – Golconda

for newer versions of xcode this link might be helpful : icons8.com/articles/how-to-use-vectors-in-xcode-7 – Judaism

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://mcmap.net/q/138088/-xcode-9-asset-catalog-preserves-vector-data-not-working : 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.

Pete

I don't believe that this feature is intended for app icons; only for app-internal artwork. – Pete

the problem I have is that, when using auto-layout, the view where I use the PDF artwork (for example an UIButton), it takes the content size from the original PDF artwork size, which is not ideal in all the situations (I might want a bigger button on iPad). Do you know a way around this? – Whirlybird

My answer said "a fixed-sized image view". Obviously if you don't provide a size, there's no way to know what size you want the image to be, since (being a vector image) it has no native size. Add constraints! – Pete

Why PDF and not SVG? It's so weird. – Saxhorn

When I tried this, the PDF worked, but it does not look like it's re-rasterizing at different sizes from the original vectors. When I put it in a UIImageView and resize it (in IB or in code) to take up the full iPad screen, it looks pixellated. And when I scale it down, the edges are jaggy, a sure sign of nearest-neighbor resizing. – Inellineloquent

@ZevEisenberg Perhaps after resizing the image view needs redrawing. I'd need to see the code your using. You have to explain why my screen shot shows no pixellation at either size (and neither image is the PDF actual size). – Pete

@Pete What does your asset catalog look like? Did you drag in one PDF, or two? And which of those images is closer to the "native" size of the PDF? – Inellineloquent

@ZevEisenberg github.com/mattneub/Programming-iOS-Book-Examples/tree/master/… – Pete

@Pete when I resize the larger smiley to be much larger, it looks pixellated. Seems like it's only rasterizing at at the native size. – Inellineloquent

@ZevEisenberg So how do you suppose we're intended to do this? Or it just not working properly? – Pete

Let us continue this discussion in chat. – Inellineloquent

@Pete can you plz tell me how to create the pdf file? Can i use photoshop to generate pdf vector files? – Lately

@Pete does anyone know if one can load the pdf in a uiimage view? or xcode "compiles" the pdf into 3 scales to be used by the app? – Dormant

@JoãoNunes the screen shot is two image views – Pete

@Pete i know. My question is : In Asset catalog i can load a PDF, and xcode will generate 3 versions of the image. But is that possible via code? i mean i load a PDF in UIImageview somehow? and UIImage would generate the correct scale for that Screen with the PDF information – Dormant

@JoãoNunes But the question is about the new ability of the asset catalog to contain a PDF. If you're interested in displaying a PDF that you load yourself, you are not passing through the asset catalog. In that case you can just display it at the correct quality, just as you always could. See for example https://mcmap.net/q/138089/-convert-pdf-to-uiimageview – Pete

I don't have Illustrator or any vector drawing program. Can I use Preview to convert my PNGs to PDFs and use those? – Farl

@Koen nope, a png is not a vector image but rather a bitmap. The pdf file is essentially a bunch of instructions on how to draw paths, fills, and colors; so that kind of compatibility isn't possible going from bitmap -> vector. Since pdfs aren't required, you are fine sticking to pngs – Moonraker

@kilik52, See this answer for how to create the pdf file images. – Stoker

I did not find 'pop-up' field in Xcode 8. which is meant to set as 'Vector'. Please assist – Miscible

Answer 3

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

Copyholder

I really wanted this to work. But it didn't work for me. I'm trying to use these assets in a React Native app, so perhaps that's the problem. – Papaya

hi @josh if you can open a new question with your case explained very well maybe we can help you with it, even if it's a react native app i think still you can use vector images – Copyholder

Good suggestion, Fareed. Rather than using compile-time support from PDF I decided to go ahead and work with a script to auto-generate PNGs at various sizes from plain SVG files. I wrote an article on how to use the script for icon creation (though it can be adapted for other purposes, such as React Native Static Images): habd.as/automating-ios-app-icon-creation – Papaya

nice @JoshH i Like it – Copyholder

This seems to be the easiest solution for getting a pdf from an svg. However, if anyone wants to manually create a pdf, see this answer. – Stoker

If you don't want to set width or height/have a ton of SVGs you can use cloudconvert (cloudconvert.com/svg-to-pdf) and just select all your files – Josh

In case anyone is interested - in XCode 8 instead of selecting Vector in Types you have to select Single Scale in Scales. – Exuberant

Answer 4

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.

Blacksnake

Answer 5

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.

Bewilderment

Can give designers headaches however if you have requirements for images that are implemented as fonts as well as normal .pngs :) – Cornet

Answer 6

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

Chancellorship

Answer 7

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.

Joaquinajoash

Answer 8

After struggling to find a converter, I finally discovered these fantastic websites for converting Android drawables! Most other websites just couldn't handle XML conversion properly. Here are the links:

https://respresso.io/image-converter/. to pdf

https://vd.floo.app/. to svg

Just convert your XML Victor file to PDF or SVG using these tools, and you can then use it as an asset.

Thormora