Summary

To reuse SVG elements and reduce the size of HTML pages:

1. Use a single SVG file (e.g., sprites.svg) and identify each symbol with an id.
2. To use the SVG, use the use tag pointing to the specific ID.
3. Do this especially for SVGs that are not visible on the screen.

SVG

SVG (Scalable Vector Graphics) is a graphic format 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 various metrics, such as page loading time (speed index), time to display the first visible content (FCP), and time to display the last visible content (LCP).

The SVG Sprites Technique

SVG sprites consist of having a cacheable and accessible SVG file (e.g., in your static folder), and within it, have the symbols of each SVG using the <symbol> tag and adding the id property to each element you want to use.

Here's 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>

SVG Sprites to improve your website's performance

To use an SVG that is inside a file, you can reference it using the file's address and the ID of the symbol defined in the file using the <use> tag.

Here's an example:

Let's say the name of the SVG file is icons.svg and it is available at the path example.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 use the XMark inside your html:

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

This way, the size of your page document will not be increased by the size of the XMark SVG, as it is not part of your document since it is in another file. In the case of using SVGs within islands, the amount of JavaScript generated in the bundle will be smaller.

When to use the technique?

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

Considering that there will be one or several SVG files, with the aim of improving the performance of your site and maintaining excellent usability, it is suggested to use this approach in the following cases:

• SVG is not visible on the user's initial screen (not "above the fold")
• SVG is displayed through user interaction on the page, for example: hover, within dialogs, when clicking on buttons
• In the case of applications that use JSX or similar, which is the case with Fresh, as the amount of JavaScript generated by SVG is considerably large.

Extra:

It is possible to define a symbol within the same document 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 that are displayed above the fold (i.e., visible on the user's screen before their interaction).

<svg>
  <use href="#XMark" />
</svg>