You can as said use the SVG so inline which is the easiest way. Just add the quoted code by changing the property fill with the desired color.
Exemplifying:
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 form I found and most recommended 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 into the body of your document like this:
<img id="airplane" class="svg airplane" src="airplane.svg">
OBS: It is necessary to include the class SVG while AIRPLANE is for example. The ID is not necessary, but can be useful according to your need.
Then apply the jQuery code (in a separate file or in the header HEAD of your page).
OBS: Don’t forget to include jQuery in HEAD 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 retrieves all tags IMG with class SVG and replaces with the SVG INLINE from the linked file in the attribute SRC.
Once done, you have access to the properties SVG from the CSS allowing changing the color of the same.
In the form cited:
svg:hover path {
fill: #fce57e;
}
For ID:
#airplane:hover path {
fill: #fce57e;
}
By class:
.airplane:hover path {
fill: #fce57e;
}
IMPORTANT: Does not work with external location image links EX: http://natan.esy.es/exemplos/airplane.svg or any other image link, ie the image file needs to be on the server where your page is.
Example of the problem in JSBIN: Hover Example Doesn’t Work
It does not change the color of my SVG. I give the Hover but it continues with the color #8bcafe;
– waghcwb
There is no JS code. But I found a solution. It seems that I will have to use the SVG inline, so that solution I said would be the correct one... Is there a way to do using the tag img?
– waghcwb