Learn how to use the SVG sprites technique to optimize your website’s performance
To reuse SVG elements and reduce the size of HTML pages:
- Use a single SVG file (e.g.,
sprites.svg
) and identify each symbol with anid
.- To use the SVG, use the
use
tag pointing to the specific ID.- Do this especially for SVGs that are not visible on the screen.
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
<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
.
⚠️ 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: