CSS and making an SVG icon change on hover

Question

This is the menu item in my boostrap menu:

<li class="nav-item">
 <a href="#" class="icon"><span class="number">1</span>
   <img src="images/svg-icons/notifications-active.svg" alt="" />
 </a>
</li>

As you can see there is an SVG image being pulled in with a class attached as "icon"

Here's the CSS that I thought would make it switch to a different color:

<style media="screen">
.icon:hover {
    fill: #DA4567;
    }
</style>

Any idea what I am doing wrong or doesn't it work like that?

Thanks!

Answer 1

INLINE SVG's

Personally I would recommend you use inline svg's. They are easier to manage and also have improved loading times because they load asynchronously with the page request.

Using inline svg will allow you to directly manipulate the svg element or even a specific path within it.

.icon:hover {
  fill: #DA4567;
}

<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="icon-donut" viewBox="0 0 483 483">
    <path d="M184.824,159.112L84.293,58.582C126.683,22.104,181.792,0,242.104,0c126.567,0,230.391,97.138,241.124,220.921H340.714 c-9.734-45.534-50.164-79.695-98.609-79.695C220.812,141.226,201.099,147.852,184.824,159.112z M141.226,242.104 c0-19.077,5.399-36.859,14.593-52.076L54.666,88.889C20.507,130.628,0,183.964,0,242.104c0,126.567,97.138,230.378,220.921,241.124 V340.714C175.387,330.979,141.226,290.543,141.226,242.104z M263.289,340.714v142.515 c116.797-10.131,209.809-103.148,219.939-219.939H340.714C332.439,301.992,301.993,332.439,263.289,340.714z" />
  </symbol>
  </svg>
</div>

<li class="nav-item">
  <a href="#" class="icon">
    <span class="number">1</span>
    <svg class="Icon">
      <use href="#icon-donut" />
   </svg>
  </a>
</li>

---

BACKGROUND SVG

If you want to use an image path then setting it as a background image will allow you to use the filter property.

.icon {
  background: url(https://upload.wikimedia.org/wikipedia/commons/8/81/Octicons-link-external.svg) no-repeat;
  height: 100px;
  width: 100px;
  background-size: contain;
  display: block;
}

.icon:hover {
  filter: invert(38%) sepia(79%) saturate(658%) hue-rotate(301deg) brightness(88%) contrast(95%);
}

<li class="nav-item">
  <a href="#">
    <span class="number">1</span>
    <span class="icon"></span>
  </a>
</li>

---

SVG MASKS

.icon {
  mask: url(https://upload.wikimedia.org/wikipedia/commons/8/81/Octicons-link-external.svg) no-repeat;
  display: block;
  width: 100px;
  height: 100px;
  background: black;
  mask-size: contain;
}

.icon:hover,
.icon:focus {
  background: #DA4567;
}

<li class="nav-item">
  <a href="#"><span class="number">1</span>
  <span class="icon"></span>
 </a>
</li>

Answer 2

You have to use 2 SVG image. First Image with SVG default color and second Image with SVG Hover color. This is not a good idea to use 2 images.

You can use this; you have to add JQUERY, svg-img.js

/*
  * svg-img.js
  * Replace all SVG images with inline SVG
  */
 $(function() {$('img.svg').each(function() {
         var $img = $(this);
         var imgID = $img.attr('id');
         var imgClass = $img.attr('class');
         var imgURL = $img.attr('src');$.get(imgURL, function(data) {
             // Get the SVG tag, ignore the rest
             var $svg = $(data).find('svg');// Add replaced image's ID to the new SVG
             if (typeof imgID !== 'undefined') {
                 $svg = $svg.attr('id', imgID);
             }
             // Add replaced image's classes to the new SVG
             if (typeof imgClass !== 'undefined') {
                 $svg = $svg.attr('class', imgClass + ' replaced-svg');
             }// Remove any invalid XML tags as per http://validator.w3.org
             $svg = $svg.removeAttr('xmlns:a');// Replace image with new SVG
             $img.replaceWith($svg);}, 'xml');});})

/*
  * style.css
  */
.svg {
    width: 100px;
    height: 100px;
}svg path,
svg circle {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
}svg:hover path {
    fill: red;
}

<html><head>
    <meta charset="UTF-8">
    <title>SVG</title>
    <link href="style.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script  src="svg-img.js"></script>
</head>
<body>
<h1>SVG img tag hover</h1>
<img src="https://raw.githubusercontent.com/asadalikanwal/imgtosvg/master/img/icon-play.svg" class="svg" />
</body>
</html>

Answer 3

A nice tool to provide your svg colour can be found here:
https://codepen.io/sosuke/pen/Pjoqqp

SCSS

.nav-item {
    .icon {
        img {
            transition: all .2s ease-in-out;
        }

        &:hover,
        &:active,
        &:focus {
            img {
                filter: invert(37%) sepia(63%) saturate(1879%) hue-rotate(321deg) brightness(90%) contrast(89%);
                //filter: grayscale(100%);
            }
        }
    }
}

How it works.
A great article to start:
https://css-tricks.com/the-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them/

Basically you start from a dark base colour (black) and introduce colour with the sepia filter. Then accompany multiple filters to try and match a hex colour. In most occasions it's a close match.

Browser support
Pretty much up-to-date these days (>= IE10):
https://caniuse.com/#search=svg%20filter