CODEWITHSUNDEEP
vector-graphicsios8xcode6
Jean Le Moignan
Jean Le Moignan

Reputation: 22236

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?

Upvotes: 72

Views: 64048

Answers (8)

Oubaida
Oubaida

Reputation: 1756

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.

Upvotes: 0

matt
matt

Reputation: 534925

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.

Upvotes: 26

leogdion
leogdion

Reputation: 2350

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.

Upvotes: 1

Erik van der Neut
Erik van der Neut

Reputation: 2235

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

Upvotes: 2

Roman Bambura
Roman Bambura

Reputation: 177

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

Upvotes: 7

Fareed Alnamrouti
Fareed Alnamrouti

Reputation: 32154

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

Upvotes: 22

Jim Moore at Fotosyn
Jim Moore at Fotosyn

Reputation: 41

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.

Upvotes: 3

Allen Hsu
Allen Hsu

Reputation: 3534

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/

Upvotes: 58

Related Questions