Search code examples
iosxcodepdfassets

Strange glowing effect on PDF image assets in iOS?

I am having an issue where the images are rendered with a strange glowing effect around them, pictured here: First Image Second Image

It is tough to see from this close but is extremely noticeable when viewing the app. Also, taking these screenshots into a design program and using the color dropper will prove that there is a glow around these images. Each of these images are PDF files, rendered as a template image so that I can change the tintColor instead of adding more images to my assets folder for each color.

I have read some other articles and questions that says there isn't full support for vector graphics yet (here). However, that is outdated as it specifies iOS 7 as the latest version at the time of writing. Now in iOS 13, I assume there have been changes. Another article I read said to never use vector graphics as they can get messed up when Xcode generates PNGs from the PDFs (here).

Information about the assets in my Images.xcassets:

Render as: Template Image

Resizing: Preserve Vector Data

Scales: Single Scale

I also tried to implement 3 PNGs at different sizes (@1x, @2x, @3x) for each image but got the same effect.

Creating new images with a smaller border size got rid of the glow but obviously, that doesn't fit the design style style that I want in an app. I designed these Icons in Sketch and used a border size of 3, then exported as PDF.

Solution

  • So, as I was writing this question I seemed to have found an answer.

    It turns out it had nothing to do with anything in Xcode. The problem lies with Sketch. I redesigned each element in Adobe Illustrator, exported them as PDFs, set the same settings in the assets folder like so:

    Render as: Template Image

    Resizing: Preserve Vector Data

    Scales: Single Scale

    Here are the updated screenshots: First Image Second Image

    I am using:

    Sketch (Version 52.5)

    Adobe Illustrator (Version 24.2.1)

    I don't know why this is an issue, but I hope it can help someone who has this issue down the road. If anyone has any more information on this, please write a comment :).