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>

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)

backgroundcolor bgcolor: or b: [color = #fff]
circle circle: or c: cx , cy , radius , color [, stroke width , strokecolor]
rect: x , y , width , height , color , [stroke width , strokecolor]
line: width , color , x1 , y1 , x2 , y2 , [stroke width , strokecolor]
flag: iso , [stroke width , strokecolor]
background: color
attr: attribute , fontsize , y OR attr: text-JSON
text: JSON Object: (showing default values):
{ str = 'fm' , size = 520 , x = 320 , y = 430 , fill = false , stroke = '' , s = stroke.split`,` , font = 'Bookman Old Style' , weight = 'bold' , anchor = 'middle'}

Notes on drawing

FlagMeister does no error checking, pay attention to single and double quote usage
SVG strings can only contain single quotes
The FlagMeister text method takes one parameter, a valid JSON string with double quotes
Be sure to read what you are NOT allowed to do with the US flag by US Federal code 36

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:

Word: yes! this is a live INPUT field (use a _ underscore for spaces)
an flag image for every letter
Clipped with a SVG text-character
FlagMeister Light filter
CSS highlighting and drop shadow

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

The countries API (used by default) does not have a detailed Bolivian flag
Most repos use the true size (not 640:480) flagsize (you can ofcourse force height with CSS)
The very popular Lipis repo almost always has flags with incorrect colors

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	250+ flags	1 JavaScript file	21 KB

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

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

FlagMeister commands and parameters (to be documented)

Notes on drawing

Apply CSS on IMGs

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

CSS custom properties/variables can style multiple flags

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:

SVG flag repositories:

Observations

detail and source parameters

Loading FlagAnalyzer...

Codestring for FlagMeister SVG parser:

Flagmeister minified GZIP Filesize is small

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

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

FlagMeister commands and parameters (to be documented)

Notes on drawing

Apply CSS on IMGs

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

CSS custom properties/variables can style multiple flags

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:

SVG flag repositories:

Observations

detail and source parameters

Loading FlagAnalyzer...

Codestring for FlagMeister SVG parser:

Flagmeister minified GZIP Filesize is small

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

But that is too much work...

... the FlagMeister added 361 BYTES!

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