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 32 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>

FlagMeister created 259 SVG flags, totalling 309955 hydrated bytes

ISO country code flags

non country flags

36 signal flags: <flag-signal char=x >

10 ICS signal flags: <flag-ics char=x >




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 32 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
detail=9999
countries API
(default)
Kent1D Nillson Lipis
flag-bo - Bolivia
flag-ug - Ugunda
flag-by - Belarus
flag-kz - Kazachstan
flag-rs - Serbia
flag-bf - Burkina Faso

Observations

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
https://flags.dsgn.it/
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
Kent1D
Flags in true proportions (not 4:3)
0 / 8 / 1 254
+ regional, org.
and historical flags
1 per SVG flag file est. 600 KB
Phocas
SVG as CSS background
No Github Repo 253 1 CSS file 1297 KB
FlagMeister
JavaScript generated SVG
1 / 1 / 1 259 flags 1 JavaScript file 32 KB

Filter:

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

FlagMeister created 259 SVG flags, totalling 309955 hydrated bytes

ISO country code flags

non country flags

Loading FlagAnalyzer...

Codestring for FlagMeister SVG parser:

Flagmeister minified GZIP Filesize is small

And could be placed as inline code inside the <head> of your HTML page

29539  Bytes https://flagmeister.github.io/elements.flagmeister.min.js Loading GZIP Thermal analysis
Custom Elements/Web Components for all modern Browsers : FlagMeister300+ SVG flags in one 25KB Custom Element/WebComponent  -  CardMeister52 SVG Playing Cards in one 16KB Custom Element/WebComponent  -  ChessMeisterSVG Chess pieces and Interactive Chessboard in one 9KB Custom Element/WebComponent  -  IconMeisterPick any of 5000+ SVG Icons in one 1KB Custom Element/WebComponent  -  Pie-Meister<pie-chart> and <progress-circle> in one 1KB Custom Element/WebComponent