Add 1:1 crops
mindplay-dk opened this issue · comments
As mentioned, the design I'm working on calls for circular flags - it turns out, very little art direction is required to do this, and we could very easily add CSS-only modifiers to make this happen.
I hacked out a quick UI that lets me edit the CSS background-position percentage of every flag, and went over all of them and adjusted them by hand - you can see the result here:
https://codesandbox.io/s/thirsty-stallman-0pnlt
So really, all I would need to do is generate a bit of CSS from these values, which I'm going to do anyway for the project I'm working on.
I decided I don't want to manually build proportional versions of every flag - almost all of them look just fine if you simply center the view over the central visual element in each flag.
I also tried to be respectful of a few flags where details would inevitably be lost - I looked up the meaning of certain elements in these flags and tried to avoid cropping out elements that represent geographical/political entities.
For all but a few flags, this worked out well, I think - maybe 3 or 4 flags in there could use a bit of actual art direction to move certain elements around, but I think this is pretty good considering we wouldn't need to go through the hassle of shipping and maintaining another whole set of flags.
Well, let me know what you think? I'm building the CSS modifier anyhow and I'd be happy to submit a PR, if you'd like. 🙂
I hacked out a quick UI that lets me edit the CSS background-position percentage of every flag, and went over all of them and adjusted them by hand - you can see the result here:
Maaan, this is actually cool.
Didn't think you'd go this far.
And this offsets thing you've created: we can actually do better — instead of adjusting background-position, let's generate a 1x1 flags directory and adjust viewBox there, and 1x1 CSS would be generated from 1x1 flags.
So really, all I would need to do is generate a bit of CSS from these values, which I'm going to do anyway for the project I'm working on.
Yeah, I figured.
I decided I don't want to manually build proportional versions of every flag - almost all of them look just fine if you simply center the view over the central visual element in each flag.
Yeah, indeed: this can be done via viewBox automatically, by a machine.
I also tried to be respectful of a few flags where details would inevitably be lost - I looked up the meaning of certain elements in these flags and tried to avoid cropping out elements that represent geographical/political entities.
Wow, so you took a detour to some ethnocultural history.
For all but a few flags, this worked out well, I think - maybe 3 or 4 flags in there could use a bit of actual art direction to move certain elements around, but I think this is pretty good considering we wouldn't need to go through the hassle of shipping and maintaining another whole set of flags.
True.
We could also store those special flags somewhere in 1x1/custom and then just copy the contents of that directory over the autogenerated 1x1 flags so that "custom" ones always override autogenerated ones.
Well, let me know what you think? I'm building the CSS modifier anyhow and I'd be happy to submit a PR, if you'd like.
Sure.
But, I'd suggest going with autogenerating 1x1 flags with modified viewBox based on the percentages you've found.
Something like viewBox="x y width height" -> viewBox="x+RoundMaybeUpToTwoDecimalPoints((width-height)*percent/100) y height height".
Ah, I get it - you want a set of individual SVG files because otherwise this feature is only available for the CSS version of the flags, yeah, I can see that.
The thing is, for the moment, I have what I need for the project I'm building - the result is good enough, and I'm not really sure I want to manually create alternate versions of any of the flags. I don't even know a good tool for editing SVG images, but... I'll think about it... 🙂
The thing is, for the moment, I have what I need for the project I'm building - the result is good enough, and I'm not really sure I want to manually create alternate versions of any of the flags. I don't even know a good tool for editing SVG images, but... I'll think about it...
Sure, I can do that.
I'll build off of your demo code: the page for generating offsets will be part of the github repo, and 1x1 SVGs will be generated from 4x3 SVGs by replacing their viewBox text part (no parser).
@mindplay-dk What's your project, by the way? Just curious.
I'll build off of your demo code: the page for generating offsets will be part of the github repo, and
1x1SVGs will be generated from4x3SVGs by replacing theirviewBoxtext part (no parser).
👍
What's your project, by the way? Just curious.
It's a login/sign-up form that accepts phone-numbers and lets the user pick their country/dial-code from a drop-down with flags. There's a thing for looking up prices in different countries with sort of similar behavior too. So I needed to preload all the flags, and the old version of this UI makes 200 web requests for 2.5 MB of flags, sooo 😆
and the old version of this UI makes 200 web requests for 2.5 MB of flags, sooo
Mmmm, I sense flag-icon-css )
Mmmmmaybe 😜