Hi,
I’ve got a task from my superior at my workplace. The first thing, that I’m an UI designer trainee and I’ve been working for this company for 4 months. So I’m really an amateur and I haven’t worked together with the developers yet. I really don’t know so much about programming.
So, here is my task: „Some transparent icons disappeared (the half of the icon, or the full icon) on Android 6.0 and lower versions.” I was asked to find the solution.
My company works in Figma, and the developers save the icons in SVG format. So we have a problem with transparent icons (for example there’s a transparent profile icon on a dark background). We cut out these kind of icons with ’Subtract Selection’.
I checked the Vector Studio Asset program, but I didn’t find the solution and it was really difficult to understand haha. I hope that my description is understandable.
questions: Isn’t this a bit too much for a UI designer trainee? How should I make these icons to not disappear? And if I can do that, won’t it cause problems in higher Android versions?
There’s not a quick answer since about a thousand things could be causing that and similar problems. So given the extent of the issues that might be causing this particular problem, yes, it might be something to ask of someone you work with who’s had a bit more experience in tracking down these kinds of one-off glitches.
SVG, by the way, is good for rather simple and straight-forward vector images. I don’t know about the image you’re using, but you mentioned “Subtract Selection,” which suggests the possibility a less-than-straightforward structure. There’s really no way to know without digging into the file and experimenting with it and whatever Android device isn’t displaying it correctly. Sometimes it’s just easier and quicker to use PNGs — they’re less problematic.
Right. The most reliable SVG’s are ones in which everything is fully “expanded” (in the sense of the Adobe Illustrator term; that is, no stroked paths, nothing overlapping). If there is anything “trick” at all included, there’s a chance it will cause a problem in some browser or other.
Other things that raise concern:
I assume you mean some portion of them is “transparent,” (as opposed to fully transparent).
I don’t know anything about Figma or the graphics workflow of your developers, but the very fact that you’re diligent about characterizing the icons as transparent makes me wonder what they really are. If the icons are 100% vector graphics, “transparent” wouldn’t really be an important distinction because with vectors, no object = effectively ‘transparent’. The express mention of transparent makes me suspect it’s possible they are actually raster images (to which someone applied the effort required to negate a white background, thus producing ‘transparent’ icons), which, seeing as SVG supports raster data, were then saved as SVG. My point is that until you know with certainty the true makeup of this icons, there’s no point pursuing a solution to their disappearance.
That’s a bit general, so it might also be important to understand with more specificity the prevailing conditions surrounding the disappearance of icons. Did they disappear from a “home screen”? From within an app? In one of the dozens of browsers available on the platform?