Как решить такую проблему в верстке?

каждую картинку отдельно рисовать?

нет. просто именуешь элементы векторного изображения в редакторе. вроде в кореле работает и выгружаешь как SVG. А потом в тело SVG вставляешь скрипт.. принцип такой же как и в HTML.
И для каждого элемента SVG где нужно добавляешь обработчик события onmouseover и onmouseout. И в обработчике просто стиль меняешь на другую заливку. Или просто через стили. Но стили не в атрибуте style="..." элемента не будут обрабатываться в svgweb. Это что касается кросбраузерности.
Для современных браузеров будет отображаться чистый SVG а для пользователей старых иешек визуализороваться SVG будет через FLASH.

Кстати у svgweb есть ещё один плюс - его можно связать например с jQuery. Хотя с таким сращиванием в свое время поседел пока разобрался. Но это возможно.

Для плевать на IE8 уже давно всем. Даже Microsoft.

Нет, до вашего сообщения я даже не заметил, что там есть hover

не изучал еще SVG,а что именно там в SVG использовать,можете соориентировать или инфу какую то дать

Хорошая презенташка yoksel.github.io/about-svg
Справочник https://developer.mozilla.org/en-US/docs/Web/SVG
Потыцкать, что-то понять www.w3schools.com/svg
Ну и спецификация www.w3.org/TR/SVG11