SEO With Hugo (10) Svg Optimisation

There are several ways to optimize the management of SVG fonts in a website without loading full libraries:

• Use inline SVG: Instead of linking to an external SVG file, you can embed the SVG code directly into the HTML document. This eliminates the need for an additional HTTP request.
• Use font-display: The CSS font-display property allows you to specify how your web fonts should load and display. By setting font-display: swap;, you can ensure that the fallback font is displayed while the SVG font is being loaded.
• Use font-subsetting: Instead of loading the entire SVG font file, you can use a tool to subset the font and only include the characters that are needed on the website. This reduces the file size and improves load times.
• Use a Content Delivery Network (CDN): A CDN can help to deliver your SVG fonts faster to users by caching the files on servers closer to the user’s location.
• Use a Web font loader: This is a JavaScript library that helps you to load fonts asynchronously, so that your pages can load faster.

Here I’m following the approach of selectively downloading the Bootstrap Icons I need and placing them under /assets/icons. This is how an icon looks like, it’s basically a collection of paths:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-code" viewBox="0 0 16 16">
  <path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
</svg>

If you are after a different icon or, better, if you are generating an icon with Illustrator, things might get messier (lots of paths). It seems that Illustrator outputs SVG files with a standard class cls-1.

If you are using postcss, you’ll need to ensure that these classes are included in the safelist, otherwise icons won’t be displayed with the correct size.

In the homepage of this website, there’s a section listing all services provided. Each card includes an SVG icon. The way icons are loaded from /assets/icons/boostrap/ is through:

<div class="fs-1 text-primary me-2 my-2">
{{ with .Params.icon }}
   {{- partial "svg-icon" . -}}
{{ end }}
</div>

The . context refers to the page corresponding to each service. Inside the markdown file of each service page I would have the following:

icon: 'icons/bootstrap/badge.svg'

The following is svg-icon.html partial:

{{- $src := resources.Get . -}}
{{- $src.Content | safeHTML -}}

I noticed that for some reason Netlify doesn’t like filenames with capital letters.

If you want to adjust the size of these icons you could target the .bi class in /assets/scss/main.scss:

.bi {
  width: 1.75em;
  height: 1.75em;
}