Como estilo SVG com CSS externo?

Eu tenho vários gráficos SVG que eu gostaria de modificar as cores de via minhas folhas de estilo externas - não diretamente dentro de cada arquivo SVG. Eu não estou colocando os gráficos em linha, mas armazenando-os na minha pasta de imagens e apontando para eles.

Eu os implementei dessa maneira para permitir que as dicas de ferramentas funcionem, e também envolvi cada uma delas<a> tag para permitir um link.

<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>

E aqui está o código do gráfico SVG:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
    <path d="M28.44......./>
</g>
</svg>

Eu coloquei o seguinte no meu arquivo CSS externo (main.css):

.socIcon g {fill:red;}

Ainda não tem efeito no gráfico. Eu também tentei .socIcon g path {} e .socIcon path {}.

Algo não está certo, talvez a minha implementação não permita modificações externas no CSS ou perdi um passo? Eu realmente aprecio sua ajuda! Eu só preciso da habilidade de modificar as cores do gráfico SVG através da minha folha de estilo externa, mas não posso perder a dica de ferramenta e a capacidade de link. (Eu posso ser capaz de viver sem dicas embora.) Obrigado!