Hacker News Reader

Comment by vhsdev | Hacker News Reader

114 pointsvhsdev57 comments

If one is looking for public domain versions with the correct proportions, Wikimedia Commons might have what you need:

https://commons.wikimedia.org/wiki/Sovereign-state_flags

This one has the correct colors as well.

Weelll… that page lists the #ffffff version of the flag of Poland [0]. The law specifies the color using a strange color scale (CIELUV [1]), and it was written in the 1980s with fabric in mind, which cannot be a pure white - so the color translates to #E9E8E7, looking like [2]. This was the subject of a flamewar on Polish Wikipedia around 2006, which also involved a light-pink version [3] due to someone miscalculating the colors. In the end, en.wiki uses the #fff version [4], and pl.wiki uses the grey version in the flag article [5] and the white version anywhere else [6].

And a few months ago, the government proposed an amendment to the law. That lists #ffffff as the official color (for non-textile use). But it will probably take some time until it actually goes into force, if it ever will…

tl;dr: colors are hard, flag colors specified by 1980s laws doubly so.

[0] https://commons.wikimedia.org/wiki/File:Flag_of_Poland.svg [1] https://en.wikipedia.org/wiki/CIELUV [2] https://commons.wikimedia.org/wiki/File:Flag_of_Poland_(norm... [3] https://commons.wikimedia.org/wiki/File:Flaga_Polski_strange... [4] https://en.wikipedia.org/wiki/Flag_of_Poland [5] https://pl.wikipedia.org/wiki/Flaga_Polski [6] https://pl.wikipedia.org/wiki/Polska

... and aspect ratios. Country flags are not (almost) squared as in the OP link.

Kazakhstan flag just flat out wrong. It looks similar, and that's about it. Compare:

https://www.akorda.kz/assets/media/flag_mediumThumb.jpg

https://flagicons.lipis.dev/flags/4x3/kz.svg

https://upload.wikimedia.org/wikipedia/commons/d/d3/Flag_of_...

Wikipedia's version looks like a very good recreation and probably should be used instead.

Whoa, that is indeed a really bad approximation. The site notes that all the flags are forced to 4:3 so many of them need to be retouched (few real sovereign flaga are in this ratio). But that's just really bad approximation - the sun and eagle are way out of proportion.

I noticed also that Bouvet Island (bv) is represented by an almost comically bad version of the Norwegian flag. Finally, many of the colors are off, e.g. flag of Saudi Arabia.

This site is dangerous - by using these ridiculously incorrect flags you actually risk offending certain users.

Was the flag changed/corrected or are you actually saying that about "it will be offensive that the eagle is too big"?

I feel like it would be pretty weird for someone to get offended because the eagle was exactly correct but too large on the flag.

Flags are extremely powerful national symbols. Many countries have laws criminizalizing defacing the national flag. For example India: https://en.wikipedia.org/wiki/Prevention_of_Insults_to_Natio...

US: https://www.law.cornell.edu/uscode/text/18/700

If you do not know the specific history regarding why the proportions of some national flag are as they are, I would be very careful about altering those. Although probably not criminal in most places, showing an incorrect flag can still cause offense and draw disfavourable attention to the publisher who uses the incorrect flag.

18 USC § 700 is unenforceable.

There has been a Supreme Court precedent that lets you to do whatever the fuck you want with a US flag that you own. You can trample on it all day long, and it’s a protected activity under the first amendment.

Edit: https://en.m.wikipedia.org/wiki/United_States_v._Eichman

My main issue is wrong ornament and it looks like very quickly put up work, e.g. sun rays are misaligned, eagle's head looks like a child paint. I'm not offended by it, but that's a bad quality and lack of attention to details and for some people that could be a source of offence when it comes to their national symbols. I admit that Kazakhstan's flag is quite complex compared to something like 3 colored rectangles, so it's hard to ask for more. But wikipedia's SVG should just be sourced and resized as necessary IMO rather than spending time re-painting it again. Probably the same with some other countries. I don't want to blame someone who took his time re-drawing those flags, that's respectable by itself. But there's some space for improvement. May be I should make a pull request rather than whining about it.

A handmade eagle made with cloth, scissors and embroidery for an actual flag can be far worse than a badly drawn icon.

Most of these flags seem to have wrong proportions, a lot of those I checked also have wrong colors and some of the flags have other serious mistakes. So unfortunately this library seems quite useless.

They'd be ok for small icons where the details are indistinguishable

