Улучшение производительности интерактивного SVG на html странице

Всем привет! Имеется проблема с большим SVG. На странице необходимо отобразить SVG, но в нем порядка 20к элементов, весит под 20 мб. Сам SVG - это схема трубопроводов: 10 труб по 1500 метров каждая. Одна линия (path) - 1 метр трубы. Получается 15000 линий. id Каждой линии имеется в базе. База каждый день меняется, меняется именно параметр линии. В зависимости от параметра меняется цвет линии (красный, зеленый и т.д.). Трубы длинные, поэтому нужен зум, чтобы был виден текст(участок - 0, 1 метр и т.д. под каждой линией) и можно было перемещаться по этому SVG, используется svg-pan-zoom. Если бы элементов было не так много, то все шустро работало. Но чем их больше, тем медленнее работает. Весь код SVG вставлен в html как dom, то есть понимаете, как много строчек в html файле. Есть ли путь решения, как повысить скорость работы? Когда пытаешь зумить или перемещаться по свг - очень подтормаживает.Вот как выглядит (разумеется, вырезанная часть):

Вот так примерно будут подкрашиваться все элементы по клику