Tengo varios gráficos SVG con los que me gustaría modificar los colores a través de mis hojas de estilo externas, no directamente dentro de cada archivo SVG. No coloco los gráficos en línea, sino que los guardo en mi carpeta de imágenes y los señalo.

Los he implementado de esta manera para permitir que funcionen las sugerencias de herramientas, y también las envolví en una<a> etiqueta para permitir un enlace.

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

Y aquí está el código del 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>

Pongo lo siguiente en mi archivo CSS externo (main.css):

.socIcon g {fill:red;}

Sin embargo, no tiene ningún efecto en el gráfico. También probé .socIcon g ruta {} y .socIcon ruta {}.

Algo no está bien, ¿quizás mi implementación no permita modificaciones de CSS externas, o perdí un paso? ¡Realmente apreciaría tu ayuda! Solo necesito la capacidad de modificar los colores del gráfico SVG a través de mi hoja de estilo externa, pero no puedo perder la información sobre herramientas y la capacidad de enlace. (Aunque puedo vivir sin información sobre herramientas). ¡Gracias!