Only if you're fine with them being indistinguishable.

The flags of Indonesia and Monaco are easy to tell apart if they're the correct aspect ratio, because the flag of Monaco is much narrower. If you force both of them into the same shape, as this collection does

https://flagicons.lipis.dev/flags/4x3/id.svg

https://flagicons.lipis.dev/flags/4x3/mc.svg

they only differ in the shade of red. And I think they got it wrong: Indonesia's red looks darker than I'm used to, Monaco's looks brighter.

If you absolutely need to fit many different flags into a uniform rectangle, you'd better keep the aspect ratio and leave the rest of the rectangle transparent. And don't forget to include a differently-colored border so people can tell where white stripes end (or whatever your background color is.)

At this point I'd just rely on the emoji font of the system..

Note that flags have official ratios - they're aren't just a generic shape.

Also official colors. Some of the flags have both wrong.

Neh, pal.

Ha! I'm from there and it's always interesting to see the flag get butchered in a variety of ways across the internet and in real life. The procedure for drawing the flag is outlined in the constitution and there's a popular numberphile video on it (https://www.youtube.com/watch?v=f2Gne3UHKHs).

Last I checked, there's some ambiguity in how to draw the moon in the upper triangle. It's supposed to have eight points with no prescription on how they connect to the crescent below. (Step 18 in this tutorial: https://www.settinger.net/experiments/nepal-flag/). This seems to be the most popular version: https://clipground.com/images/nepali-flag-png-4.png.

For example the Union Flag is normally 1:2, while the Stars and Stripes is 1:1.9

I think he's saying 'Nepal'. Which has a triangular flag.

Never seen Nepal written like that before.

That was probably supposed to be a pun - you're both on the same side here :)

You might have missed the subtle pointer to Nepal's flag.

Except that flags do not all have the same ratio. It may be useful to assume so for graphic layouts, but it is not really correct.

The 1:1 variants seem to indicate that this collection is intended more for the benefit of UI designers etc. who want all flags to have consistent shape for their designs rather than as a reference for the definitive versions of flags.

Unfortunately they chose 3:4 for the rectangular variants, which isn't really used that much, 2:3 and 1:2 are more common for flags[1], so lots more flags have their designs rearranged, squished and stretched to fit the box than would otherwise need to be. For example flags with the UK's Union Jack in the canton seem to be noticeably mangled as the Union Jack seems far too large relatively. It's always going to be a compromise to have one shape, but just using 2:3 (the most common shape) would mean far fewer would need adjustments.

[1] https://en.wikipedia.org/wiki/List_of_aspect_ratios_of_natio...

> The 1:1 variants seem to indicate that this collection is intended more for the benefit of UI designers etc. who want all flags to have consistent shape for their designs rather than as a reference for the definitive versions of flags.

So the UI people just make up fake flags then. Cool.

And a fun thing about the UK flag is that you are allowed to make it in different aspect ratios, but you can't just naively scale it: https://en.wikipedia.org/wiki/Union_Jack#Specification

I don't know whether SVG can handle that, but you can get JavaScript to display it correctly in any aspect ratio, of course.

https://temp.chrismorgan.info/2022-02-05-union-jack.svg

It depends on calc(), vw and vh units, so it’ll work in browsers but not elsewhere.

(Certainly not all flags with similar specifications will be achievable; this one’s diagonals just happened to be all neatly anchored in the corners, though the red diagonal St Patrick’s cross is fiddly, requiring masking to achieve the required stroke alignment, for which see also https://svgwg.org/specs/strokes/#SpecifyingStrokeAlignment, which is an incomplete draft, and unimplemented.)

Seems like this is suffering from issues around the flag of Afghanistan as well: https://blog.emojipedia.org/what-about-the-afghanistan-flag-...

A simple "technical" project that solves a clearly defined issue (a collection of the flags of the world for easy use) but turns out to be a lightning rod for political drama.

First thing I did: scroll to see whether Taiwan was represented.

https://devblogs.microsoft.com/oldnewthing/20030822-00/?p=42...

Exactly what I was thinking - the flag of Afghanistan is not current.

Wikipedia's "Gallery of sovereign state flags"[0] is also a good source for SVGs of flags.

[0]: https://en.wikipedia.org/wiki/Gallery_of_sovereign_state_fla...

On my iPhone, some of the cross flags have gaps in them (e.g. Georgia, Guernsey and Sweden), see image below. But when I view the source for the Swedish flag, it's very clearly drawing one blue rectangle and two yellow ones:

  <svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-se" viewBox="0 0 640 480">
    <path fill="#066aa7" d="M0 0h640v480H0z"/>
    <path fill="#fecc00" d="M0 192h640v96H0z"/>
    <path fill="#fecc00" d="M176 0h96v480h-96z"/>
  </svg>

(each path has five commands, making a box: "move to", "horizontal line", "vertical line", "horizontal line", "close path")

I guess the iOS SVG renderer is just buggy.

https://i.imgur.com/toS0Wjh.jpeg

https://github.com/lipis/flag-icons/blob/main/flags/4x3/se.s...

Looks like the French flag has missed an update: https://www.euronews.com/2021/11/15/macron-reverts-french-fl...

Who else immediately thought Red Dwarf's scene where Rimmer commanded bots to repaint the interior from navy blue to ocean blue?

Reminds me of the challenge that a former colleague of mine threw to himself to make all country flags in pure CSS [1].

[1] https://pixelastic.github.io/css-flags/

Or you could generate the emoji symbol for the flag you want to display:

  country_code = 'AU'
  c1, c2 = map(lambda x: ord(x) + 0x1f1a5, country_code)
  flag = chr(c1) + chr(c2)

Which assumes that the user has a font installed containing all required emojis. It's much safer to assume that their browser can render SVGs.

Which is pretty much every current OS and device except Windows, but yes. Microsoft holding us back again.

I still assume political reasons and it's a lose lose situation for MS. E.g. they either include Taiwan's flag and lose China's approval, or they don't and get a huge backlash from everywhere else.

PS: Firefox on Windows uses its own emoji font "Twemoji Mozilla" to display flags.

No font in Google fonts does, for instance. At least from their own little demonstrator. There is https://github.com/googlefonts/noto-emoji Noto Emoji which can render the flags but you need to build it yourself

These are all super ugly -- if you want good SVG flags with a permissive license, I highly recommend using the SVGs from Noto Color Emoji:

https://github.com/googlefonts/noto-emoji/tree/main/svg

This is a really good project if you want to anger every vexillologist and people who like their country's flag.

Shameless plug: My side project for searching for logos includes Lipis flags as well as some other sources.

Search index is on the file name, so it only really works well for distinct country codes: https://logosear.ch/search.html?q=bz

But the exact match pages will work: https://logosear.ch/logos/pl/index.html

Anyone know of a similar library but with low-poly / low-res SVG/PNG flags instead? These flags are great, but they're also huge (some bigger than 400kB), which isn't really necessary if you're only showing them as small icons no larger than 10-20px.

Find an opensource font that supports Unicode Regional Indicator Symbols (https://en.wikipedia.org/wiki/Regional_indicator_symbol).

Google led me to https://www.babelstone.co.uk/Fonts/Flags.html. That’s SIL-licensed.

There almost certainly are other fonts with liberal licenses.

They look terrible (as SVG is not something that is good for aesthetics) and are ironic beccause they insult the nationalism of each country. Well, maybe I'm thinking of coat of arms in SVG.

Sweden 228B, Croatia 41.5kB. And kids in first year of school should know how to draw flag from memory :(. SVG file size should be good indicator to see if flag is to complex.

> kids in first year of school should know how to draw flag from memory

Roman Mars taught me that – well Ted Kaye, but Roman taught me in his seminal TED talk [1].

[1] https://www.youtube.com/watch?v=pnv5iKB2hl4

I sorted all svg files by size to find most complex and least complex, it looks like good indicator but not to be used alone.

3 worst

-rw-r--r-- 1 197121 395610 Feb 4 15:19 do.svg Dominican Republic

-rw-r--r-- 1 197121 187525 Feb 4 15:19 rs.svg Serbia

-rw-r--r-- 1 197121 118305 Feb 4 15:19 bo.svg Bolivia

3 best

-rw-r--r-- 1 197121 225 Feb 4 15:19 pl.svg Poland

-rw-r--r-- 1 197121 215 Feb 4 15:19 de.svg Deutschland

-rw-r--r-- 1 197121 191 Feb 4 15:19 bd.svg Bangladesh

Maybe we should just paint the country code on a white piece of cloth instead.

Also, flags on websites shouldn't be used for language switchers.

No flag for Palestine?

Yes there is. (The list is only kind-of in alphabetical order).

Reply on news.ycombinator.com