Optimised SVG Flags

Size
6,585 Kb
Views
493,856

How do I make an optimised svg flags?

Example sizes pl 0.1kb, gb 0.3kb, us 2.2kb. Some are simplified. github.com/larsenwork/web.svg.min. What is a optimised svg flags? How do you make a optimised svg flags? This script and codes were developed by Andreas Larsen on 11 June 2022, Saturday.

Optimised SVG Flags Previews

Optimised SVG Flags - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Optimised SVG Flags</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Kanit:300,500'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Source: github.com/larsenwork/web.svg.min -->
<div>	<!-- US -->	<svg viewBox="0 0 806 806" fill="#fff"><path fill="#C1133D" d="M0 0h806v806H0z"/><path d="M806 682v62H0v-62h806zM0 558h806v62H0v-62zm0-124h806v62H0v-62zm0-124h806v62H0v-62zm0-124h806v62H0v-62zM0 62h806v62H0V62z"/><path fill="#002663" d="M0 0h403v434H0z"/><path d="M54 383l-6-17-5 17H25l14 11-5 17 14-11 15 11-6-17 15-11H54zm102 0l-6-17-5 17h-18l14 11-5 17 14-11 15 11-6-17 15-11h-18zm102 0l-5-17-6 17h-18l15 11-6 17 15-11 14 11-5-17 14-11h-18zm102 0l-5-17-6 17h-18l15 11-6 17 15-11 14 11-5-17 14-11h-18zM99 322l-5 18H76l14 10-5 17 14-10 15 10-6-17 15-10h-18l-6-18zm102 0l-5 18h-18l14 10-5 17 14-10 15 10-5-17 14-10h-18l-6-18zm108 18l-5-18-6 18h-18l15 10-6 17 15-10 14 10-5-17 14-10h-18zM54 296l-6-17-5 17H25l14 11-5 17 14-10 15 10-6-17 15-11H54zm306 0l-5-17-6 17h-18l15 11-6 17 15-10 14 10-5-17 14-11h-18zm-102 0l-5-17-6 17h-18l14 11-5 17 15-10 14 10-5-17 14-11h-18zm-102 0l-6-17-5 17h-18l14 11-5 17 14-10 15 10-5-17 14-11h-18zm153-43l-5-17-6 17h-18l15 11-6 17 15-11 14 11-5-17 14-11h-18zm-102 0l-6-17-5 17h-18l14 11-5 17 14-11 15 11-5-17 14-11h-18zm-102 0l-6-17-5 17H76l14 11-5 17 14-11 15 11-6-17 15-11h-18zm-51-43l-6-17-5 17H25l14 10-5 18 14-11 15 11-6-18 15-10H54zm102 0l-6-17-5 17h-18l14 10-5 18 14-11 15 11-6-18 15-10h-18zm102 0l-5-17-6 17h-18l15 10-6 18 15-11 14 11-5-18 14-10h-18zm102 0l-5-17-6 17h-18l15 10-6 18 15-11 14 11-5-18 14-10h-18zM99 149l-5 17H76l14 11-5 17 14-10 15 10-6-17 15-11h-18l-6-17zm210 17l-5-17-6 17h-18l15 11-6 17 15-10 14 10-5-17 14-11h-18zm-108-17l-5 17h-18l14 11-5 17 14-10 15 10-5-17 14-11h-18l-6-17zM54 123l-6-17-5 17H25l14 11-5 17 14-11 15 11-6-17 15-11H54zm102 0l-6-17-5 17h-18l14 11-5 17 14-11 15 11-6-17 15-11h-18zm97-17l-6 17h-18l15 11-6 17 15-11 14 11-5-17 14-11h-18l-5-17zm107 17l-5-17-6 17h-18l15 11-6 17 15-11 14 11-5-17 14-11h-18zM105 80l-6-17-5 17H76l14 10-5 18 14-11 15 11-6-18 15-10h-18zm102 0l-6-17-5 17h-18l14 10-5 18 14-11 15 11-5-18 14-10h-18zm102 0l-5-17-6 17h-18l15 10-6 18 15-11 14 11-5-18 14-10h-18zM54 37l-6-18-5 18H25l14 10-5 17 14-10 15 10-6-17 15-10H54zm102 0l-6-18-5 18h-18l14 10-5 17 14-10 15 10-6-17 15-10h-18zm102 0l-5-18-6 18h-18l15 10-6 17 15-10 14 10-5-17 14-10h-18zm102 0l-5-18-6 18h-18l15 10-6 17 15-10 14 10-5-17 14-10h-18z"/></svg>	<!-- TR -->	<svg viewBox="0 0 800 800" fill="#fff"><path fill="#e30a17" d="M0 0h800v800H0z"/><circle cx="275" cy="400" r="200"/><circle cx="325" cy="400" r="160" fill="#e30a17"/><path d="M433 400l181 59-112-154v190l112-154-181 59z"/></svg>	<!-- SE -->	<svg viewBox="0 0 800 800"><path fill="#07c" d="M0 480h209v320H0V480zm369 0h431v320H369V480zm431-160H369V0h431v320zM0 320V0h209v320H0z"/><path fill="#fecc00" d="M209 0h160v320h431v160H369v320H209V480H0V320h209V0z"/></svg>	<!-- RU -->	<svg viewBox="0 0 3 3"><path fill="#fff" d="M0 0h3v1H0z"/><path fill="#01017e" d="M0 1h3v1H0z"/><path fill="#fe0101" d="M0 2h3v1H0z"/></svg>	<!-- PT -->	<svg viewBox="0 0 800 800"><path fill="red" d="M300 0h500v800H300z"/><path fill="#060" d="M0 0h300v800H0z"/><path fill="#ff0" d="M300 203c107 0 197 87 198 196 0 114-90 200-198 200-109 0-198-88-198-197 0-110 90-199 198-199zM175 526c27 27 67 49 115 52v-37c-49-3-85-8-115-15zm136 15v37c45-4 86-23 114-51-35 9-69 12-114 14zm77-38c-4 4-8 8-12 11 9-1 18-3 27-4-5-2-10-4-15-7zm-164 11c-9-8-17-18-24-28-17 3-31 7-46 13l1 2c23 5 45 10 69 13zm-82-34c14-6 32-11 48-14-4-9-7-19-8-29-24-4-43-9-57-13 3 21 9 39 17 56zm334-55c-14 4-35 9-56 12 17 13 32 24 42 34 6-14 12-30 14-46zm-57-40v30c18-3 41-8 58-13v-2c-18-7-38-12-58-15zm-237 0c-20 3-41 8-59 15v2c20 6 47 11 59 13v-30zm237-22c21 4 42 10 56 15-3-21-8-39-16-55-10 3-24 6-40 9v31zm-287-17c-3 10-5 20-7 31 10-3 22-7 35-10-11-8-21-15-28-21zm287-50v15c12-2 21-5 29-7 0-1-1-1-1-2-8-2-18-4-28-6zm-238-1c-2 0-5 1-7 2 2 1 7 2 7 2v-4zm0-25l-6 6 6-1v-5zm238 0v5l6 1-6-6zm-108-5h102c-25-21-60-38-102-41v41zm-21 0v-41c-42 3-76 20-102 41h102z"/><path fill="red" d="M186 423c0 62 52 114 114 114 63 0 114-51 114-114V270H186v153zm114 69c-37 0-68-32-68-68V316h136v108c0 38-31 68-68 68zm92-11l-23 22-22-22 22-23 23 23zm-183 0l22-23 23 23-23 22-22-22zm166-110h32v32h-32v-32zm-149 32h-32v-32h32v32zm149-126h32v32h-32v-32zm-91 0h32v32h-32v-32zm-59 32h-32v-32h32v32z"/><path fill="#0047cc" d="M300 474c-8 0-15-8-15-17v-21h30v21c0 9-6 17-15 17zm0-52c-8 0-15-7-15-16v-22h30v22c0 9-6 16-15 16zm42 0c-8 0-15-7-15-16v-22h30v22c0 9-6 16-15 16zm-84 0c-8 0-15-7-15-16v-22h30v22c0 9-6 16-15 16zm42-52c-8 0-15-7-15-16v-21h30v21c0 9-6 16-15 16z"/></svg>	<!-- PL -->	<svg viewBox="0 0 2 2"><path fill="#fff" d="M0 0h2v2H0z"/><path fill="#dc143c" d="M0 1h2v1H0z"/></svg>	<!-- PK -->	<svg viewBox="0 0 360 360" fill="#fff"><path d="M0 0h90v360H0z"/><path fill="#01411c" d="M90 0h270v360H90z"/><circle cx="224" cy="180" r="96"/><circle fill="#01411c" cx="248" cy="160" r="88"/><path d="M259 108l6 61 31-53-56 25 59 13-40-46z"/></svg>	<!-- PH -->	<svg viewBox="0 0 800 800"><path d="M444 400L0 144v512z" fill="#fff"/><path d="M0 320c44 0 80 36 80 80s-36 80-80 80V320zm0 249V400l10 158-10 11zm20-18L0 400l28 143-8 8zm73-30H81L0 400l93 121zm26-2h-14L0 400l119 105v14zm2-26L0 400l121 81v12zm162-119l31 9 19-25 1 32 30 10-30 10-1 32-19-25-31 9 19-26-19-26zm-132 46l-9 8L0 400l151 20zm18-20l-11 10L0 400l158-10 11 10zM0 400V231l10 11L0 400zm20-151l8 8L0 400l20-151zm99 32v14L0 400l105-119h14zm-26-2L0 400l81-121h12zm28 28v12L0 400l121-93zm30 73L0 400l142-28z" fill="#fcd116"/><path d="M800 400v400H0V656l444-256z" fill="#ce1126"/><path d="M800 400H444L0 144V0h800z" fill="#0038a8"/></svg>	<!-- NL -->	<svg viewBox="0 0 3 3"><path fill="#fff" d="M0 0h3v3H0z"/><path fill="#21468b" d="M0 2h3v1H0z"/><path fill="#ae1c28" d="M0 0h3v1H0z"/></svg>	<!-- NG -->	<svg viewBox="0 0 3 3"><path fill="#008751" d="M3 3H2V0h1v3zM0 3V0h1v3H0z"/><path fill="#fff" d="M1 0h1v3H1z"/></svg>	<!-- KR -->	<svg viewBox="0 0 800 800"><path fill="#fff" d="M0 0h800v800H0z"/><circle fill="#c60c30" cx="400" cy="400" r="200"/><path fill="#003478" d="M234 289c-30 46-19 109 27 139s109 18 139-28 93-58 139-28 57 93 27 139c-61 91-186 116-277 55s-116-186-55-277z"/><path d="M756 153l-28 18-51-76 28-19 51 77zm-83 55l-28 19-51-77 28-18 51 76zM123 95L12 261l-12-8v-34L95 76l28 19zm41 28L53 289l-27-18 111-167 27 19zm610 148l-27 18-111-166 27-19 111 167zm-92-49l51 76-28 19-51-76 28-19zm-476-72L95 317l-28-19 111-166 28 18zm448 409l51-76 28 19-51 76-28-19zm-550 28l-28 19-50-77 27-18 51 76zm592 0l51-76 27 18-50 77-28-19zm41 28l51-76 12 8v34l-35 52-28-18zm-92-42l28 19-51 76-28-18 51-77zm-439 77l-28 18L67 502l28-19 111 167zm-93-49l51 76-27 19-51-76 27-19zm574 0l27 19-51 76-27-19 51-76zM123 705l-28 19L0 581v-34l12-8 111 166zm605-76l28 18-51 77-28-19 51-76zm72-410v34l-12 8-51-76 28-18 35 52z"/></svg>	<!-- JP -->	<svg viewBox="0 0 26 26"><path fill="#fff" d="M0 0h26v26H0z"/><circle fill="#d30000" cx="13" cy="13" r="8"/></svg>	<!-- IT -->	<svg viewBox="0 0 3 3"><path fill="#fff" d="M0 0h3v3H0z"/><path fill="#005700" d="M0 0h1v3H0z"/><path fill="#fc0000" d="M2 0h1v3H2z"/></svg>	<!-- IN -->	<svg viewBox="0 0 900 900" fill="#008"><path fill="#fff" d="M0 300h900v300H0z"/><path fill="#138808" d="M0 600h900v300H0z"/><path fill="#f93" d="M0 0h900v300H0z"/><circle cx="450" cy="450" r="120"/><circle fill="#fff" cx="450" cy="450" r="104"/><circle cx="450" cy="450" r="21"/><path d="M450 555l-4-63 4-30 4 30-4 63zm-27-4l13-61 11-28-4 30-20 59zm-25-10l28-56 18-25-12 28-34 53zm-22-17l42-47 24-19-19 24-47 42zm-17-22l53-34 28-12-25 18-56 28zm-10-25l59-20 30-4-28 11-61 13zm-4-27l63-4 30 4-30 4-63-4zm4-27l61 13 28 11-30-4-59-20zm10-25l56 28 25 18-28-12-53-34zm17-22l47 42 19 24-24-19-42-47zm22-17l34 53 12 28-18-25-28-56zm25-10l20 59 4 30-11-28-13-61zm27-4l4 63-4 30-4-30 4-63zm27 4l-13 61-11 28 4-30 20-59zm25 10l-28 56-18 25 12-28 34-53zm22 17l-42 47-24 19 19-24 47-42zm17 22l-53 34-28 12 25-18 56-28zm10 25l-59 20-30 4 28-11 61-13zm4 27l-63 4-30-4 30-4 63 4zm-4 27l-61-13-28-11 30 4 59 20zm-10 25l-56-28-25-18 28 12 53 34zm-17 22l-47-42-19-24 24 19 42 47zm-22 17l-34-53-12-28 18 25 28 56zm-25 10l-20-59-4-30 11 28 13 61z"/></svg>	<!-- GB -->	<svg viewBox="0 0 200 200"><path fill="#006" d="M0 0h200v200H0z"/><path fill="#fff" d="M0 28v144l67-33v61h66v-61l67 33V28l-67 33V0H67v61z"/><path fill="#c00" d="M200 120h-80v80H80v-80H0V80h80V0h40v80h80v40zM0 165v-15l33-17h30L0 165zm200-26v15l-41-21h30l11 6zM41 67H11L0 61V46l41 21zm126 0h-30l63-32v15z"/></svg>	<!-- FR -->	<svg viewBox="0 0 3 3"><path fill="#fff" d="M0 0h3v3H0z"/><path fill="#00267f" d="M0 0h1v3H0z"/><path fill="#f31830" d="M2 0h1v3H2z"/></svg>	<!-- ES -->	<svg viewBox="0 0 4 4"><path fill="#c60b1e" d="M0 3h4v1H0V3zm0-3h4v1H0V0z"/><path fill="#ffc400" d="M0 1h4v2H0z"/></svg>	<!-- DE -->	<svg viewBox="0 0 3 3"><path fill="#ffe600" d="M0 2h3v1H0z"/><path d="M0 0h3v1H0z"/><path fill="red" d="M0 1h3v1H0z"/></svg>	<!-- DA -->	<svg viewBox="0 0 800 800"><path fill="#fb1b22" d="M0 457h243v343H0V457zm800 343H357V457h443v343zm0-457H357V0h443v343zM243 0v343H0V0h243z"/><path fill="#fff" d="M357 343V0H243v343H0v114h243v343h114V457h443V343H357z"/></svg>	<!-- CZ -->	<svg viewBox="0 0 512 512"><path fill="#fff" d="M512 256H308L0 49V0h512v256z"/><path fill="#e80000" d="M512 256v256H0v-51l308-205h204z"/><path fill="#00006f" d="M308 256L0 461V49l308 207z"/></svg>	<!-- CN -->	<svg viewBox="0 0 800 800"><path fill="#de2910" d="M0 0h800v800H0z"/><path fill="#ffde00" d="M314 163L130 297l70-217 71 217L86 163h228zm56-109l70 29-74 18 50-58-7 76-39-65zm92 70l53 55-75-13 69-34-36 67-11-75zm17 116l26 72-63-43 76-3-60 47 21-73zm-65 83l-3 76-42-64 71 27-73 20 47-59z"/></svg>	<!-- BR -->	<svg viewBox="0 0 800 800" fill="#009b3a"><path d="M0 0h800v800H0z"/><path d="M33 400l367 234 367-234-367-234L33 400z" fill="#fedf00"/><circle fill="#002776" cx="400" cy="400" r="155"/><path fill="#fff" d="M405 522v-3l2-1-3-1v-2l-2 2-2 1 1 1v3l2-2 2 2zm78-3v-3l2-2-3-1-1-3-2 3h-3l2 3-1 3 3-1 3 1zm-31-1v-6l4-4-6-1-2-5-3 5-5 1 4 4-1 5 5-2 4 3zm31-13l-1-3 3-2-3-1-2-3-2 3h-3l2 3v3l3-1 3 1zm-133-13l-1-6 4-4-6-1-2-5-2 5-6 1 4 4-1 5 5-2 5 3zm133-4v-3l2-2h-3l-1-3-2 3h-3l3 2-1 3 3-1 2 1zm12 0v-3l2-2h-3l-1-3-1 3h-3l2 2-1 3 3-1 2 1zm-57 0v-3l2-2h-3l-1-3-1 3h-3l2 2-1 3 3-1 2 1zm22 0v-3l2-2h-3l-1-3-1 3h-3l2 2-1 3 3-1 2 1zm49-3l-1-4 3-2-4-1-1-3-2 3-3 1 2 2-1 4 4-2 3 2zm-101-9l-1-5 4-3-5-1-2-4-2 4-5 1 4 3-1 5 4-2 4 2zm-91-2l-1-4 3-2-4-1-1-3-2 3h-4l3 3-1 4 4-2 3 2zm196-2l-1-3 3-2h-3l-2-3-1 3h-3l2 2-1 3 3-2 3 2zm-1-11l-1-5 4-3-5-1-2-5-2 5-5 1 4 3-1 5 4-3 4 3zm18-3v-3l2-2h-3l-1-3-1 3h-3l2 2-1 3 3-1 2 1zm-259-8l-1-3-2 3-4 1 3 2-1 4 3-2 4 2-1-3 3-3-4-1zm52 7l-1-3 3-3-3-1-2-3-2 3-3 1 2 2-1 4 4-2 3 2zm78-1v-3l2-2h-3l-1-3-1 3h-3l2 2-1 3 3-2 2 2zm44-98l4-1 4 2-1-5 4-3-5-1-2-4-2 4-5 1 3 3-1 4c-53-21-115-31-186-21-3 8-6 16-8 24 120-21 226 22 298 86 3-8 4-16 5-24-32-27-68-50-108-65zm-150 88l-1-6 4-3-5-1-3-6-2 5-6 1 4 4-1 5 5-2 5 3zm126-3v-3l2-3h-3l-2-4-1 4h-4l3 3-1 3 3-1 3 1zm-30 0l-1-3 3-3h-4l-1-4-2 4h-4l3 3-1 3 3-1 4 1zm-84-10v-3l2-1-3-1v-2l-2 2-2 1 2 1-1 3 2-1 2 1zm99-3l-1-5 4-4-5-1-2-5-3 5h-5l4 4-1 6 4-3 5 3zm-56-15l-1-5 4-4-6-1-2-5-2 5h-6l4 4-1 6 5-3 5 3zm94-15v-3l2-3-3-1-2-3-2 3-4 1 3 2-1 4 4-1 3 1zm-164-17l-1-6 4-4-5-1-3-5-2 5-6 1 4 4-1 5 5-2 5 3z"/><path d="M534 420c6-8 16 0 10 8-5 7-17 1-10-8zm2 2c-4 7 4 8 6 4 4-7-4-8-6-4zm-17-9c-1 1 0 3 2 4s2 1 3 0c2-2-7-7-4-11 2-3 5-1 7 0 4 2 5 5 3 8l-2-2c1-1-1-3-2-4s-2-1-3 0c-1 2 7 7 4 11-2 3-4 2-7 0-4-2-5-5-3-8l2 2zm-16-11c-1 1 0 3 2 4s3 1 4 0c1-2-8-6-5-10 2-4 6-1 8 0s4 4 2 7l-2-2c1-1-1-3-2-4s-2-1-3 0c-2 2 8 6 5 11-2 3-6 2-8 0-2-1-5-4-3-7l2 1zm-21-7l7-13 11 7-1 2-9-5-1 3 7 4-1 2-8-4-2 3 10 5-2 3-11-7zm-7-9l-5-3-2 5-3-1 7-13 8 3c4 2 2 8-2 9 0 2-1 5-2 6l-2-1c1-1 1-3 1-5zm-15-5c-2 2-5 1-7 0s-4-5-2-9c3-6 10-5 12-1l-2 2c-2-4-5-3-7 0-1 2-1 5 1 6 1 1 4 0 5-1l-3-1 1-2 5 3-3 7-2-1s1-2 2-3zm11 0l5 2c3 1 4-2 2-3l-5-3-2 4zm-38-15c3-10 15-5 13 3-3 10-16 6-13-3zm3 0c-2 7 4 8 7 3s-6-8-7-3zm-21 1h-2l4-14 8 2c6 1 3 8 0 9 1 2 1 4 0 6h-3c1-1 1-4 0-6l-5-2-2 5zm-18-5h-2l4-14 8 2c4 1 5 10-4 8l-4-1-2 5zm21-2l5 1c3 0 3-3 0-4l-4-1-1 4zm-51-4l2-13 10 2v2l-8-1-1 3 7 1v2l-7-1v3l8 2v2l-11-2zm32-2l4 1c5 1 5-2 2-3l-5-1-1 3zm-138-4c-4-10 9-15 12-5 3 11-9 13-12 5zm78 3h-3l1-15h4l2 11 4-10h4l-2 15h-2l1-10-4 9h-3l-2-10v10zm-51-6l-6 1 1 5h-3l-1-14 8-1c6-1 7 8 3 8 2 1 2 5 2 7h-2c0-1-1-5-2-6zm-25 1c1 6 9 5 8-1-1-5-9-6-8 1zm68 4h-14l1-15 12 1v2h-10v3h8v3h-8v3l11 1v2zm-26 0h-6l-1-15h7c3 0 7 3 7 7v2c0 4-4 6-7 6zm0-12h-4v9h4c2 0 4-2 4-4v-1c0-2-2-4-4-4zm-18 1h-5v4h4c3 0 5-4 1-4z"/></svg>	<!-- BD -->
<svg viewBox="0 0 40 40"><path fill="#006a4e" d="M0 0h40v40H0z"/><circle fill="#f42a41" cx="18" cy="20" r="13"/></svg>
</div> <script src="js/index.js"></script>
</body>
</html>

Optimised SVG Flags - Script Codes CSS Codes

@-webkit-keyframes borderradius { 0% { border-radius: 0%; } 25% { border-radius: 25%; } 50% { border-radius: 50%; }
}
@keyframes borderradius { 0% { border-radius: 0%; } 25% { border-radius: 25%; } 50% { border-radius: 50%; }
}
html { height: 100%; background: #d8d9da; color: #96999c; font-size: 0;
}
body { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
div { max-width: 720px;
}
svg { width: 80px; height: 80px; max-width: 10vw; max-height: 10vw; margin: 20px; -webkit-animation: borderradius 6s infinite; animation: borderradius 6s infinite;
}

Optimised SVG Flags - Script Codes JS Codes

// Source: github.com/larsenwork/web.svg.min
Optimised SVG Flags - Script Codes
Optimised SVG Flags - Script Codes
Home Page Home
Developer Andreas Larsen
Username larsenwork
Uploaded June 11, 2022
Rating 4
Size 6,585 Kb
Views 493,856
Do you need developer help for Optimised SVG Flags?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andreas Larsen (larsenwork) Script Codes
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!