[HN Gopher] Country Flags in SVG
___________________________________________________________________
Country Flags in SVG
Author : vhsdev
Score : 93 points
Date : 2022-02-04 11:29 UTC (11 hours ago)
(HTM) web link (flagicons.lipis.dev)
(TXT) w3m dump (flagicons.lipis.dev)
| abbe98 wrote:
| 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
| 0xdada wrote:
| This one has the correct colors as well.
| wisam wrote:
| ... and aspect ratios. Country flags are not (almost) squared
| as in the OP link.
| Kwpolska wrote:
| 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://c
| ommons.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
| warning26 wrote:
| 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
| danielskogly wrote:
| 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...
| abujazar wrote:
| 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.
| sdflhasjd wrote:
| They'd be ok for small icons where the details are
| indistinguishable
| yorwba wrote:
| 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.)
| m-p-3 wrote:
| At this point I'd just rely on the emoji font of the system..
| [deleted]
| aseure wrote:
| 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/
| rommel917 wrote:
| 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.
| misterS wrote:
| > 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
| rommel917 wrote:
| 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
| dveeden2 wrote:
| Seems like this is suffering from issues around the flag of
| Afghanistan as well: https://blog.emojipedia.org/what-about-the-
| afghanistan-flag-...
| mnsc wrote:
| 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.
| macintux wrote:
| First thing I did: scroll to see whether Taiwan was
| represented.
| iqanq wrote:
| https://devblogs.microsoft.com/oldnewthing/20030822-00/?p=42.
| ..
| iqanq wrote:
| Exactly what I was thinking - the flag of Afghanistan is not
| current.
| heipei wrote:
| 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.
| Someone wrote:
| 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.
| xjay wrote:
| Maybe we should just paint the country code on a white piece of
| cloth instead.
| julianwachholz wrote:
| This is a really good project if you want to anger every
| vexillologist and people who like their country's flag.
| dveeden2 wrote:
| Looks like the French flag has missed an update:
| https://www.euronews.com/2021/11/15/macron-reverts-french-fl...
| inshadows wrote:
| Who else immediately thought Red Dwarf's scene where Rimmer
| commanded bots to repaint the interior from navy blue to ocean
| blue?
| blue1 wrote:
| 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.
| fredoralive wrote:
| 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...
| gspr wrote:
| > 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.
| bloak wrote:
| 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.
| chrismorgan wrote:
| 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.)
| rbut wrote:
| 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)
| TonyTrapp wrote:
| 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.
| rbut wrote:
| Which is pretty much every current OS and device except
| Windows, but yes. Microsoft holding us back again.
| otrahuevada wrote:
| 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
| julianwachholz wrote:
| 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.
| nemetroid wrote:
| 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...
| chrisseaton wrote:
| Note that flags have official ratios - they're aren't just a
| generic shape.
| smoe wrote:
| Also official colors. Some of the flags have both wrong.
| yonixw wrote:
| Neh, pal.
| eyeundersand wrote:
| 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.
| chrisseaton wrote:
| For example the Union Flag is normally 1:2, while the Stars
| and Stripes is 1:1.9
| tyingq wrote:
| You might have missed the subtle pointer to Nepal's flag.
| s_dev wrote:
| I think he's saying 'Nepal'. Which has a triangular flag.
| chrisseaton wrote:
| Never seen Nepal written like that before.
| bananicorn wrote:
| That was probably supposed to be a pun - you're both on
| the same side here :)
| vbezhenar wrote:
| 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.
| vesinisa wrote:
| 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.
| esrauch wrote:
| 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.
| vbezhenar wrote:
| 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.
| HelloNurse wrote:
| A handmade eagle made with cloth, scissors and embroidery
| for an actual flag can be far worse than a badly drawn
| icon.
| vesinisa wrote:
| Flags are extremely powerful national symbols. Many
| countries have laws _criminizalizing_ defacing the national
| flag. For example India: https://en.wikipedia.org/wiki/Prev
| ention_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.
| sgjohnson wrote:
| 18 USC SS 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
| bradhe wrote:
| No flag for Palestine?
| jan_Inkepa wrote:
| Yes there is. (The list is only kind-of in alphabetical order).
| Fileformat wrote:
| 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
| unixbane wrote:
| 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.
| riidom wrote:
| Also, flags on websites shouldn't be used for language switchers.
___________________________________________________________________
(page generated 2022-02-04 23:02 UTC)