css – Change SVG color in :hover

Question:

I have an SVG inserted with the img tag on my website. I would like to know if there is a way when I hover this image it changes color, but only with CSS?

This is the content of my SVG

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" viewBox="0 0 28 28">
<path d="M27.563 0.172q0.516 0.375 0.422 1l-4 24q-0.078 0.453-0.5 0.703-0.219 0.125-0.484 0.125-0.172 0-0.375-0.078l-7.078-2.891-3.781 4.609q-0.281 0.359-0.766 0.359-0.203 0-0.344-0.063-0.297-0.109-0.477-0.367t-0.18-0.57v-5.453l13.5-16.547-16.703 14.453-6.172-2.531q-0.578-0.219-0.625-0.859-0.031-0.625 0.5-0.922l26-15q0.234-0.141 0.5-0.141 0.313 0 0.562 0.172z" fill="#8bcafe"></path>
</svg>

I would like to change the fill to another color in the hover; I found the following solution

svg:hover path {
    fill: #fce57e;
}

However, either I'm using it wrong, or it's not useful for me at all.

The image is embedded inside a button , the HTML structure looks like this:

<button type="submit">
    <img src="#" alt="Enviar" data-src="public/img/send.svg" data-set="false">
    Enviar
</button>

Another detail that might be interesting to mention, the image's src attribute is only set when the element is in the viewport , I do this with Javascript.

Answer:

You can as said use SVG inline which is the easiest way. Just add the code mentioned by changing the fill property to the desired color.

For example:

svg:hover path {
  fill: #fce57e;
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" viewBox="0 0 28 28">
<path fill="#8bcafe" d="M27.563 0.172q0.516 0.375 0.422 1l-4 24q-0.078 0.453-0.5 0.703-0.219 0.125-0.484 0.125-0.172 0-0.375-0.078l-7.078-2.891-3.781 4.609q-0.281 0.359-0.766 0.359-0.203 0-0.344-0.063-0.297-0.109-0.477-0.367t-0.18-0.57v-5.453l13.5-16.547-16.703 14.453-6.172-2.531q-0.578-0.219-0.625-0.859-0.031-0.625 0.5-0.922l26-15q0.234-0.141 0.5-0.141 0.313 0 0.562 0.172z"></path>
</svg>

The most recommended way I found was using this code from SNIPPETLIB : Replace all SVG images with inline SVG

Currently there isn't an easy way to embed an SVG image and then have access to the SVG elements via CSS. There are various methods of using JS SVG frameworks, but they are overly complicated if all you are doing is making a simple icon with a rollover state. This replaces all SVG images with inline SVGs so you can style them with css.

Basically what it does is replace all the images on your site with SVG INLINE allowing you to access its properties via CSS.

In your case, you can insert the image in the body of your document like this:

<img id="airplane" class="svg airplane" src="airplane.svg">

NOTE: It is necessary to include the SVG class while AIRPLANE is for the example. The ID is not necessary, but it can be useful according to your need.

Then apply the jQuery code (In a separate file or in the HEAD header of your page).

NOTE: Don't forget to include jQuery in the HEAD of the page.

/*  Replace all SVG images with inline SVG */
$('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);
  });
});

The code takes all the IMG tags with the SVG class and replaces them with the SVG INLINE from the file linked in the SRC attribute.

Once this is done, you have access to the SVG properties from the CSS, allowing you to change its color.

As mentioned:

svg:hover path {
    fill: #fce57e;
}

Pelo ID:

#airplane:hover path {
    fill: #fce57e;
}

By class:

.airplane:hover path {
    fill: #fce57e;
}

Online example: Hover SVG example

IMPORTANT: Does not work with image links from external locations EX: http://natan.esy.es/exemplos/airplane.svg or any other image link, ie the image file must be on the server where your page is finds.

Example of JSBIN problem : Hover Example Does Not Work

Post Views: 27
Scroll to Top