How to set up following link in svg?

Question

JavaScript

Hello.
We have an svg file that needs to be inserted into the page. The file consists of several elements, when you click on any element, you must follow the link that is attached to this element.
It should look something like this:

<img class="img" src="img.svg" data-link-1="/link1.html" data-link-2="/link2.html" />

What are some ideas?
ps: The project uses bootstrap and jquery.

Answer 1

as I understand it, it's better not to do it through img, but if jQuery, then

<div class="img" data-link-1="/link1.html" data-link-2="/link2.html" ></div>

var svg=$('div.img').load("file.svg",  function(){
  $('a:eq(0)', this).attr('xlink:href', $(this).data('link-1'))
  $('a:eq(1)', this).attr('xlink:href', $(this).data('link-2'))
});

Fixed, it's better to make a container a div thread, maybe even with inline-block, so that the dimensions and proportions are the same as those written in svg

Answer 2

maybe I'll write something stupid

<a href=""><img src="file.svg">Перейти куда надо</a>