Иллюстрация с персонажем в формате svg javascript

Задание - написовать иллюстрацию с персонажем (см. пример в прикрепленных файлах) в формате svg javascript, файл должен быть изменяемым, изменяемые части персонажа:

- имя & пол (девочка/мальчик)

- глаза

- волосы

- кожа, ее видимая часть (лицо, руки)

- без очков

- какая-то часть на выбор, что-то детское и милое (большие глаза, улыбка...)

- фон

Персонаж:

- пол : девочка

- возраст: примерно 5 лет

- цвет кожи (изменяемый): белый

- цвет волос (изменяемый): блондинка

- цвет глаз (изменяемый): голубые

- одежда & прическа: на ваш выбор и вдохновение

Иллюстрация:

- принцип как в приведенном примере

- иллюстрация на 2 страницах

- оставить место для текста

- ребенок присутствует на 1 из страниц, левой или правой)

- иллюстрация горизонтальная

Текст:

- он должен быть читабельным на развороте 2 страниц, текст на странице, где нет ребенка 

- по контрасту текст должен быть светлым, а фон темным, или наоборот, но не пестрым

Тема иллюстрации:

Девочка - пилот самолета, летит над океаном, вдали виднеются горы.

В общем персонаж и фон раздельны. 

Все изменяемые цвета персонажа (кожа, волосы, глаза) сгруппировать в начале файла <defs> с уникальными id:

"couleur_cheveux" - цвет волос

"couleur_yeux" - цвет глаз

"couleur_peau" - цвет кожи

Приведенные ниже файлы html & svg вам дадут идею стрктуры иллюстрации

...

</svg>

 <defs>

    <!-- modified colors via JavaScript -->

    <linearGradient id="cheveux"><stop id="couleur_cheveux" stop-color="yellow"/></linearGradient>

    <linearGradient id="yeux"><stop id="couleur_yeux" stop-color="blue"/></linearGradient>

    <linearGradient id="peau" ...><stop id="couleur_peau" stop-color="pink" offset="0"/></linearGradient>

    <!-- cheveux -->                        ...

    <!-- corps (tout sauf tête) -->    ...

    <!-- yeux -->                             ...

    <!-- couleur contours yeux & sourcils  --> ...

    <!-- visage -->                          ...

    <!-- reflet cheveux -->              ...

    <!-- corps - autres parties -->   ...

    <!-- contour des yeux -->         ...

    <!-- bouche -->                        ...

  </defs>

<-- DETAIL DES ELEMENTS-->

  <g transform="matrix(1.25 0 0 -1.25 -699.92 881.36)">

    <!-- visage -->                             =>     (path, clip-path & transform...)

    <!-- yeux -->                                =>     (path, clip-path & transform...)

    <!-- cheveux -->                          =>     (path, clip-path & transform...)

    <!-- reflet cheveux -->                 =>      (path, clip-path & transform...)

    <!-- bouche -->                            =>      (path, clip-path & transform...)

    <!-- corps (tout sauf tête) -->       =>      (path, clip-path & transform...)

  </g>

</svg>

Для смены цветов используйте JavaScript

function change(valeur, id) {

    var svgDoc = document.getElementById("fillette").contentDocument;

    var maVariable = svgDoc.getElementById(id);

    maVariable.style.stopColor =valeur;

}

Жду ваших предложений стоимости и сроков выполнения.

Если есть вопросы по заданию - пишите.