No static SVG files!    No Image Sprite!    No Frameworks!   No Dependencies!  available on GitHub

All HTML required to display SVG flags is:

FlagMeister is a single KB gzip Custom Element / Web Component file

FlagMeister was developed in 2018 using 'Customized Built-In' Elements: <img is=flag-nl />
Alas Apple still refuses to implement this part of the Web Components standard in Safari.
In 2020 FlagMeister switched to slightly more verbose, but 100% supported 'Autonomous' Elements: <flag-nl></flag-nl>

If all you want is a SVG flag you can stop reading here...

Read on if you want FlagMeister to create:

Draw SVG on flags

The draw attribute/property accepts any valid SVG string or FlagMeister commands and adds it on top of the FlagMeister flag (a 640 x 480 grid)

FlagMeister commands and parameters (to be documented)

Notes on drawing

Apply CSS on IMGs

The FlagMeister flag IMG takes 100% of available width, in examples below the 5 column CSS grid sets the width.

FlagMeister generates SVG as Data-URI in IMG tags. All examples use standard CSS on the IMG tag:

Clip flags

Change SVG viewBox = " x y width height "

The flag is still drawn in a 640 by 480 grid !

Apply the FlagMeister light filter

This predefined SVG filter creates a 3D lighting effect and an optional spotlight defaulting to the center of the flag

The FlagMeister light function takes optional parameters as a JSON-formatted string in the filter attribute:

or, after deep-learning SVG filters, paste any valid SVG filter definition in the filter attribute.

CSS custom properties/variables can style multiple flags

FlagMeister flags redraw on attributes changes (observedAttributes): draw , clip , box , filter

Flags are not updated when CSS variables change!
When you hover (onmouseover) the 4th and 5th heart, the --flagmeisterfilter is not applied!
Use the flag.load() method to redraw a flag OR trigger an attribute change.

You can now re-create the banner:

But that is too much work...

... the FlagMeister added 361 BYTES!

... Now... you create the banner with a Autonomous Custom Element:

flagmeister-text creates all child DOM elements.
There is no shadowDOM so you can customize all elements with CSS specificity

Ofcourse it is impossible to store all flag details in 22 KB

IF flags require more detail
FlagMeister loads flags async when the width exceeds a number of pixels (observed by the ResizeObserver API)

Note: See the Flag Analyzer below which flags load extra detail by default

SVG flag repositories:

country 20px 40px 60px 100px No detail
countries API
Kent1D Nillson Lipis
flag-bo - Bolivia
flag-ug - Ugunda
flag-by - Belarus
flag-kz - Kazachstan
flag-rs - Serbia
flag-bf - Burkina Faso


detail and source parameters

Detail loading (n pixels) and the source repo can be configured with an element attribute/property OR CSS variable

Prevent detail loading (unless flag img is over 9998 pixels wide) Load from Nilsson Repo Load detail flags from Kent Repo No detail specified, so only flags with default detail setting Load all flags from Kent Repo (forced detail loading for every image over 1 pixel wide)

I built this tool for my flag selection phase, never meant it to be part of this demo page.
It is too cool to go to waste... But don't move the mouse too fast!

Repo GitHub
used / stars / fork
2018 count
Flags Requests All Flags GZip size
Great UI!
But can't load with 2-letter ISO reference
0 / 3 / 0 250+
Also regional flags
1 per SVG flag file
> 660 KB
RestCountries API 579 / 4439 / 968 251 2 per SVG flag file
Requires first call to API,
returns the flag URI
> 660 KB
Lipis flag-icons
Popular, But... most flags have wrong colors
9161 / 5920 / 832 247 1 per SVG flag file 687 KB
Nillson 175 / 1440 / 281 257 1 per SVG flag file 1100 KB
Flags in true proportions (not 4:3)
0 / 8 / 1 254
+ regional, org.
and historical flags
1 per SVG flag file est. 600 KB
SVG as CSS background
No Github Repo 253 1 CSS file 1297 KB
JavaScript generated SVG
1 / 1 / 1 250+ flags 1 JavaScript file 21 KB


Almost all colors in the Lipis Repo are incorrect, these are just the obvious ones.

Loading FlagAnalyzer...

Codestring for FlagMeister SVG parser: