Fix color-bleeding issues (all flags) #18
Merged
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.
Fix color-bleeding issues (all flags)
This updates all 276 icons to remove (hopefully) all color-bleeding artifacts, both at the outer edges and inside. It was done by squaring all the icons, overlapping the shapes where needed, and finally applying a circular mask to all files using a custom script.
The artifacts were particularly visible on dark backgrounds at lower resolutions, e.g.:
<mask>
was chosen over<clipPath>
because the former results in slightly smaller file sizes (exactly 1 byte smaller 🙃).The icons now follow a predictable structure:
This also applies to flags with uniformly-colored edges such as
jp.svg
, where the mask doesn't make any difference as far as fixing any artifacts. It does however make the icons easier to work with programmatically, and the overall size difference after the update is very small (+1.6%).Because the shapes invariably conform to a square now, it becomes possible to change the shape of the mask to something else, e.g. a square with rounded corners:
Size difference
Minor changes
These flags were found to be slightly malformed (not perfectly circular) which is now fixed: