What makes using SVG sprites a superior approach?

What are SVG sprites?

SVG sprites combine multiple SVG images into one file. By loading this file, instead of multiple individual images, can improve performance and speed up page loading time, especially for frequently used icons and graphics. The images are referenced in the sprite by a unique identifier.

The advantages of using an SVG sprite file

SVG sprites are deemed a superior method due to the advantages they provide compared to traditional icon systems, including:

• Improved performance: Loading an SVG sprite file is faster than loading multiple individual SVGs, especially for frequently used icons and tiny graphics.
• Reduced network requests: An SVG sprite file reduces the number of network requests, leading to faster page load times and improved performance.
• Easy to update: Updating an SVG sprite file is as simple as updating a single file, rather than multiple files.
• Consistent styling: By using an SVG sprite, all icons can be consistently styled and resized using CSS, without the need for multiple CSS files for each individual icon.
• Accessibility: SVGs can be made accessible by adding appropriate ARIA attributes, and with an SVG sprite, this only needs to be done once for all icons.

Differences between regular SVGs and SVG sprites

In general, SVG sprites are a more efficient and organized way of using SVGs in web development, providing improved performance and easier maintenance.

• Size: A regular SVG is a standalone file, whereas an SVG sprite is a single file that contains multiple SVGs.
• Loading: A regular SVG is loaded as a separate file, whereas an SVG sprite is loaded as a single file, reducing the number of network requests.
• Organization: Regular SVGs are individual files, whereas SVGs in a sprite are grouped together, making it easier to manage and maintain your graphics.
• Updating: Updating a regular SVG requires updating the file, whereas updating an SVG in a sprite requires updating the sprite file.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</svg>

To use the home icon in the sprite, we reference it by using the use element and pointing to the #icon symbol ID.

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24" width="24" height="24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
</svg>

<!-- To use the home icon in the sprite, you would reference it using the following code: -->
<svg><use xlink:href="#icon-home"></use></svg>

The symbol element is used to define reusable graphics within an SVG sprite. The id attribute is used to give the symbol a unique identifier, which can then be referenced in other parts of the page using the use element.

Easy to style on the spot using the “currentcolor” as fill value to make the icon inherit the colour of its parent element.

<button>
 <svg width="24" height="24"  fill="currentcolor">
  <use xlink:href="#icon-home"></use>
</svg>
Home 
</button>

Steps to create / Convert an SVG sprite:

1. Combine multiple SVGs into a single file: Copy the code for each individual SVG and paste it within a single element.
2. Wrap each individual SVG in a symbol element: Give each a unique id attribute that can be used to reference it. Also, provide a viewBox attribute that defines the dimensions of the icon.
3. Hide the combined SVG: Add a style attribute to the parent element with the value of display: none; This will hide the sprite and prevent it from being displayed directly on the page.

You can use a sprite generator tool to automate the process such as https://icomoon.io/app/#/select

Overall, SVG sprites are superior and lead to improved accessibility by reducing page load times, providing descriptive text, allowing for colour customization, enabling scalable graphics, and supporting keyboard navigation.

Read more: https://svgwg.org/svg2-draft/struct.html