Change SVG Colors Using CSS Filters

How to Change the Color of an SVG

SVGs (Scalable Vector Graphics) are a web designer’s best friend. They’re lightweight, resolution-independent, and infinitely customizable.

As a dev, most of the SVGs are usually created by our clients or our designers. I recently had a project where the SVGs were required to have three different colors: default, hover, and active. The client only sent us the default ones, and I had to go back and forth multiple times to get all the other colors. Which got me to thinking “why can’t I just edit the color of the SVG myself?”

In this blog, we will be using the following example SVG. Save it as fishtank-fish-white.svg.

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1080 1080">
  <g id="Layer_11" data-name="Layer_1">
    <g>
      <circle cx="743.7" cy="541.2" r="50.6"/>
      <polygon points="1064 1064 1064 540 540 1064 1064 1064"/>
      <polygon points="1064 540 1064 16 540 16 1064 540"/>
      <polygon points="199.2 580.8 16 764 16 1064 292.6 1064 487.5 869.1 199.2 580.8"/>
      <polygon points="486.2 212.2 290.1 16 16 16 16 318.5 198 500.4 486.2 212.2"/>
    </g>
  </g>
</svg>

It should look a little something like this.

Now, let’s make it so that it turns red when hovered.

Using CSS to Change the Color of an SVG?

The first thing I tried was to use fill to change the color.

<img src="img/fishtank-fish-white.svg" class="fish" style="fill: red;">

The result:

It’s still black. This is because while the SVG looks like code, it is still treated like an external file, similar to a JPG or PNG, and you can’t use fill on those file types either.

Solution 1: Edit the SVG File Manually

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1080 1080">
  <!-- Add a style to the SVG -->
  <defs>
    <style>
      .st0 {
        fill: red;
      }
    </style>
  </defs>
  <g id="Layer_11" data-name="Layer_1">
    <g>
      <circle class="st0" cx="743.7" cy="541.2" r="50.6"/>
      <polygon class="st0" points="1064 1064 1064 540 540 1064 1064 1064"/>
      <polygon class="st0" points="1064 540 1064 16 540 16 1064 540"/>
      <polygon class="st0" points="199.2 580.8 16 764 16 1064 292.6 1064 487.5 869.1 199.2 580.8"/>
      <polygon class="st0" points="486.2 212.2 290.1 16 16 16 16 318.5 198 500.4 486.2 212.2"/>
    </g>
  </g>
</svg>

In the SVG code above, I’ve added a <style> and then saved it as fishtank-fish-red.svg . Unfortunately, this change means we can’t use <img> tags anymore, so we will use background-image instead.

<style>
    .fish {
      width: 100px;
      height: 100px;
      background-image: url('img/fishtank-fish-white.svg');
    }

    .fish:hover {
      background-image: url('img/fishtank-fish-red.svg');
    }
 </style>
<div class="fish"></div>

It’s now red when hovered!

The problem with this solution, is that the image source is now in the CSS. If you were to use a CMS like Sitecore, SVGs are usually loaded from the media library, and the path to the image is placed inside <img> tags.

Solution 2: Inline SVG

Instead of using <img> tags, just copy the SVG code to your HTML page. That way, you can edit the hover styling.

<style>
  .fish {
      height: 100px;
      width: 100px;
  }
  .st0 {
    fill: black;
  }
  .fish:hover .st0 {
    fill: red; /* Change this to your desired hover color */
  }
</style>
<div class="fish">
  <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1080 1080">
    <g id="Layer_11" data-name="Layer_1">
      <g>
        <circle class="st0" cx="743.7" cy="541.2" r="50.6"/>
        <polygon class="st0" points="1064 1064 1064 540 540 1064 1064 1064"/>
        <polygon class="st0" points="1064 540 1064 16 540 16 1064 540"/>
        <polygon class="st0" points="199.2 580.8 16 764 16 1064 292.6 1064 487.5 869.1 199.2 580.8"/>
        <polygon class="st0" points="486.2 212.2 290.1 16 16 16 16 318.5 198 500.4 486.2 212.2"/>
      </g>
    </g>
  </svg>
</div>

To get past the Sitecore CMS issue, we can use a plugin such as Inline SVG to convert the image from a <img> to <svg>.

Solution 3: Use CSS Filters

If you haven’t used CSS filters before, here’s a great page to read to see what’s available.

Here’s what we will mostly be using to change image colors.

Play around with the filters to see what each one does. We will be using a combination of them to get the color result we want.

Luckily for us, the daunting task of converting a hex code into CSS filters has already been done! Check our this Codepen link, and type in #ff0000 (the hex code for red) into the input box.

<style>
  .fish {
      height: 100px;
      width: 100px;
  }
  .fish:hover {
      filter: invert(24%) sepia(68%) saturate(7484%) hue-rotate(355deg) brightness(92%) contrast(121%);
  }
</style>
<img src="img/fishtank-fish-white.svg" class="fish">

And that’s all the code we need. The only drawback to this method is that it really only works for single color SVGs.

Wrapping Up

We explored three different methods to change SVG colors, and discovered that using CSS filters is the easiest method when dealing with single color SVGs.