flags without the circle mask

[cedvdb]

squared flags without the circle mask can be useful because some renderers do not play well with it. It would also allow people to play with the border radius more easily.

There is already a PR for that here #51

[kapowaz]

I thought you might like to know that I’ve created a new project based on circle-flags where all the flags are square. There are a number of subtle tweaks that were needed to make them work well at that shape, so it’s not as simple as the PR you linked (which only affects the mask on the existing shapes). Feel free to check it out here.

[waldyrious]

Nice! Could you share a couple examples of design adjustments you had to make for the flags to work well in the square form factor?

[kapowaz]

Sure! There were quite a few changes I made in the end, as I started going down the rabbit hole of making further and further adjustments, but the main ones that justified making new variants were along these lines:

• All the flags that use a Union Jack as a canton were redrawn to use a full (quarter-scale) Union Jack
• Flags with items in the four corners (e.g. Quebec, Sardinia, Georgia) had these items repositioned to be more evenly distributed across the square
• Some flags (e.g. Seychelles) had angled segments that didn't correspond to how the real flag looked (i.e. rays not originating from the corner etc.)

After I made these changes I also started making a few other ‘improvements’ (more subjective, but I think they’re worth doing) such as adding a middle yellow to help give yellow items on a light background more contrast. As part of my work I turned a large number of the basic templates (tricolours, crosses etc.) into abstract components so as to ensure all similar flags have equal dimensions, and I’ve adjusted several of these to align better to the pixel grid (based on a 16x16 icon size; larger sizes might not directly match, but they suffer less from muddiness than smaller sizes anyway).

What’s your ‘source of truth’ for the icons in circle-flags? Do you use Figma or similar, or are they just edited locally then re-committed to the repo?

[kapowaz]

Here’s a comparison of the two sets of main country flags; by overlaying each set in Difference blending mode you can see where a flag is significantly different to the original other than just outside the circle (i.e. a pure black circle in the middle means they’re essentially identical):

[waldyrious]

Awesome work! Thanks for the detailed write-up :)

What’s your ‘source of truth’ for the icons in circle-flags? Do you use Figma or similar, or are they just edited locally then re-committed to the repo?

That's something for @HatScripts to respond :)

Here’s a comparison of the two sets of main country flags; by overlaying each set in Difference blending mode

That's pretty nice! I wish there was a way to mask out the outside-the-circle differences to make it easier to focus on the deliberate changes you made.

One specific question I have is about the flag of Cape Verde, my home country: as described in #1 and #2, the current design in circle-flags actually respects the original flag's proportions; in contrast, the square-flags version places the stars and stripes much lower:

What was the reasoning for that?

[kapowaz]

In this particular case I'd have to double check; it may well have been accidental, but I think when I first started implementing this set I was using a set of SVGs that was a little outdated, so I may have ended up duplicating some other issues that existed in circle-flags that were since fixed (for example I was using an outdated version of Mexico's flag with the less detailed crest).

I'll certainly fix this issue with Cabo Verde though!

[waldyrious]

