How to place svg not in a square block, but so that hover is carried out only along the borders of this SVG?

Question

css

The most striking example is maps.
There are a lot of svg elements that fit tightly together with jagged borders.
By positioning these SVGs with an img tag we get a square box for interaction
. Using svg>use is also a square box.
To interact with the mouse, this is absolutely inconvenient, because it is necessary that each SVG be independent and not overlap (s) with other (s)
How then to implement it?

Answer 1

"5 years of web development" (c)
Let's think... How else can you put svg on a page? What other options are there? Except <img>...
ps https://jsfiddle.net/p6Lc3nco/