Как динамически изменить цвет элемента внутри SVG-файла с помощью Javascript?

Я экспериментирую с файлами HTML, CSS и SVG. У меня есть сложная иллюстрация, сохраненная как файл SVG. Внутри этого файла у меня есть два элемента с уникальным идентификатором: COLOR1 и COLOR2. По умолчанию они имеют заливку красного (COLOR1) и желтого (COLOR2). Я загрузил файл SVG на страницу HTML с помощью этого метода. SVG слишком сложен, чтобы встроить его в строку, и страница после эксперимента может иметь более одного файла SVG одного и того же типа.

Я хочу изменить при загрузке страницы цвета этих двух элементов в соответствии с различными значениями, предоставленными базой данных. Например, COLOR1 на зеленый, а COLOR2 на синий. Вот что я сделал:

Как мне правильно обращаться к элементам, чтобы изменить их значения заливки? Я хочу использовать простой Javascript, а не JQuery или другие зависимости.

    <object id="Soldier" type="image/svg+xml" data="ProvaSVG.svg" width="400" height="400">
    <param name="src" value="ProvaSVG.svg">
    </object>

Soldier.COLOR1.fill='Green';
Soldier.COLOR2.fill='Blue';