Ah, that makes sense. Indeed the old version of the CV flag in this repo had the same problem (fixed in #1). Thanks for confirming!

Although this raises a separate question: do you have any plans to keep the two projects in sync? It would be great to ensure parity as updates are made in either project.

[kapowaz]

It’s an interesting question. The obvious answer is: ideally, yes, but the reality is it might be harder for me to ensure this happens. This is part of why I ask about the ‘source of truth’ for the circle versions (hopefully @HatScripts can clarify); ideally (imho) there would be a Figma* file for both sets, with whatever common elements can be shared originating in a shared design file, such that changes there are reflected in both sets, whilst also permitting each ‘downstream’ set to maintain its own usage-specific changes.

Where it becomes trickier is I’ve already started making my own customisations to the designs in square-flags which could mean this isn’t possible to achieve, so I’d love to get the views of the maintainers as to whether it makes more sense for the projects to align, or if they should be treated as separate entities.

By the way, I’ve got a PR for updating Cabo Verde, which you can see here if you’re interested. No need to comment if you’re busy, I’ll probably merge it anyway in a few minutes, but you can take a look if you’d like!

*I appreciate there might be some reluctance amongst some members of the OSS community to rely on a commercial tool like Figma to maintain a project like this, but in my opinion since the output files are still editable SVGs, it’s not a complete obstacle. On the flip side, the benefits of using Figma are enormous, since it allows the many shared elements amongst flags to be updated simultaneously.

[kapowaz]

Also since you asked, here’s the same diff image as above but with only the circular changes visible:

[waldyrious]

I’d love to get the views of the maintainers as to whether it makes more sense for the projects to align, or if they should be treated as separate entities.

I don't think it needs to be an all-or-nothing thing: ideally some automated or semi-automated process would be set in place, but even just maintaining communication so that new flags and small edits can be manually ported back and forth would be a better situation than keeping the projects entirely separate.

Also since you asked, here’s the same diff image as above but with only the circular changes visible:

Amazing! That's quite a bit of work indeed. Thanks for sharing!

I would actually suggest adding a selection of the flags whose difference is most evident (perhaps one for each class of similar changes, like the Union Jack repositioning) to the README/home page of the square-flags project, since that would make it clearer why it is a separately-maintained project.

By the way, I’ve got a PR for updating Cabo Verde, which you can kapowaz/square-flags#10 if you’re interested.

Nice, I'll take a look!

[kapowaz]

Good idea; I'll add some more clear examples to the readme and describe what the changes were.

[cedvdb]

I don't see two separate projects by different maintainers being very successful, or different sets of flags on figma, each with their own subtle changes, for that matter. Ideally there would only be only one set of flags which can be automatically converted to circles. The changes made by @kapowaz inside the circle are not initially necessary and increase the workload needed initially. It could be part of a separate PR, but initially those changes are out of scope. Just removing the circle mask is already good enough for most of the flags although a few tweaks are needed here and there.

So my suggestion would be to have either this repo use squared flags and expose circle ones on display (github pages etc) so it does not clashes too much with the name, or have another repository be the source of truth.

[kapowaz]

Ideally there would only be only one set of flags which can be automatically converted to circles

Unfortunately — as I mentioned above — this doesn’t work very well for all flags. A lot of flags will work equally well with a circular or rounded rect mask on top of an initially square flag (tricolours for example), but others have very specific design decisions to suit the circular format which don’t work nearly as well once you remove the mask. Take the Australian flag (or any other flag which features a Union Jack in the ‘canton’ — upper left corner):

This was a large part of the motivation behind creating my set in the first place. Opinions will differ as to whether or not this kind of change matters; I use the example of Australia specifically because I got feedback from an Australian that the original version I came up with (which was much closer to an ‘unmasked’ version of the one from circle-flags) was not nearly recognisable enough, so I wanted to do something better.

Now, as to whether a different project can be ‘successful’ is a different question, since country flag changes aren’t that frequent, and so for the majority of projects that need a flag, they’ll probably get by fine once they have a set that works for them. I’m naturally keen not to cause disharmony with the existing project, and would ideally like there to be a mechanism whereby we can share our efforts to support one another.

[cedvdb]

Gotcha, but :

This library is circle flags, having the ability to change the border radius is warranted. To do so squared flags are needed to hide or show more or less content depending on the border radius. Since the library is circle flags, the circle flags designs are the focal point.

Now turn the problem around: your library is for squared flags, if you change the border radius to be a circle, you won't have the design the circle flag library provides either.

So it's fine if there is two sets of flags but even if this is circle flags with circle flags designs, the mask should be removed to allow for border radius adjustments. If your intended border radius is more or less a square then it would make sense to use the svgs from the square library then.

[kapowaz]

So it's fine if there is two sets of flags but even if this is circle flags with circle flags designs, the mask should be removed to allow for border radius adjustments.

Of course; the square-flags repo isn’t intended to invalidate the issue you raised, but rather to (potentially) solve for the problem of ‘I want square versions of the circle-flags graphics’.

[waldyrious]

To do so squared flags are needed to hide or show more or less content depending on the border radius.

Ooooh, this actually makes me wonder if we could implement some clever dynamic adaptations with SVG, like what's described here. I'm not sure if it's possible to make SVG attribute/CSS properties depend on a border radius rather than on something more fundamental like width/height of the document, but I thought I'd leave the idea here nevertheless :)

[cedvdb]

Flags may not display on flutter because of the mask in some scenarios ( #105)