Annotated version of Big Sur icon

[elsiehupp]

This is an update to #4631 adding extensive inline annotations and CSS variables in order to make it easier to create alternate versions of the icon with different logos and/or different backgrounds.

The icon should be visually identical to the previous version.

At the beginning of the document, the following text appears in an XML comment:

Purpose Statement

This SVG document is set up with human-readable definitions and instances so that the markup can easily be tweaked or have the logo and/or squircle replaced with other shapes. If you import this SVG document into Illustrator, it will probably come out unrecognizable if it even works at all.

I've added inline comments explaining almost every single SVG entity in this document in order to make it easier to understand.

Aside from the Nextcloud logo (which is a registered trademark), I (Elsie Hupp) am personally releasing the rest of this document under the CC0 Public Domain Dedication, though if it has been further edited by anyone at (for example) Nextcloud, it may have been re-licensed under the Affero GNU Public License or another similarly restrictive license.

If you'd like a fully CC0 license-cleared copy of this document, or if you have any questions about how the document is set up, feel free to email me.

Elsie Hupp
<*****@*****>

July 2022

Basic Organization

• CSS values are at the top of this document.
• Object intantiations are in the middle.
• SVG definitions are at the bottom.

Replacing Shapes

To replace the logo, create a new path called logo-path under <defs>. (There is a skeleton definition to help you get started.) Next, uncomment the logo-path instances in logo-include-mask and logo-occlude-mask. Then, finally, remove the circles defining the Nextcloud logo. You should be able to adjust the scale in the CSS.

To replace the squircle with a different shape for a platform other than macOS, scroll down to <defs> and replace the contents of squircle-path. (There are examples of a circle and a rounded rectangle to help you get started.)

Changing Colors

All of the colors are defined in the CSS. The only colors you'll likely want to change are the gradient top color and the gradient bottom color. If you do change the logo fill color to something darker, though, you may want to change the logo top-edge inner shadow to an inner glow for better contrast.

Limitations

If you want to use a logo that isn't based on a flat mask, you'll have to figure a lot more things out yourself. That said, if you're doing so you'll probably have a better idea what you're doing here to begin with.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

[jancborchardt]

@elsiehupp ah, only saw this now as I was not mentioned, sorry! :)
So is this actually the way you created the Big Sur icon, via code and not e.g. via Inkscape? Cause right now I would want to create a macOS version of the Talk app icon for @ShGKme – I’d just do it via using the existing Inkscape file as a base, and just having bullet points would be easiest, like:

• Create a drop shadow of the icon form like: color [value], Xpx spread down, 0 horizontal spread, etc
• Create an inset shadow of the icon form: [Similar info like above]

And that should be it, right? Thanks for your help!

[elsiehupp]

@jancborchardt—No worries about the delay. (This is not urgent.)

I created this icon by mocking it up in Affinity Designer and then manually coding it in VS Code using an SVG preview VS Code extension. Affinity Design has... mostly serviceable SVG support, but in particular it rasterizes layer effects, so I had to figure out how to recreate those using SVG tutorials online.

The purpose of this particular Pull Request is specifically to annotate the SVG file as it resides in the Nextcloud codebase, but, yes, I can imagine the guide being useful as, say, a Markdown-based tutorial.

Could you approve and merge this Pull Request just so that the annotated markup is available to future contributors? I should have included all these annotations in the previous Pull Request (that was merged), but I didn't think to do it at the time.

For the Talk icon, you could create an Issue and assign it to me, and I can walk you through adapting it to match this one. (It should be pretty straightforward.)

[elsiehupp]

The approach I would recommend is adapting this icon (as a template) to the Talk icon, not the other way around. (I can write additional instructions on how to do this.) I recommend using this as the template because of the complexity of all the various layer effects, but also because Inkscape adds a bunch of useless boilerplate clutter, as one would expect from machine-generated markup.

Inkscape should probably respect the structure of this document if you open it, but I haven't tested this myself.

I guess a way of looking at this is that hand-optimizing the SVG is better for Git comparison than just using the raw Inkscape, Affinity, or Illustrator output—can you imagine using illegible machine-generated C++ code for a merge?!?

It's been 9 months since I last read through this SVG document, but IIRC if you literally just read through the raw markup from top to bottom it should kind of make sense? IIRC I was downright absurdly thorough with the annotations. (Again, I can write additional instructions in, like, a Markdown document, but you should be able to get a sense of what's involved by read the annotations.)

[elsiehupp]

@jancborchardt oh, it looks like you all figured it out!.

I was reviewing this Pull Request, and it turned out that the SVG wasn't validating because for some reason the SVG plugin I was using for VS Code was less strict than the SVG parser used by the browser, and the browser SVG parser doesn't like certain types of markup inside comments:

• You can't put XML markup inside CSS comments unless you put it inside an XML comment, as well, like /*<!-- -->*/, and
• You can't put CSS variables inside XML comments (because the -- closes the comment prematurely).

Anyway, could you or someone else in @nextcloud/desktop approve this now that it actually validates? Thanks!

[codecov]

Codecov Report

Merging #4714 (04d16b7) into master (19d796e) will increase coverage by 0.01%.
The diff coverage is n/a.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4714      +/-   ##
==========================================
+ Coverage   59.24%   59.26%   +0.01%     
==========================================
  Files         143      143              
  Lines       18445    18445              
==========================================
+ Hits        10928    10931       +3     
+ Misses       7517     7514       -3     

see 3 files with indirect coverage changes

[elsiehupp]

Well, it passed all the checks this time. Anybody willing to approve it?

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

[nextcloud-desktop-bot]

AppImage file: nextcloud-PR-4714-04d16b7824e633b66fbd9fbbed98c615e14e8c2d-x86_64.AppImage

To test this change/fix you can simply download above AppImage file and test it.

Please make sure to quit your existing Nextcloud app and backup your data.