SVG Sprites | Free HTML & CSS Tutorial

Gain a detailed understanding of how to create and use SVG sprites in HTML and CSS. This comprehensive tutorial walks you through topics such as defining an SVG sprite, using a sprite, and styling sprites to enhance user experience through faster page loading.

Key Insights

SVG sprites are small graphics combined into a single image to reduce the number of files required to load a webpage, resulting in faster page load times.
Creating SVG sprites involves defining reusable code for each graphic, placing the definitions at the top of the HTML file for reference in lower sections of the file.
Sprites can be used anywhere on a page multiple times, with unique IDs to refer to each symbol when needed.
Styling of sprites is done using CSS, where attributes like width, height, and color can be defined for each sprite.
Using classes in CSS can help in identifying and styling individual instances of a sprite on a page.
Elements can have multiple classes in CSS, providing a way to target elements that contain more than one class for more precise styling.

Dive into this comprehensive tutorial which covers how to create and use SVG sprites in HTML and CSS for better web page performance, including defining the SVG sprite, using a sprite, and styling the sprites.

This exercise is excerpted from Noble Desktop’s past front-end web development training materials and is compatible with updates through 2022. To learn current skills in web development, check out our coding bootcamps in NYC and live online.

Topics covered in this HTML & CSS tutorial:

Defining the SVG sprite, Using a sprite, Styling sprites

Exercise Preview

preview svg sprites

Exercise Overview

In this exercise, you’ll learn how to create and use SVG sprites.

Front End Web Design Certificate: Live & Hands-on, In NYC or Online, 0% Financing, 1-on-1 Mentoring, Free Retake, Job Prep. Named a Top Bootcamp by Forbes, Fortune, & Time Out. Noble Desktop. Learn More.

What is a sprite? Taken from video games, this concept puts many small graphics (called sprites) together into a single graphic. When using pixel-based graphics we’d make one file which contains all the individual graphics (sprites). We would then crop in on each sprite and use it when needed. SVG makes sprites even easier to create and use than pixel-based sprites.

Why don’t we just use separate image files? For users, loading multiple files will take longer than loading one. By reducing the number of files required, users will have a faster loading page. Sprites are better for performance, so that’s why we use them!

Getting Started

For this exercise we’ll be working with the SVG Sprites folder located in Desktop > Class Files > Advanced HTML CSS Class. Open that folder in your code editor if it allows you to (like Visual Studio Code does).
Open sprites.html from the SVG Sprites folder.
Preview sprites.html in a browser.

You should only see a heading SVG Sprites with nothing else on the page. For this exercise we’re going to work in a bare-bones page so it will be easier to focus on the code required for this technique.
Leave the page open in the browser and return to sprites.html in your code editor.

Defining the SVG Sprite

SVG are created with code. We can store the code in a reusable form, which will then allow us to use it anywhere within a page (as many times as we want). We’ll start by creating a list of definitions for each graphic (sprite). We’ll put this at the top of the file, so we can refer to those definitions lower in the file.

Below the body tag, add the following bold code:
```
<body>
   <svg xmlns="http://www.w3.org/2000/svg" display="none">

   </svg>

   <h1>SVG Sprites</h1>
```
This is where we’ll list all the individual graphics. They aren’t meant to appear here, so we’re adding display="none" to make sure people won’t see them here in addition to wherever we’ll use them in the page.
Inside the svg tag, add the following bold code:
```
<svg xmlns="http://www.w3.org/2000/svg" display="none">
   <defs>

   </defs>
</svg>
```
Mozilla’s MDN web docs say “The <defs> element is used to store graphical objects that will be used at a later time. Objects created inside a <defs> element are not rendered directly. To display them you have to reference them (with a <use> element for example).” tinyurl.com/svg-defs
Now we can add the SVG code for our first graphic. Still in your code editor, open icon-twitter.svg from the SVG Sprites folder.
Select all the code and copy it.
Close the file and you should be back in sprites.html.
Place the cursor on the empty line inside the defs tag.

Paste the SVG code so you end up with the following:

<svg xmlns="http://www.w3.org/2000/svg" display="none">
   <defs>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <title>Twitter</title>

Code Omitted To Save Space

      </svg>
   </defs>
</svg>

We can put as many graphics into a sprite as we want, but let’s put one more graphic into our sprite for practice. Still in your code editor, open icon-facebook.svg from the SVG Sprites folder.
Select all the code and copy it.
Close the file and you should be back in sprites.html.

Paste the new SVG code below the svg tag for Twitter, so you end up with:

<svg xmlns="http://www.w3.org/2000/svg" display="none">
   <defs>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <title>Twitter</title>

Code Omitted To Save Space

      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <title>Facebook</title>

