Você pode como dito utilizar o SVG
de forma inline
que é a forma mais fácil. Basta acrescentar o código citado alterando a propriedade fill
com a cor desejada.
Exemplificando:
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>
A forma que encontrei e mais recomendada foi utilizando este código do 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.
Basicamente o que ele faz é substituir todas as imagens de seu site com SVG INLINE
permitindo que você possa acessar suas propriedades via CSS.
No seu caso você pode inserir a imagem no corpo do seu documento assim:
<img id="airplane" class="svg airplane" src="airplane.svg">
OBS: É necessário incluir a classe SVG
enquanto AIRPLANE
é para o exemplo. O ID
não é necessário, mas pode ser útil de acordo com a sua necessidade.
Em seguida aplique o código jQuery (Em um arquivo separado ou no cabeçalho HEAD
de sua página).
OBS: Não se esqueça de incluir o jQuery no HEAD
da página.
/* 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);
});
});
O código obtém todas as tags IMG
com a classe SVG
e substitui com o SVG INLINE
a partir do arquivo vinculado no atributo SRC
.
Feito isso, você tem acesso as propriedades SVG
a partir do CSS permitindo alterar a cor do mesmo.
Da forma citada:
svg:hover path {
fill: #fce57e;
}
Pelo ID
:
#airplane:hover path {
fill: #fce57e;
}
Pela classe:
.airplane:hover path {
fill: #fce57e;
}
IMPORTANTE: Não funciona com links de imagens de locais externos
EX: http://natan.esy.es/exemplos/airplane.svg
ou qualquer outro link de imagem, ou seja o arquivo da imagem precisa estar no servidor onde a sua página se encontra.
Exemplo do problema no JSBIN: Exemplo Hover Não Funciona