logo: Use new design, and support fancy Android features #1404
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Member
Author
|
Here are screenshots. In these, "Zulip" is the legacy app zulip-mobile, and "Zulip beta" is this app with this PR. Beta icons (this PR)Android, on my Pixel 8 running Android 15
iOS, on an iPhone XR running iOS 18I don't know what iOS does to come up with this dark-theme version of our app icon, but it works. We sure aren't providing any extra data to help with that -- just a bunch of PNGs that correspond to the light-theme icon. As the screenshots show, it already works even for the legacy app.
Non-beta icons (to be used at launch time)To get the non-beta versions, make these edits: --- tools/generate-logos
+++ tools/generate-logos
@@ -50 +50 @@ jq --version >/dev/null 2>&1 \
-src_icon_foreground="${root_dir}"/assets/app-icons/zulip-white-z-beta-on-transparent.svg
+src_icon_foreground="${root_dir}"/assets/app-icons/zulip-white-z-on-transparent.svg
@@ -59 +59 @@ src_icon_background="${root_dir}"/assets/app-icons/zulip-gradient.svg
-src_icon_combined="${root_dir}"/assets/app-icons/zulip-beta-combined.svg
+src_icon_combined="${root_dir}"/assets/app-icons/zulip-combined.svgand rerun Android, on my Pixel 8 running Android 15
iOS, on an iPhone XR running iOS 18
|
Collaborator
|
Thanks! I ran You mentioned in the office that this might be due to a difference in the |
Member
Author
|
Thanks for the review! Merging. You also pointed out in the office that the beta logo on Android looks cramped. I agree, and I think that's acceptable for the remaining beta period. |
The ImageMagick `convert` command, introduced in b13cf4e, apparently inserts the current time into the file. That makes the build not reproducible. Fix that using the "strip-nondeterminism" tool from the Reproducible Builds project: https://reproducible-builds.org/docs/timestamps/ The resulting change to the affected file can be seen using `sng`, and purely removes a pair of timestamps: $ f=ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] \ && diff -U3 <(git show @:"$f" | sng) \ <(<"$f" sng) --- /dev/fd/63 2025-01-06 21:11:42.422900540 -0800 +++ /dev/fd/62 2025-01-06 21:11:42.426900539 -0800 @@ -13,14 +13,6 @@ bKGD {red: 255; green: 255; blue: 255;} pHYs {xpixels: 161260; ypixels: 161260; per: meter;} # (4096 dpi) tEXt { - keyword: "date:create"; - text: "2023-11-27T17:11:13-08:00"; -} -tEXt { - keyword: "date:modify"; - text: "2023-11-27T17:11:13-08:00"; -} -tEXt { keyword: "Software"; text: "www.inkscape.org"; }
I believe the Inkscape version I was using the last time I generated these files was Inkscape 0.92.4. The version now on my machine is Inkscape 1.2.2. In Inkscape 1.0, they made some changes to the `inkscape` CLI. The old way of specifying where to put the output is deprecated, and now produces these warnings: $ tools/generate-logos Warning: Option --export-png= is deprecated Warning: Option --export-png= is deprecated Warning: Option --export-png= is deprecated […] So, switch to the new way. (The new version also produces slightly different output; the old and new versions look identical to my eye, though examining with the `sng` tool confirms some pixels have slightly different values. Leaving those changes out for now, to bundle them with substantive changes coming later in this commit series.)
This is a better home than tools/.
This makes these SVGs a bit easier to reason about. More concretely, this will allow us to switch from Inkscape to librsvg for the conversion: the latter is faster and has some other useful properties, but doesn't support using xlink to point to a separate file as these were doing. This change is nearly NFC: it'd be NFC if the image processing were mathematically exact. In reality the old and new output images look identical to my eye, but examining with `sng` (like in the previous commit upgrading Inkscape) confirms some pixels have slightly different values. Like with that commit, we leave those changes out for now, to bundle them with substantive changes coming later in this commit series.
This SVG implementation is more convenient than Inkscape's for
several reasons:
* It's faster -- the runtime for the whole script goes from about
5.5s down to 1.5s.
* It doesn't include a redundant alpha layer (of a constant 0xff)
in the output. That makes all the PNG outputs smaller, and
better yet lets us cut out the mess of ImageMagick `convert`
we'd been using for stripping that layer in the one file where
Apple forbids it.
* Most concretely: it supports the `transform` CSS property.
That will come in very handy in the next commit, to help us
stitch together different pieces of the new icon design.
For a useful table of which SVG implementations support which
features, see this page from resvg:
https://linebender.org/resvg-test-suite/svg-support-table.html
(At the moment resvg isn't in Debian stable, though -- presumably
because Rust packaging is somewhat hard -- so resvg itself was
less convenient for me to use.)
Just like with the last couple of commits, this produces a visually
imperceptible change in the output files. Examining with `sng`
shows some pixels did change slightly, and also that some metadata
got simpler. Here's from [email protected]:
IHDR {
width: 40; height: 40; bitdepth: 8;
- using color alpha;
-}
-pHYs {xpixels: 6299; ypixels: 6299; per: meter;} # (160 dpi)
-tEXt {
- keyword: "Software";
- text: "www.inkscape.org";
+ using color;
}
+bKGD {red: 255; green: 255; blue: 255;}
Others are similar but with width, height, xpixels, ypixels, and
the DPI figure all scaled up; and in [email protected] the old
version had no "alpha" but did have sections cHRM and gAMA.
Like with a couple of previous commits in this series, we leave
those changes out for now, in order to bundle them with
substantive changes coming next.
Fixes zulip#415. Fixes zulip#1254. Fixes zulip#1401. Fixes zulip#1402. Thanks to Vlad for developing the new design through several iterations. Changes from the old version include: * The background gradient is more saturated. (zulip#1254) * The "BETA" label is cleaner, and has a more balanced layout relative to the main "Z" of the logo. (zulip#415) * The icon is "adaptive" using the API introduced in Android 8, which lets it be handled more nicely by Android launchers / home screens that want to put the app icon in a circle (like on Pixel) or an iOS-style squircle (like on Samsung devices). In particular this should avoid it getting shrunk and placed on a bed of white padding. (zulip#1402, originally filed on zulip-mobile in 2020.) * The assets include a monochrome foreground icon, which makes the app work with the "themed icons" introduced in Android 13, for users who choose to enable that. (zulip#1401, originally filed on zulip-mobile by a user report last year.) This commit continues to use "BETA" versions of the logo for the actual app, but also adds the corresponding non-beta versions of the source SVGs so that we can smoothly switch to those when it comes time to launch the app. The relevant area in Figma is around here: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6549-5962&t=mMvSGpqwbgJBIv6U-0 but the exact story of these source files is somewhat complicated, because there are a number of technical requirements and it's taken several rounds of iteration between design and engineering to get to this result. Specifically: * zulip-white-z-beta-on-transparent.svg was "beta-foreground.svg" from Vlad here: https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/updated.20app.20icon/near/2072480 * zulip-white-z-on-transparent.svg and zulip-gradient.svg were from Vlad in this message (as code blocks): https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/updated.20app.20icon/near/2038233 * Then zulip-combined.svg was "app_icon_1.svg" here: https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/updated.20app.20icon/near/2030417 which I produced as described in that message from "app_icon.svg" here: https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/updated.20app.20icon/near/2030569 * And zulip-beta-combined.svg I assembled myself, in a text editor, out of those pieces. * I also wrote ic_launcher.xml.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #415.
Fixes #1254.
Fixes #1401.
Fixes #1402.
Thanks to Vlad for developing the new design through several
iterations. Changes from the old version include:
The background gradient is more saturated. (Refresh app icon's design #1254)
The "BETA" label is cleaner, and has a more balanced layout
relative to the main "Z" of the logo. (Nicer "beta" app icon #415)
The icon is "adaptive" using the API introduced in Android 8,
which lets it be handled more nicely by Android launchers /
home screens that want to put the app icon in a circle (like
on Pixel) or an iOS-style squircle (like on Samsung devices).
In particular this should avoid it getting shrunk and placed on
a bed of white padding. (Provide an "adaptive icon" for Android launchers #1402, originally filed on zulip-mobile
in 2020.)
The assets include a monochrome foreground icon, which makes
the app work with the "themed icons" introduced in Android 13,
for users who choose to enable that. (Add monochrome icon for Android launchers #1401, originally filed
on zulip-mobile by a user report last year.)
This branch continues to use "BETA" versions of the logo for the
actual app, but also adds the corresponding non-beta versions of
the source SVGs so that we can smoothly switch to those when it
comes time to launch the app.
The relevant area in Figma is around here:
https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6549-5962&t=mMvSGpqwbgJBIv6U-0
but the exact story of these source files is somewhat complicated,
because there are a number of technical requirements and it's taken
several rounds of iteration between design and engineering to get to
this result.
Specifically:
zulip-white-z-beta-on-transparent.svg was "beta-foreground.svg"
from Vlad here:
https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/updated.20app.20icon/near/2072480
zulip-white-z-on-transparent.svg and zulip-gradient.svg were
from Vlad in this message (as code blocks):
https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/updated.20app.20icon/near/2038233
Then zulip-combined.svg was "app_icon_1.svg" here:
https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/updated.20app.20icon/near/2030417
which I produced as described in that message from "app_icon.svg"
here:
https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/updated.20app.20icon/near/2030569
And zulip-beta-combined.svg I assembled myself, in a text
editor, out of those pieces.
I also wrote ic_launcher.xml.
Before the main change, there are also several prep commits that bring the workings of
tools/generate-logoscloser to the way it ends up needing to be in the final version. The first two commits:d12ae5c logo: Fix nondeterminism in ImageMagick step
7f2f9f2 logo [nfc]: Update inkscape commands for Inkscape 1.x
were the necessary starting point of my work on these logo icons this year, because they brought the script back into a state where it's possible to rerun the script and see whether anything has changed.