Fix color-bleeding issues (all flags)

[climech]

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:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <mask id="m">
    <circle cx="256" cy="256" r="256" fill="#fff"/>
  </mask>
  <g mask="url(#m)">
    <!-- masked contents -->
  </g>
</svg>

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:

<mask id="m">
  <rect width="512" height="512" rx="25%" fill="#fff"/>
</mask>

Size difference

$ du -sb flags/ flags_updated/
196283 flags/
199332 flags_updated/

Minor changes

• mh: make stripes converge on viewbox corner
• as: snap triangle corners to viewbox corners
• bh: make the "teeth" even
• er: snap triangle corners to viewbox corners

These flags were found to be slightly malformed (not perfectly circular) which is now fixed:

• bq-se
• bt
• cx
• it-82
• pg

[HatScripts]

Wow, this looks utterly amazing! How long did all this take you? That build script looks awesome too, and all the added documentation to go along with it. Seriously cool!

I've looked through the minor changes too and they all look to be good and up to scratch. I'll have a peruse through the full list of flags when I'm able to and report back to you. 😄

[climech]

Sure thing, glad you like it!

It took me about a week, and I became super-proficient at Inkscape keyboard shortcuts in the process 😄. I really wanted to use the flags in one of my projects, but the rendering artifacts were a big itch for me 😅

Edit: Thanks for the invite btw!

[HatScripts]

It took me about a week, and I became super-proficient at Inkscape keyboard shortcuts in the process 😄. I really wanted to use the flags in one of my projects, but the rendering artifacts were a big itch for me 😅

Ah I see, that makes sense. They were a big itch for a lot of people it seemed, haha. Thank you once again for your awesome contribution to the repo. Merged 😄🚀