72

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?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Jean Le Moignan
  • 22,158
  • 3
  • 31
  • 37
  • There is a blog on the subject here: http://ericasadun.com/2014/06/09/that-vector-thing-xcode-6-pdf-assets-and-unfortunate-outcomes/ 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. – vcsjones Jun 10 '14 at 20:10
  • @vcsjones I don't agree. It seems to me to work just great. – matt Jul 07 '14 at 18:00
  • @Jean Le Moignan Can you please share the link where you read that? – Developer Sep 25 '14 at 05:48
  • @Developer I wish I could but I based the question entirely on trial and error in Xcode, not on any written material. – Jean Le Moignan Sep 25 '14 at 08:04
  • I noticed that, if you create a tab-based iOS app, the default tab button icons are `pdf`s in an asset catalog. Not sure what are the requirements for said `pdf`s (haven't had time to open them in -say- Adobe Illustrator). – Nicolas Miari Jan 26 '15 at 07:45
  • DISCLAIMER: If somebody comes here looking for "smart" appicons from one vector - there is no way :( but you can alwyas use tools like this: http://icon.angrymarmot.org/ – andilabs Jun 08 '15 at 17:15
  • 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. – Glenn Howes Oct 06 '15 at 17:47
  • I'm really surprised that nobody here mentioned https://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! – Erik van der Neut Mar 11 '16 at 02:27
  • It seems that Xcode 8.3 no longer allows svg assets. – Efren May 08 '17 at 06:28

7 Answers7

58

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.

Size info in PDF

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/

Allen Hsu
  • 3,515
  • 3
  • 25
  • 38
  • 1
    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. – hagi Sep 12 '14 at 11:55
  • 1
    I found this article: http://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. – mredig Sep 25 '14 at 01:18
  • what about ipad resources? – Eugen Martynov Oct 09 '14 at 09:15
  • How to not include original PDF? I can't find any setting to do that in Xcode. – 8suhas Jan 05 '15 at 10:43
  • for newer versions of xcode this link might be helpful : https://icons8.com/articles/how-to-use-vectors-in-xcode-7/ – Milad Faridnia Feb 21 '17 at 08:35
26

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:

enter image description here

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.

matt
  • 515,959
  • 87
  • 875
  • 1,141
  • 1
    I don't believe that this feature is intended for app icons; only for app-internal artwork. – matt Jul 07 '14 at 18:08
  • 1
    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? – flainez Aug 05 '14 at 19:11
  • 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! – matt Aug 05 '14 at 19:25
  • 23
    Why PDF and not SVG? It's so weird. – Stan Aug 13 '14 at 12:44
  • 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. – Zev Eisenberg Aug 13 '14 at 15:13
  • @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). – matt Aug 13 '14 at 17:39
  • @matt 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? – Zev Eisenberg Aug 13 '14 at 17:40
  • @ZevEisenberg https://github.com/mattneub/Programming-iOS-Book-Examples/tree/master/bk2ch02p057imageRendering/imageRendering – matt Aug 13 '14 at 19:02
  • @matt when I resize the larger smiley to be much larger, it looks pixellated. Seems like it's only rasterizing at at the native size. – Zev Eisenberg Aug 13 '14 at 19:26
  • @ZevEisenberg So how do you suppose we're intended to do this? Or it just not working properly? – matt Aug 13 '14 at 19:48
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/59304/discussion-between-zev-eisenberg-and-matt). – Zev Eisenberg Aug 13 '14 at 20:45
  • 1
    @matt can you plz tell me how to create the pdf file? Can i use photoshop to generate pdf vector files? – kilik52 Sep 10 '14 at 11:52
  • @matt 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? – João Nunes Sep 24 '14 at 12:18
  • @JoãoNunes the screen shot is two image views – matt Sep 24 '14 at 12:23
  • @matt 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 – João Nunes Sep 25 '14 at 09:19
  • @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 http://stackoverflow.com/questions/8490238/convert-pdf-to-uiimageview – matt Sep 25 '14 at 14:11
  • I don't have Illustrator or any vector drawing program. Can I use Preview to convert my PNGs to PDFs and use those? – koen Oct 06 '14 at 17:52
  • 1
    @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 – rwyland Oct 08 '14 at 19:12
  • @kilik52, See [this answer](http://stackoverflow.com/a/34504439/3681880) for how to create the pdf file images. – Suragch Dec 29 '15 at 04:42
  • I did not find 'pop-up' field in Xcode 8. which is meant to set as 'Vector'. Please assist – Aaban Tariq Murtaza Jul 11 '17 at 11:39
22

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

tilo
  • 14,009
  • 6
  • 68
  • 85
Fareed Alnamrouti
  • 30,771
  • 4
  • 85
  • 76
  • 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. – vhs May 25 '15 at 01:01
  • 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 – Fareed Alnamrouti May 26 '15 at 09:24
  • 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): http://habd.as/automating-ios-app-icon-creation/ – vhs Jun 08 '15 at 14:36
  • nice @JoshH i Like it – Fareed Alnamrouti Jun 09 '15 at 08:51
  • 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](http://stackoverflow.com/a/34504439/3681880). – Suragch Dec 29 '15 at 04:48
  • 1
    If you don't want to set width or height/have a ton of SVGs you can use cloudconvert (https://cloudconvert.com/svg-to-pdf) and just select all your files – Allison Jul 02 '16 at 01:35
  • 4
    In case anyone is interested - in XCode 8 instead of selecting Vector in Types you have to select Single Scale in Scales. – AXE Oct 19 '16 at 09:33
7

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. enter image description here

Roman Bambura
  • 177
  • 1
  • 6
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.

Jim Moore at Fotosyn
  • 41
  • 1
  • Can give designers headaches however if you have requirements for images that are implemented as fonts as well as normal .pngs :) – Ari Braginsky Feb 28 '15 at 00:06
3

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

Erik van der Neut
  • 2,245
  • 2
  • 22
  • 21
1

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.

leogdion
  • 2,332
  • 1
  • 19
  • 21