I have a custom SF Symbol that renders with hierarchical shading when viewed in the SF Symbols 3 app, but in iOS using SwiftUI it renders as monochrome.
Here is the symbol in the SF Symbols 3 app:
Here is the symbol imported as a 3.0 template in the asset catalog:
Here is the code to render it:
Image("custom.figure.steps")
.font(.largeTitle)
.padding(.trailing)
.symbolRenderingMode(.hierarchical)
.foregroundColor(status.statusColor)
Here is how it renders in iOS simulator:
How do I get the hierarchical shading?
Ok, discovered my mistake. I exported as a template, which did not preserve the layers. When I exported as a symbol 3.0, the layers were preserved and now things are rendering as expected.
How I diagnosed:
imported the SVG that I had exported as a template back into SF Symbols and noticed that only a single layer was there
exported as a symbol and imported that into Xcode, rendered as hierarchical
Bottom line: Export as a symbol, not as a template when importing into Xcode.
Related
I was hoping I could use SVG icons on a tab bar. I'm currently using Xcode 12 beta 3 and whilst it works with these images, the icons don't seem to rescale.
Is there a solution to this?
A few observations:
See the Creating Custom Symbol Images for Your App for suggestions on how to build symbol SVG assets.
Historically in Xcode, we couldn’t easily use SVG assets. But we could convert them to PDFs, which we could then drag into our asset catalogs. When you use the asset in the app, it still ends up rasterizing it, which it saves you from having to create bitmaps of the three different sizes yourself. If you need to make it scalable (e.g., notably, for accessibility), check the “preserve vector data” option in the asset catalog.
In Xcode 12 (only beta right now), the importing of SVG assets has greatly improved. It still appears to rasterize the asset when you go to use it, though, just like the old PDF approach. You need to make sure your SVG/PDF has an artboard of the appropriate size for the eventually rasterized images.
If you consider these various vector graphic solutions, make sure to test this on your target minimum OS before you go too far. I had app with vector/PDF assets and got some unexpected edge-case behaviors on old OS versions.
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 :).
I'm developing my first real flutter project and I have a question about assets. Can I use platform assets to load my app icons? If no, I need create flutter assets to my app. But, what is recommended size to general icons?
Flutter doc say:
Main assets are presumed to match a nominal pixel ratio of 1.0. To specify assets targeting different pixel ratios, place the variant assets in the application bundle under subdirectories named in the form "Nx", where N is the nominal device pixel ratio for that asset.
But Android and IOS have many screen sizes. Using platform assets I create all icons according platform specification. So how I do in flutter? What are the specifications of general purpose icons?
Thanks!
If these are simple icons, then using an icon font, in the same manner as the built in IconData, should obviate any concerns about scaling, since they are vector-based.
If you have (or can convert) your icon assets as SVG, then you can easily build Flutter icon fonts using http://fluttericon.com. This will generate a TTF font and Dart code for your custom icons.
In iOS apps we're now able to use pdfs and in the compilation step appropriate sized .pngs will generated (including #2x and #3x sized and named files). Is it possible to use the same format for generating the right correct sized textures for use in sprite kit?
The spritekit level editor does "see" the images in the files in the preview area at the bottom right of the editor but unlike standard .pngs which can be just dragged across to the level editor, the pdfs won't go.
In the end I found that it is not possible to use PDFs as the source for SpriteKit textures.
I use GLKTextureLoader to load a 32bit PNG (created in GIMP). The GLKTextureInfo returned is showing GLKTextureInfoAlphaStateNonPremultiplied for the alphaState on both the simulator and iPad. Experimenting with glBlendFunc and GLKTextureLoader I can get it work on the iPad or simulator, but not both!
With no options to GLKTextureLoader, and with the following blend func:
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
I get on the iOS Simulator (notice the glow on the text is bright)
And on a 4th iPad (notice the glow on the text is dark)
Why the difference? The alphaState is the same. What could it be?
I found the answer on an Apple Discussion.
I have the exact same problem. XCode will convert PNG images so that the header chunk is CgBI (instead of IHDR), and that confuses 3rd party libs like libpng, since a character in Apple's header indicates that the data is in a private format. This operation only takes place for the target device - the simulator is unaffected. There are 4 ways to work around the issue (from easiest to hardest).
1) Rename your images to something else (eg. .ppng), and the XCode packaging tool will ignore your file.
2) According to the following link (http://www.imgtec.com/powervr/insider/sdk/KhronosOpenGLES1xMBX.asp), you need to add the following build settings defintion for each target. IPHONEOPTIMIZEOPTIONS=-skip-PNGs I'm embaressed to say that I still haven't figured out where in XCode project settings to add this.
3) Teach your PNG decoder to handle Apple's CgBI format.
4) Use the Cocoa UIImage classes or the Texture2D.m class.
EDIT: In "Packaging" of "Build Settings" I have found a "Compress PNG Files" option that defaults to "Yes".