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: <!-- begin snippet: js hide: false --> <!-- language: lang-css --> svg:hover path { fill: #fce57e; } <!-- language: lang-html --> <?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> <!-- end snippet --> **A forma que encontrei e mais recomendada foi utilizando este código do `SNIPPETLIB`: [Replace all SVG images with inline SVG][1]** > 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; } #**Exemplo online:** [**Exemplo Hover SVG**][2]# ####**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 (JSBIN)**: [**Exemplo Hover Não Funciona**][3] [1]: https://snippetlib.com/jquery/replace_all_svg_images_with_inline_svg [2]: http://natan.esy.es/exemplos/svg.html [3]: http://jsbin.com/diqobawajo/1/edit