Skip to content
300+ SVG flags in one single Custom-Element/WebComponent
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


        <script src='elements.flagmeister.min.js'></script>
      <img is=flag-nl>
      <img is=flag-zw>
      <img is=flag-ke>
      <img is=flag-kr>

      <img is=flag-es>
      <img is=flag-aq>
      <img is=flag-nz>
      <img is=flag-jollyroger>

Errors and missing flags

There is no single truth on SVG flags. All flag sites out in the wild have errors. The most popular one flag-icon-css has many incorrect colors. Some are missing details in flags.

  • I first built a tool to analyze all SVG flags out there: documentation.html#FlagMeisterAnalyzeFlags

  • copied all SVG flags into one file

  • corrected all SVG to Viewbox 640x480

  • removed bloated SVG

  • rewrote all repeating SVG to JavaScript functions generating SVG

  • rewrote all SVG JavaScript functions to parse Strings (better for minification and performance)

  • wrote a parser to convert Strings to SVG (when you use 1 flag only 1 SVG flag is generated)

The final result is a single 26KB (GZip) Custom Element/Web Component file

a (Lipis) SVG flag:

<svg xmlns="" id="flag-icon-css-bh" viewBox="0 0 640 480"> <defs> <clipPath id="a"> <path fill-opacity=".7" d="M0 0h640v480H0z"/> </clipPath> </defs> <g fill-rule="evenodd" stroke-width="1pt" clip-path="url(#a)"> <path fill="#e10011" d="M-32.5 0h720v480h-720z"/> <path fill="#fff" d="M114.3 479.8l-146.8.2V0h146l94.3 30.4-93.5 29.5 93.5 30.5-93.5 29.5 93.5 30.5-93.5 29.5 93.5 30.5-93.5 29.5 93.5 30.5-93.5 29.5 93.5 30.5-93.5 29.5 93.5 30.5-93.5 29.5 93.5 30.5-93.5 29.5"/> </g> </svg>

Becomes FlagMeistered:

bgcolor:#e10011;path:#fff,m114 480l-146 1V0h180l94 48-99 48 99 48-99 48 99 48-99 48 99 48-99 48 99 48-99 48 99

Resources Used




SVG Filters, Masks, Clip

CSS clip path


Language selectors

Ali Baba - 67 KB$node_modules/@alife/alpha-icon/src/img/sprites/69221370.png

Apple individual images 176 KB

Code Fragments

sed -i -ne '/<!-- BEGIN -->/ {p; r FILE1.EXT' -e ':a; n; /<!-- END -->/ {p; b}; ba}; p' OUTPUT.EXT

Lipis SVG format error (when replacing double quotes with single quote)

.replace("-inkscape-font-specification:'Linux Biolinum Bold';", '')

Waving flags


Published: 2019-11-10 13:24
You can’t perform that action at this time.