How to implement text substitution in svg image templates using xml?

Question

JavaScript

Hello, I don’t know how to implement it myself, but I know the essence of the task: -
you need to make, for example, 10 vector circles and squares in xml or html;
- there are 3 text inputs in which First Name Last Name and City;
- when filling in all fields, the text is written in all 10 pictures according to the template given for each image, inside the circle, behind the circle, near the circle, in the circle inside, etc.
- after that, you can select 1 of 10 templates and download or send, each template has a button below for functionality.
As a result, the user should receive a vector image with the entered data, tell me how can I implement this?