Xcode: Vector images from PDF bad quality

Question

for my iOS Swift project I use vectorized pdf files from which Xcode renders the @1x, @2x, @3x images.

When I compare the quality of the images generated from PDF with normal PNG images of the same size I see a big difference in the quality between them. Theoretically the quality of the first row and the third row in the following picture should be the same, because a 108x80 image should be rendered and used from my 54x40 PDF on my iPhone 6 with a normal retina display. Unfortunately the quality is far from equal.

Where do these differences come from and maybe how can I increase the quality of the generated images?

Cannes

What's the size of the UIImageView in the UITableViewCell? – Prostrate

Size of the image in the cell is 100x82 (fixed). – Cannes

Answer 1

I would set the Preserve Vector Data flag on the asset here:

This will make it render as a pdf and scale properly.

Marshland

This is awesome! Saved my day! – Sisterinlaw

I have been stucked in this issue.Thanks man you saved my day – Opportina

Answer 2

Steps for set a vector image in UIImage :

1 - Convert your svg image to pdf format

2 - Add pdf image to your assets

3 - Select your image and from attribute inspector tab (1.check Preserve Vector Data AND 2.set Scales type in Single Scale)

4 (very important) - Set image name in code and not in storyboard

imgVec.image = UIImage.init(named: "yourImageName")

Tropism

Why is #4 very important? What's the difference in setting in code vs storyboard? – Hewett

@Dustin. when i'm set image name in storyboard , image was blurred and when i set that name in code that show perfectly – Tropism

Thanks for your answer Hamid. I agree that nowadays we have the option to use "real vector images" with Preserve Vector Data and it works pretty well. Please note that this question was about the option that Xcode generates the 1x, 2x, 3x from a PDF before running the app. This has performance benefits compared to the "real vector images". I think the problem with the blurry images might be that the PDFs are not optimized for the Xcode generation of 1x, 2x, 3x images. I work for another company now and never had the problem again. – Cannes

@HamidRezaAnsari at first i was: this is non-sense but i will give it a try, tested and it's true! WTF apple!!! Thanks mate – Vassili

@HamidRezaAnsari Did you report this to Apple using Feedback Assistant? This is clearly unexpected behavior. – Tennison

Good one a perfect explanation – Opportina

Answer 3

The PDF should be saved at 1x resolution, Xcode will take that file and rasterize it generating the @1x, @2x and @3x bitmap versions for you.

In your case 3 PNGs with the following dimensions will be generated from your PDF:

• icon.png (54x40px)
• [email protected] (108x80px)
• [email protected] (162x120px)

From the screenshot you've posted it doesn't appear that the UIImageView in the cell has a size that matches the icon, therefore you get the blur. It's important to understand that the vector image won't be used as such, but will be always rasterized.

Try to save the PDF with the resolution of the UIImageView (100x82px as per your comment) and check again the result.

Prostrate

Hi Tomas. Thanks for your answer. I understood this part of the vectorized images that the images are no real vector images but get rendered to 3 images later. The problem is that only the vectorized image (first row) gets blurry but the normal png image (third row) looks way better . When I deploy my app to an iPhone 6 the PDF should be rendered to the three sizes 162x80, 108x80, 54x40 from which the 108x80 image would be used for retina display which is exact the same size like the PNG from the third row. My question is where the quality differences between the two images come from. – Cannes

Answer 4

In my case, it helped to switch from Inherited(Automatic) to Lossless in the asset settings for the image under Compression.

Rhodic