How to reuse inline SVG?

Learn how to reuse the same SVG without inlining it over and over again.
Published 2023-03-22 • 4 min read
How to reuse inline SVG?

Embedding SVGs directly into HTML is a smart move. It boosts your website’s speed by eliminating extra HTTP requests and makes your graphics scalable, interactive, and easily styled with CSS and JavaScript. But what if you need the same SVG across several places? Repeating the SVG code isn’t efficient. Let’s dive into better solutions.

Options for reusing SVG

Let’s say you would like to use the same SVG multiple times.

Unfortunately, inlining it might not be the best option, as you would have to repeat the markup for the whole image each time.

You can use it as <img> or <object> or even use the background-image method. It would instruct your browser to reuse the same image.

This is fine in most cases, but there is one drawback. You can’t use CSS to style the icon, it will have the same colors as in the original file.

So is there another way? One where you can reuse the image, but style it the same way as inline SVG? Of course, there is.

Reusing inline SVG with <symbol> and <use>

SVG offers a neat solution with the <symbol> and <use> elements, allowing you to define and reuse SVG templates. This method keeps all the benefits of inline SVGs—scalability, CSS styling, and JavaScript interactivity—without the code bloat. Here’s how it works:

As an example, we’ll use the following SVG:

<svg viewBox="0 0 200 200">
  <circle
    cx="100"
    cy="100"
    r="50"
    stroke="black"
    stroke-width="5"
    fill="currentColor"
  />
</svg>

Now let’s change it to a reusable SVG template:

<svg style="display: none">
  <symbol id="symbol" viewBox="0 0 200 200">
    <circle
      cx="100"
      cy="100"
      r="50"
      stroke="black"
      stroke-width="5"
      fill="currentColor"
    />
  </symbol>
</svg>

What exactly happened?

  1. We’ve wrapped the path we want to use as out template in the <symbol> element. Also we’ve assigned id to it. It’s important, becuase we are going to reference our template by this id.
  2. We’ve added display: none. Symbols are not visible, but they still have width and height, we don’t want that.
  3. We’ve moved viewBox from <svg> to <symbol>, to store this info in the template.

Now we can use it with a <use> tag and reference appropriate template by href attribute:

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

Just like that! Now you can create multiple copies of your symbol on your website.

Of course, you can use CSS to style linked SVG.

Also it’s possible to include multiple symbols in a single <svg> tag, like this:

<svg style="display: none">
  <symbol id="circle" viewBox="0 0 200 200">
    <circle
      cx="100"
      cy="100"
      r="50"
      stroke="black"
      stroke-width="5"
      fill="red"
    />
  </symbol>

  <symbol id="square" viewBox="0 0 200 200">
    <rect width="200" height="200" x="0" y="0" rx="20" ry="20" fill="blue" />
  </symbol>
</svg>

If you are curious how it all works just take a look at the following snippet:

See the Pen SVG example by /dev/programmer (@devprogrammer-com) on CodePen.

 

In conclusion, reusing inline SVGs is an efficient way to reduce code repetition and maintain flexibility in styling and interactivity. By utilizing the <symbol> and <use> tags, you can create reusable SVG templates without sacrificing the advantages of inline SVG embedding. This method ensures you can deploy multiple instances of the same graphic while keeping your HTML size minimal and manageable. Check out the provided codepen to see how it all comes together, and start implementing this technique in your projects today!

#webtricks