Learn how to use the SVG sprites technique to optimize the performance of your website

TL;DR: Use a single SVG file and identify each symbol with an id. Where if you want to use SVG, use the use tag pointing to the specific ID

Video version

To watch the content of this article, click here

SVG

SVG (Scalable Vector Graphics) is a format graphic commonly used in applications to represent icons, logos or elements that need to be scaled without losing quality. However, its use can negatively impact the performance of a web page in several ways. metrics such as: page load time (speed index), time to display first visible content (FCP), time to display last visible content (LCP).

This post will describe how to use the SVG sprites technique to decrease the performance impact on a page caused by SVGs.

What is the SVG Sprites technique?

SVG sprites consists of having an svg file that is accessible over the internet and it has the symbols of each svg using the tag <symbol> and adding the id property to each of the elements you want to use - you can use other tags like: <defs> , <g> among others.

Here is an example of an svg file with a symbol and id XMark

<svg style="display:none">
   <symbol id="XMark" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></symbol>
</svg>

How to use SVG Sprites to improve your site's performance?

To use an svg that is inside a file, it is possible to reference it through the file address and the id of the symbol that was defined in the file via the <use> tag.

Here's an example:

Let's say the svg file name is icons.svg and it is available in path mydomain.com/icons.svg

<!-- icons.svg -->
<svg style="display:none">
  <symbol id="XMark" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></symbol>
</svg>

You can reference the XMark symbol within your html like this:

<svg>
   <use href="//mydomain.com/icons.svg#XMark" />
</svg>

This way, the document size of your page will not be incremented with the size of the SVG XMark, given that it is not part of your document, as it it's in another file. In the case of using SVG within islands, the amount of JavaScript generated in the bundle will be smaller.

When to use the technique?

⚠️ It is not always valid to use the technique, but it is worth testing.

Considering that there will be one or several svgs files, in order to improve your site's performance and maintain optimal usability, it is suggested that you use this approach in the following cases:

SVG is displayed below the "Fold";
SVG is displayed through user interaction on the page, for example: hover, inside dialogs, when clicking on buttons;
In the case of applications that use jsx or similar, which is the case of Fresh, because the amount of Javascript generated by svg is considerably large.

Extra:

It is possible to define a symbol within the document itself and reference it later in the same document. This approach is valid for cases where a single svg is repeated multiple times on the page and can be used for svgs which are displayed above the "Fold".

Which performance metrics can be improved with this technique?

Speed Index - https://developer.chrome.com/docs/lighthouse/performance/speed-index/;
First Contentful Paint (FCP) - https://web.dev/fcp/;
Largest Contentful Paint (LCP) - https://web.dev/lcp ;