Заливка SVG - Joomla 3.x: Шаблоны, разметка и макеты вывода

Есть белая однотонная картинка SVG нужно чтобы при наведении она покрасилась в оранжевый. 

Скажите пожалуйста как это сделать ?

https://jsfiddle.net/timssky/2sq3aak2/5/

Типа такого?

Самое главное: fill НЕ работает для внешних файлов. Т.е. либо вставляете SVG непосредственно в тело, либо используете два разных SVG. Далее, рекомендации:
1. Вынесите текст из svg.
2. Не используйте тут тэг p. Это же не параграф.
3. Не пользуйтесь для генерации SVG Корел.
4. Если уж используете Корел, то делайте в пикселях, а не миллиметрах, как у вас сейчас. Вообще, очень грязный SVG у вас. Лучше всё вычистить вручную или хотя бы svgo-gui.

Хорошо SVG я почищу.  

Я бы так и сделал 2 картинки но вопрос как это реализовать.  Дело в том что у меня стоит Switcher от Yootheme  (THUMBNAIL NAVIGATION)

http://yootheme.com/demo/widgetkit/joomla/index.php/home/switcher

У меня также как в примере, только верхние картинки переключатели сделаны в формате SVG

 У них стоит эффект прозрачности если какой то переключатель не активен. Мне это не подходит.   Я бы хотел сделать наоборот, чтобы  когда переключатель активен он оранжевый!  Как это реализовать ?

Не понял, что не подходит.

Там картинка вставляется в самом widgetkit,  как вставить 2, чтобы при этом если она активна менялась на другую ?

Через background стилями

А можно пожалуйста поподробнее ?

Стили непосредственно в SVG файл пропишите.