search

Skeptick / libres

Resources generation in Kotlin Multiplatform
Apache License 2.0
210 stars 12 forks source link

Issue with SVG on iOS #38

Open tethridge opened 1 year ago

tethridge commented 1 year ago

I'm hoping that you can provide more information on how SVG images should be handled for a multiplatform project that targets Android and iOS. I've included a SVG file that contains more than one color. I've found that it does not render as I would expect. On Android it renders fine, but on iOS it shows black in areas that are transparent or it doesn't render at all. The behavior changes with material vs material3 Image.

I see that there is some discussion of image modifiers in the documentation. Can you explain more about "(orig)" and how it should be used? Should all images filenames be marked with a suffix of "_(orig).svg"? If you designate an image as the original, how should it be referenced on iOS? Does this mean that there needs to be more than one copy of the image when one version is designated as an original?

Does having a SVG with only one color change how it should be used?

Skeptick commented 1 year ago

If your image has opaque background or multiple colors add _(orig) to its name. image_(orig).svg for example. UIKit recolors image with AccentColor (blue or black by default). orig modifier adds information that original colors of image should be preserved.

If there are several colors in image and you need to change one, it's easier to use several images or make composite image. The library will not help in any way and implementation options are the same as in native development.

tethridge commented 1 year ago

I'd like to avoid adding duplicate images to my project, just so that they show up correctly on iOS. Is there any reason that I shouldn't just add one copy with _(orig) appended to the file name and use it on both iOS and Android?

Now that I've duplicated the image the shape appears as expected, but one of the colors is pink instead of teal. This image is just an icon. It has white text in the middle and a shape that the text sits on. The shape is colored teal and the background is transparent. Is there another setting that I've missed to have it render as the proper color?

tethridge commented 1 year ago

The issue where the tint is off appears to be an issue with the simulator. It appears correctly on the device, but not in the simulator for SVG marked with (orig). I can continue to investigate. I may just open another ticket dedicated to that issue.