Goals

• High quality artwork
  • Stylistic uniformity
  • Limited visual complexity
  • Improvements to legibility
• Minimal distortion and deviation
• Smallest possible file sizes
• Predictable, consistent markup

Aspect Ratios

With few exceptions, flags are rectangular, but their sides occur in many different ratios. Purists will argue that the original intentions of the design should be upheld. But there is a counterargument.

The proliferation of differing ratios presents interesting trivia, but the differences are irrelevant when flags are used as visual affordances outside of official contexts. Their use in emoji pickers provides a compelling example. Here, mismatched proportions degrade the appearance of both the individual flags and the surrounding layout. The many minor variations would appear irregular at best, or unintentional at worst.

Designers identify these inconsistencies as a distraction that should be minimised. The layouts they create rely on repeatable blocks of consistently sized shapes. With no standard to rely on, the temptation to crop or scale flags in situ is inevitable. However, such an ad hoc approach greatly compromises flags with the most extreme widths or heights.

Deciding on an aspect ratio is a difficult choice. The most commonly used ratio is 3:2, of which there are 109 flags in this library. However, 2:1 is also common, numbering 81 flags. The gap between these two ratios is significant. When narrower designs are adapted to a wider format, they appear stretched. The same is true in the other direction — wider flags look uncomfortably squashed in the narrower format. To compromise, an aspect ratio of 5:3 is used. While less common than the first two, it offers a happy medium, distorting more flags but to a much lesser degree.

Modifying the shapes of flags without introducing unnecessary distortions is a substantial undertaking. With that in mind, changes have been made in a way that aims to tread as lightly as possible. Each flag has been scaled using strategies that cater to their specific design elements.

1. Horizontal, vertical and diagonal bands are stretched to fill the new dimensions.

2. Emblems and other items in the foreground maintain their proportions when scaled. For example, if the new flag design is 120% wider, the foreground elements are increased in both directions by 110%. This balances the change in distance to the vertical and horizontal edges. However, when stripes closely contain emblems, they are left unscaled to prevent intersecting elements.

3. Large items like squares and triangles are scaled in a way that best compromises between the competing relationships that inform them. For example, if an equilateral triangle points to the center on a narrow flag, it cannot be widened and keep equal sides. Instead, it is stretched to a lesser degree, keeping something of the equilateral triangle while still pointing near the centre of the flag.

Simplification

Many flags use basic geometric constructions, but not all. Belize, Bolivia, and Brunei feature complex illustrations and typography in their designs. Much of this detail is unnecessary when flags are displayed at small sizes. Moreover, the most complex of these designs take up hundreds of kilobytes, negating the advantages of the vector format.

All flags are drawn on a 1200×720 unit grid. The large size of the grid allows pre-rounding to whole units without visually compromising each design. Snapping values in this way removes the risk of later minification steps introducing unwanted distortions. This grid determines the finest level of detail that is possible, so simplification remains consistent across the collection. However, an exception is made for typography, which is allowed an additional decimal place of accuracy to avoid exaggerated distortions. (Consider use of intelligent transforms/scales to negate this need.)

Shapes are drawn with only a <path>, <circle> and <use> elements, and colour is exclusively applied with the fill attribute. No stroke or gradient is applied to any of the artwork. This constraint should make the collection more amenable to further processing by others, as there are less corner cases to consider.

Land masses are drawn using only straight lines, so that there shapes can be simplified using the Ramer–Douglas–Peucker algorithm.

Finally, each design has been simplified to fit within a maximum file size of 10kB. The means the most detailed flags feature the highest level of simplification.

Colours

Despite their tendency towards primary colours, flags exhibit a large degree of subtle, and often unintentional, variation. While some flags dictate the use of specific colours, others are less precise.

Limiting the colour palette means the flags in this collection deviate from their official designs. However, it ensures that when flags are shown together, the different combinations are predictable and unlikely to clash. The small, predefined palette also sets the groundwork for more creative modifications.

Choosing the best approach to align these colours requires some thinking. An overly minimal approach would force unnecessary substitutions, significantly altering the original designs. It’s also important that the colour palette is defined by the needs of the flags, and not the other way around.

To construct an initial palette, the full selection of colours was reduced to smaller sets of various sizes using colour quantisation. This exploration provided a reduced palette of 16 colours able to reproduce most flags with reasonable accuracy and minimal duplication.

But this mechanical selection wasn’t perfect. The quantisation was performed naively, treating all colours equally regardless of the area they cover. Rarer colours — like the turqoise variations used by the Bahamas and Uzbekistan, or the maroons of Qatar and Latvia — were lost in the averages. Other detailed elements were too complex to resolve without additional shades. To resolve these shortcomings, the palette was carefully expanded to 32 colours. New colours were added manually to fill gaps according to the flags that were most affected. Base colours were adjusted to complement these additions.

To prevent introducing too much bias, the palette is mapped to the original flags by computing the CIEDE2000 colour difference in L*a*b* color space. This ensures consistent mapping of colours and helps to identify issues. When an unexpected color is used, it suggests a weakness in the palette.

Before computing the difference, the b-channel of the Lab colour value is downweighted and the L-channel is upweighted. The first weighting helps to emphasise cultural distinctions in primary colours over perceptual differences. For example, as red moves towards orange, it is more likely to be perceived as a different primary color compared to an equivalent move towards violet. The second weighting prioritised tonal similarity over exact hue matching. Note that this weighting was not chosen scientifically, and may reflect the author’s biases. There may be an alternative colour model which negates the need to manipulate the L*a*b weights in this way. However, initial experiments in this direction were not promising.

Finally, the palette was manually refined to better align the levels of saturation and brightness of the palette. Again, this reflects the author’s personal taste.

It’s worth noting that the palette does not include pure white or black. This was originally a result of the colour quantisation, but has its own benefits. The outlines of flags that use large fields of white, such as the Japanese flag, remain defined on pages using a pure white background.