Xcode 6 now has support for pdf vector-based images in asset catalogs. Is it possible to create pdf vector-based images with transparency?
Yes, this is certainly possible, I tried adding a PDF as vector based image in a test project, and the backgroundcolor properly showed trough.
What are you having trouble with?
Related
I am having an issue where the images are rendered with a strange glowing effect around them, pictured here:
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.
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:
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 :).
One of our team member is urging to use SVGs using github.com/pocketsvg/PocketSVG, instead of regular assets #1x #2x #3x. We have over a hundred image sets.
I have 2 questions:
1) 100s of SVG data rendered using PocketSVG or even another library, is that gonna be a performance kill?
2) Using SVGs over regular assets, going to make any different visually, though our designer have these all images extracted properly using vectors.
Thanks in advance.
Answer for first Question : Yes, Whenever trying to show an image on the screen, it will process your SVG file and create a new image assets. May be the library can cache the image to avoid second time processing.
You no need to use PocketSVG if you have all SVG images on your Asset Catalog. Because Xcode Asset catalog itself able to handle the SVG images.
Xcode will create #1x #2x #3x images from SVG file at the time of compilation.
Answer for second Question : SVG is a vector image. You can extract good quality image from svg. You will not get any different by using #1x #2x #3x images or SVG image.
The advantage of using SVG is no need to create one more asset #4x if Apple introduced another different screen resolution devices. Just recompile the code Xcode will create on behalf of you
Refer the link : How to use vector in Xcode
Language : Swift 3 ---- IDE : Xcode 8 ---- iOS SpriteKit Project
I use a png image loaded in Assets.xcassets and used in program as SpriteKitNode. I created the project working on iPhone SE Simulator. Although If I run the game on another iPhone or iPad images still stay small. (I have the same image made also for x2,x3). Is there a way to load an image and use it proportional to the screen size?
Also I read that on iOS the best image format to work with is SVG. Does anyone know how to work with it? I tried to load a svg image on Assets.xcassets but it doesn't load. Then I dragged the svg image in my project and still couldn't load it on a SpriteKitNode.
Xcode doesn't support SVG yet. It does support PDF though so if you can export/save your SVG as a PDF, you can import that into your assets catalog and get all the scaling goodness of SVG.
I'm pulling pdf files into Xcode via images.xassets -> image set -> type: vectors. The PDF looks great, but when I look at the images on the device, the colors are changing slightly. Exporting the PDF as individual PNG files and doing it the old way is working fine.
Has anyone else run into this? The color change is bad enough to revert back to the old way for any non monochromatic image. When exporting to PDF with Illustrator, verified that we're using RGB mode and not anything else
check out the deployment target, it should be 7.0 or above. Because of Vector pdf only supports 7.0 and above.
Check Alpha value. I had this issue in the past and the alpha value caused this problem. If i had saved my images with this colours would have been changed a little.
There is a setting on illustrator when exporting to PDF that was causing my problem. Follow: Xcode generates png form pdf with different colors
We are following article to use pdf vector resources in iOS project: http://martiancraft.com/blog/2014/09/vector-images-xcode6/
However we faced problems. If we set color in Photoshop/Illustrator to #039AF0 then exported pdf will generate png with #1185ec color.
If we use old png way then colors are fine (please ignore pixelized image, the most important is color):
What can be the cause?
When a new artboard is created in Illustrator it defaults to using Adobe RGB for the color space which doesn't work well with iOS. To make sure the colors remain as close to the original as possible, set the color space to sRGB by selecting "Web" for Profile and RGB for Color Mode under Advanced.
This works well for new artboards. I have an Illustrator file as a deliverable that was created in Adobe RGB. For such cases, I've resorted to copy pasting vector paths on a new artboard that's set to sRGB before saving as PDF for use in Xcode 6.
I got the same problem, and finally I found that set the deployment Target to 7.0 or above solves the problem.
It is possible that Photoshop/Illustrator generates CMYK or other special colors in the PDF file and Xcode uses the PDF rendering engine that is implemented in iOS to convert the PDF files to PNG.
Because the iOS has problems with displaying CMYK colors, your PNG image has distorted colors.
The above is only an assumption because I have not seen a sample PDF file and the process used by Xcode to convert the PDF to PNG is not documented.