Как реализовать подмену текста в svg шаблонах картинок с помощю xml?

Здраствуйте, сам не знаю как реализовать но знаю суть задачи:
-нужно в xml или html сделать к примеру 10 векторных кругов и квадратов;
- есть 3 инпута текста в которых Имя Фамилия и Город;
- при заполнении всех полей текст записывается в все 10 картинок по шаблону заданому каждому изображению, внутри круга, за кругом, возле круга, по кругу внутри и тд
- после можно выбрать 1 из 10 шаблонов и скачать или отправить, каждый шаблон имеет снизу кнопку для функционала.

В итоге юзер должен получить векторную картинку с введеными данными, подскажите как можно реализовать такое ?