Comments (17)
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?
from circle-flags.
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.
from circle-flags.
Also since you asked, here’s the same diff image as above but with only the circular changes visible:
from circle-flags.
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!
from circle-flags.
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.
from circle-flags.
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’.
from circle-flags.
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 :)
from circle-flags.
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.
from circle-flags.
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?
from circle-flags.
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):
from circle-flags.
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?
from circle-flags.
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!
from circle-flags.
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.
from circle-flags.
Good idea; I'll add some more clear examples to the readme and describe what the changes were.
from circle-flags.
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.
from circle-flags.
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.
from circle-flags.
Related Issues (20)
- Language flags HOT 12
- Bangladesh flag is not centered HOT 2
- Earth, Mars, Nato, Olympics, UN flags render a broken image HOT 1
- install by npm with exact version HOT 1
- Add Antarctica "True South" flag HOT 5
- Historical flags HOT 4
- Update Afghanistan flag HOT 1
- Add Jolly Roger
- Add Hong Kong flag HOT 1
- Consistent naming of subnational flags HOT 5
- Request to improve the central circle of KR flag. HOT 2
- Rollback to the internationally-recognized flag of Afghanistan HOT 7
- Flags of DPR and LPR
- Update Martinique Flag
- Add flag of Quebec
- issue with SVGO HOT 1
- Loading Image into Google sheet using =image() HOT 2
- Do I need to get the license to use the flags for my company app UI? HOT 1
- More explicit svgo version HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from circle-flags.