УПРАВЛЕНИЕ С БАЗЫ ДАННЫХ id svg обьектом

Имеется простое веб-приложение на котором по нажатию на "Насос1" или "Насос2" будет меняться цвета насосов (с красного на зеленый) ,сам рисунок SVG формата .

Можно ли сделать чтоб упрашление было с БАЗЫ ДАННЫХ , по принципу ,записываем 1 - загорается красный цвет насоса, записываем 2- синий, 3 - зеленый . Как это можно сделать с помощью скриптов ? Мне хотя бы наглядный пример чтоб знать как это можно сделать .

На подобии скрин простой базы данных , кружочек svg (который меняется по записи в БД).

НУЖЕН НАГЛЯДНЫЙ ПРИМЕР (ЧТО ЗАПИСЫВАТЬ В БАЗЕ ДАННЫХ , ВЫВОДИТЬ ДАННЫЕ И МЕНЯТЬ ЦВЕТА ЗАЛИВКИ НАСОСОВ )

<div id="sidebar">
<ul>
    <a><input type="button" class="pum" value="Насос1" 
 onClick="myFunction"></a>
            И ИМЕЕТСЯ ID SVG .
      <g
      id="pump-1"
  inkscape:label="#g1267"
  transform="matrix(0.81036317,0,0,0.81036317,51.74355,-26.659243)">
  <circle
 r="14.303132"
 cy="225.50253"
 cx="-28.786152"
 id="path1216"
 style="fill:#ff0000;fill-opacity:1;stroke:#000000;stroke- 
 width:2.4000001;stroke-linecap:round;stroke-linejoin:bevel;stroke- 
 miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

               ВОТ КОД ВЫПОЛНЕНИЯ
   var pump - 1 Click = document.getElementById("pump- 
   1").addEventListener("click", changeColor);
   var clicks = 0;
     function changeColor(pump - 1) {
    if (pump - 1. style.fill == "rgb(248, 0, 0)") {
        pump - 1. style.fill = "rgb(20, 255, 0)";
    } else {
        pump - 1. style.fill = "rgb(29, 172, 249)";
    }
    }