-
Notifications
You must be signed in to change notification settings - Fork 7
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Dicussion] handling with app icon assets with Resizetizer #109
Comments
Without padding: svg file: With padding: cc: @nickrandolph BTW I used this webapp to edit the svg files: https://boxy-svg.com/ |
Hello @nickrandolph @pictos |
@Darsh0307, from my last interactions, this is a thing on the |
@pictos I checked the svg files and seems to me the icon is correctly centered |
@agneszitte I'll take a look asap, will see if I've the asset that I made it work before |
@Darsh0307 what version of Resizetizer are you using? |
Some title
It's known that each Platform has its own guidelines for handling app icons. In general, Resizetizer can generate assets for both Idioms (mobile and desktop), but it lacks some intrinsic guidelines, where we can't infer if the user will deliver an asset following the guidelines or not. To better illustrate the scenario will be used Android and Windows.
SVG with padding
The svg used by this first sample is one that respects the guidelines for mobile Idiom. That means the foreground is centered and there's padding, represented by the fact the svg image is smaller than the
ViewBox
. The assets used are in the zip file below.icons_with_padding.zip
The dimensions of the Foreground assets are:
svg width="456" height="456"
viewBox="0 0 912 912"
The dimensions of the Background assets are:
svg width="456" height="456"
viewBox="0 0 456 456"
As you can see, we just have to add the padding on the Foreground file.
On mobile we will have the following result:
As you can see the
Uno logo
is centered and there's a padding around it.For Windows the result is different, because of that extra size on ViewBox the
Uno logo
becomes very smaller, you can see the result at image below:SVG without padding
The svg used by this second sample is one that doesn't respect the guidelines for mobile Idiom. That means the foreground is not centered and there's no padding. The assets used are in the zip file below.
icons_without_padding.zip
The dimensions of the Foreground assets are:
svg width="450" height="450"
viewBox="0 0 50.369617 49.826836"
The dimensions of the Background assets are:
svg width="456" height="456"
viewBox="0 0 456 456"
On mobile we will have the following result:
As you can see the
Uno logo
fills all the icon space horizontally and vertically. The padding is not respected.Otherwise, for Windows the result is different, it looks good because the
Uno logo
is centered and the icon is bigger than before. You can see the result in image below:Possible solutions
1. Using the ForegroundScale property
If needed the user can specify the scale of the Foreground asset, increasing or reducing its size. Something like this:
This can work for some cases, but there are cases where the Foreground just disappears, and it has to do with the content position inside the svg file, I couldn't find a good metric for that with the
svg
that I've available, so that will be a more empiric way to test and resize the app icon.2. During the resizing process, we add a padding to the image
We can infer that assets will not have the padding, so we can add it during the resizing process. And we can do that per platform, which will give us more control over asset generation. The question here is, should this padding be added implicitly or should we add a new property to the
UnoIcon
item? Something likeAddPadding="true"
, where the padding will be implicitly added by Resizetizer defaults, or per platform, something like,WindowsPadding= "10"
andAndroidPadding="20"
where the user can specify the padding value for each platform if doesn't specify the value will be0
.3. Infer that the asset will have a padding
We can infer that the asset will have a padding, so on Desktop idioms we can increase the scale of the generated
ForegroundFile
, that way the icon will not too small.4. Use the platform idioms to take care
Instead of trying to apply those paddings on Resizetizer code (which uses Skia to renderer the image) we can use what the platform gives to us, on android, we can adjust the
inset
property and that will be aligned with their units. So the xml for the adaptive-icon will be:For more context and other points of view, you can see this issue on .NET MAUI repo: dotnet/maui#11295
And this one on Flutter's repo: fluttercommunity/flutter_launcher_icons#96
The text was updated successfully, but these errors were encountered: