SVG: how to change an image programmatically attached to an svg file?

Question

JavaScript

I have an svg file with a picture in it. How to change it programmatically?
The idea is this:
There is a container. It contains a block with svg. Svg acts as a mask. For example, let's add another container with pictures, take DragnAndDrop and move the picture to the svg file. When throwing an image into a container, I want to change the image in the svg file to the one I dropped.
This is just an example for you to understand the problem. But in reality, I only need to understand how you can change the picture in the svg file programmatically, for example, on some event.
Perhaps there are some libraries that will simplify the task? I know about the Snap.svg library, I looked at the docks there, but did not find a solution to the problem.
Since I did not work closely with svg (only as with pictures in links), I roughly imagined how it could work with the library:
Take an svg file with a picture. Select this file as a library, and at certain events, change the picture through the library api. But then again, I roughly imagined how it could work and didn’t find anything like that.

Answer 1

And in no other way.
It’s not possible to simply change the file programmatically, technically it’s probably real, but it’s definitely not right to do this because you need to overwrite the file every time, remove it from the DOM, and reload it so that the changes are saved. + The file will be shared by everyone. In short, the approach with the file should definitely be excluded.
Example:
https://jsfiddle.net/zjyeakc4/6/
UPD
If the SVG is really large, then you can include it as a file and leave it globally and add in it, for example: And then create another svg in the right place that will contain this element and make changes to it. And the main svg will pull it up <use href="#myCircle"

Answer 2

If your application works in a browser, then you definitely cannot change the file on the server using javascript
. Here you need a server backend.

Answer 3

You can just change the path in svg.

Answer 4

Here is a similar solution in a primitive form: https://bundlespace.com/intro/lessons/lesson-group...