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

All HTML required to display SVG flags is:

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)

• 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

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!

All FlagMeister flags needing work Flags with detail Mismatching flags Filter:

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