Code Omitted To Save Space

      </svg>
   </defs>
</svg>

The containing SVG tag has xmlns="http://www.w3.org/2000/svg" so remove the redundant attributes from the two nested svg tags. You should end up with the code shown below:

<svg xmlns="http://www.w3.org/2000/svg" display="none">
   <defs>
      <svg viewBox="0 0 24 24">
         <title>Twitter</title>

Code Omitted To Save Space

      </svg>
      <svg viewBox="0 0 24 24">
         <title>Facebook</title>

Code Omitted To Save Space

      </svg>
   </defs>
</svg>

Change both svg tags to be a symbol tag, as shown below. Don’t forget to update the open and close tags for both!

<svg xmlns="http://www.w3.org/2000/svg" display="none">
   <defs>
      <symbol viewBox="0 0 24 24">
         <title>Twitter</title>

Code Omitted To Save Space

      </symbol>
      <symbol viewBox="0 0 24 24">
         <title>Facebook</title>

Code Omitted To Save Space

      </symbol>
   </defs>
</svg>

We need a way to refer to each symbol, so give each symbol a unique ID, as shown below in bold:
```
<symbol id="twitter" viewBox="0 0 24 24">
   <title>Twitter</title>
```
Code Omitted To Save Space
```
</symbol>
<symbol id="facebook" viewBox="0 0 24 24">
   <title>Facebook</title>
```
Code Omitted To Save Space
```
</symbol>
```
NOTE: If you get SVG files that already have an ID, you can either use it or change it to whatever you want.
Save the file.
Preview sprites.html in a browser and you should only see the heading SVG Sprites with nothing else on the page. That’s correct at this point!

Using a Sprite

The definition of our sprites is done, so now we can use them wherever we want in the page, and as many times as we want!

Return to sprites.html in your code editor.
Below the sprite definitions you’ll see the only content currently in this page. Below that h1 tag add the following code to reference the twitter icon.
```
   <h1>SVG Sprites</h1>
   <svg class="social-icon">
      <use xlink:href="#twitter">
   </svg>
</body>
```
NOTE: The class="social-icon" is not required for the sprite to work, but we’re adding it now so we’ll be able to style it in a moment.
Save the file.
Preview sprites.html in a browser and you should see the Twitter logo below the SVG Sprites heading!
Return to sprites.html in your code editor.

Add the Facebook icon by writing the code shown below in bold:

   <h1>SVG Sprites</h1>
   <svg class="social-icon">
      <use xlink:href="#twitter">
   </svg>
   <svg class="social-icon">
      <use xlink:href="#facebook">
   </svg>
</body>

Save the file.
Preview sprites.html in a browser and you should the Twitter and Facebook logos.

Styling Sprites

The svg tags we just added (the ones with the use tag) don’t have width and height attributes so there’s extra space being added. Instead of adding those attributes to the HTML, let’s use CSS.

In the style tag at the top of this file, below the body rule, add the following bold code:

.social-icon {
   width: 50px;
   height: 50px;
   margin-right: 10px;
   vertical-align: middle;
}

Save the file.
Preview sprites.html in a browser.

The icons should now be smaller, with less space between them. They are vector, so we can make them any size and they’ll look great.
Return to sprites.html in your code editor.
As we learned in the previous exercise, we can change the color of embedded SVG. That works exactly the same for sprites. Let’s color the Facebook logo, but first we’ll need a way to identify the place we are using it in the page.

Don’t confuse the ID used to define the sprite, with its instance on the page. You can reuse the same definition in many places on the page. You’ll need a way to refer to those instance. We’ll do that with a class.
Elements can have multiple classes (each class is separated by a space). Add a facebook class as shown below in bold:
```
<svg class="social-icon facebook">
   <use xlink:href="#facebook">
</svg>
```
In the style tag, below the .social-icon rule, add the following bold code:
```
.social-icon.facebook {
   fill: #3b5998;
}
```
NOTE: There’s no space between .social-icon and .facebook which means the element we’re targeting must have both classes. If the selector had a space, it would target element with a class of facebook inside an element with a class of social-icon.
Save the file.
Preview sprites.html in a browser and the Facebook logo should be blue.
Return to sprites.html in your code editor.
While we’re at, we could make the Facebook logo slightly smaller.

In the rule you just created, add the following bold code:

.social-icon.facebook {
   fill: #3b5998;
   width: 46px;
   height: 46px;
}

Save the file.
Preview sprites.html in a browser and the Facebook logo should be a bit smaller than it was previously.

Topics covered in this HTML & CSS tutorial:

Exercise Preview

Exercise Overview

Getting Started

Defining the SVG Sprite

Using a Sprite

Styling Sprites

How to Learn HTML & CSS