<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>
There is no single truth on SVG flags. All flag sites out in the wild have errors. The most popular one flag-icons has many incorrect colors. Some are missing details in flags.
-
I first built a tool to analyse all SVG flags out there: index.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
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-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>
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
-
Flags of the World - https://flags.dsgn.it/ - https://github.com/cedmax/flags
-
flag-icons - alas almost all colors are wrong - https://flagicons.lipis.dev/
-
FlagKit - https://github.com/madebybowtie/FlagKit
-
React Flags - Used:143 - 1.3 MB GZipped bundle - https://github.com/smucode/react-world-flags
-
React SVG flags - Used:131 - https://github.com/wiredmax/react-flags/tree/master/vendor/flags/flags-iso/flat/svg
-
Pure CSS flags - https://codepen.io/hagenburger/pen/wnkDo
-
Emoji flags
-
WHy not to use flags for languages - http://jkorpela.fi/flags.html
- World Countries in JSON format - https://stefangabos.github.io/world_countries/
- Edit SVG paths - https://aydos.com/svgedit/
- https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
- https://jakearchibald.github.io/svgomg/
- Scaling SVG https://css-tricks.com/scale-svg/
- Edit SVG paths - https://css-tricks.com/tools-visualize-edit-svg-paths-kinda/
-
SVG shapes - http://www.kelvinlawrence.net/svg/index.html
-
Square lighting : https://jsfiddle.net/p015w43j/
-
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Filter_effects
-
https://vanseodesign.com/web-design/svg-clipping-path-examples-1/
-
!! https://css-tricks.com/animate-blob-text-with-svg-text-clipping/
-
https://css-playground.com/view/65/clipping-paths-with-clip-path
-
preserveAspectRatio: https://jsfiddle.net/api/mdn/ - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
-
feDiffuseLightning: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDiffuseLighting
- https://www.schemecolor.com/?s=flag+colors
- https://www.schemecolor.com/color/country-flag
- Extrac colors from image - https://labs.tineye.com/color/
https://www.apple.com/choose-country-region/
sed -i -ne '/<!-- BEGIN -->/ {p; r FILE1.EXT' -e ':a; n; /<!-- END -->/ {p; b}; ba}; p' OUTPUT.EXT
https://github.com/lipis/flag-icons/search?q=Linux
.replace("-inkscape-font-specification:'Linux Biolinum Bold';", '')