Сергей

Вынесите стили в отдельный класс, а затем с помощью JQuery добавляйте/убирайте его - это самая распространённая практика.

Остановился на amcharts, больше достойных продуктов (ну кроме разве что Leaflet) не вижу.

.addClass - это один из методов библиотеки JQuery, которая у тебя, видимо, не подключена. На чистом javascript класс добавляется немного иначе: .classList.add("myClass").

Tympanus.net очень крут.

Тот эффект, что тебе нужен, называется параллакс (parallax), в интернете достаточно много таких библиотек, например, skrollr. Вырезать по каждому пузырьку не надо, достаточно создать 2-3 слоя с пузырьками, которые будут двигаться с разной скоростью относительно друг друга.

Через пользовательские стили - никак, ведь это картинка. Единственный способ - изменить fill в самом файле svg. Если же требуется взаимодействие с объектом, следует рассмотреть другие варианты подключения: вставка svg-кода в тело страницы, кодировка в css-файле либо генерация/вставка с помощью js.

Вставить svg можно при помощи JQuery-метода load:
$('.your-svg-container').load('your-svg-file.svg');