Core Web Vitals: inline svg

layouts/partials/article-headline.html

@@ -3,7 +3,7 @@
 <h4><a href="{{ .current.RelPermalink }}">{{ .current.Title }}
 {{- partial "lang-detection.html" .current -}}
 {{ if .current.Scratch.Get "en_article_in_fr_site" }}
-    <img src="/icons/en.svg" class="tiny-flag" alt="en flag" width="28" height="14">
+{{- partial "icons/en.svg" . -}}
 {{ end }}
 </a></h4>
 {{- partial "post-metadata.html" . -}}

layouts/partials/head.html

@@ -23,8 +23,6 @@
 <link rel="preload" href="/fonts/SourceSansPro-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
 <link rel="preload" href="/fonts/material-icons.woff2" as="font" type="font/woff2" crossorigin="anonymous">
 <link rel="preload" href="/fonts/material-icons.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-<link rel="preload" href="/icons/en.svg" as="image" type="image/svg+xml">
-<link rel="preload" href="/icons/fr.svg" as="image" type="image/svg+xml">
 
 <!--
   -- Ensure the <meta name=description> tag is never empty since it is used

static/icons/en.svg → layouts/partials/icons/en.svg

@@ -1,5 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30" width="1200" height="600">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30" width="28" height="14" class="tiny-flag">
+<title>British flag</title>
 <clipPath id="s">
 	<path d="M0,0 v30 h60 v-30 z"/>
 </clipPath>

layouts/partials/icons/fr.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" class="tiny-flag">
+<title>French flag</title>
+<rect width="21" height="14" fill="#ED2939"/>
+<rect width="14" height="14" fill="#fff"/>
+<rect width="7" height="14" fill="#002395"/>
+</svg>

layouts/partials/menu.html

@@ -45,12 +45,12 @@
             {{- if .IsTranslated -}}
             <!-- Try to redirect the user to the translated page if possible -->
             {{- range .AllTranslations }}
-            <a href="{{ .RelPermalink }}"><img src="/icons/{{ .Lang }}.svg" class="tiny-flag" width="28" height="14" alt="{{ .Lang }} flag"></a>
+            <a href="{{ .RelPermalink }}">{{- partial (printf "icons/%s.svg" .Lang) . -}}</a>
             {{- end -}}
             {{- else -}}
             <!-- Otherwise, redirect it to the homepage -->
             {{- range site.Sites }}
-            <a href="{{ .Home.RelPermalink }}"><img src="/icons/{{ .Language.Lang }}.svg" class="tiny-flag" width="28" height="14" alt="{{ .Language.Lang }} flag"></a>
+            <a href="{{ .Home.RelPermalink }}">{{- partial (printf "icons/%s.svg" .Language.Lang) . -}}</a>
             {{- end -}}
             {{- end }}
         </div>

static/icons/fr.svg

@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"><rect width="900" height="600" fill="#ED2939"/><rect width="600" height="600" fill="#fff"/><rect width="300" height="600" fill="#002395"/></svg>