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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
README.md
documentation.html
element.flagmeister-list.js
elements.flagmeister.js
elements.flagmeister.min.js
index.html

README.md

CircleCI

https://flagmeister.github.io

https://flagmeister.github.io/documentation.html

  <html>
    <head>
        <script src='elements.flagmeister.min.js'></script>
    </head>
    <body>
      <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>
    </body>
  </html>

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="http://www.w3.org/2000/svg" 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


https://flagmeister.github.io

https://flagmeister.github.io/documentation.html

Resources Used

Flags

Countries

SVG

SVG Filters, Masks, Clip

CSS clip path

Color

Language selectors

Ali Baba - 67 KB

https://s.alicdn.com/@g/sc/header-footer/0.0.14/sc-header-footer/$node_modules/@alife/alpha-icon/src/img/sprites/69221370.png

Apple individual images 176 KB

https://www.apple.com/choose-country-region/

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)

https://github.com/lipis/flag-icon-css/search?q=Linux

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

Waving flags

TODO

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