У меня есть несколько SVG-графики, которые я хотел бы изменить цвета с помощью внешних таблиц стилей, а не непосредственно в каждом SVG-файле. Я не помещаю графику в линию, но храню их в своей папке изображений и указываю на них.

Я реализовал их таким образом, чтобы всплывающие подсказки работали, и я также обернул каждый в<a> тег, чтобы разрешить ссылку.

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

А вот код 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>

Я поместил следующее в моем внешнем файле CSS (main.css):

.socIcon g {fill:red;}

Тем не менее, это не влияет на графику. Я также пробовал .socIcon g path {} и .socIcon path {}.

Что-то не так, возможно, моя реализация не допускает внешних модификаций CSS, или я пропустил шаг? Буду очень признателен за вашу помощь! Мне просто нужна возможность изменять цвета графики SVG через мою внешнюю таблицу стилей, но я не могу потерять всплывающую подсказку и возможность ссылки. (Хотя я могу жить без подсказок.) Спасибо!