Creedon,
I seem to have the same issue only I don't understand how to get the coordinates for the svg so that I can use your code pasted above.
Here is my image map code.
<img src="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631389ece3bb8d181406fac6/1662224879647/SA+Map+Background.png" usemap="#image-map">
<map name="image-map">
<area target="_top" alt="Train Depot" title="Train Depot" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382f99bf3e53d3dc2d6f3/1662223098308/Train+Depot.JPG" coords="220,313,133,238" shape="rect">
<area target="_top" alt="Santa Rosa" title="Santa Rosa" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382d4563f5e2b328ba35d/1662223061574/Santa+Rosa.JPG" coords="412,245,498,319" shape="rect">
<area target="_top" alt="St. Mary's" title="St. Mary's" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382e7c6eb82111a63cbd5/1662223080140/St.+Mary%27s+.JPG" coords="851,376,779,297" shape="rect">
<area target="_top" alt="Alamo Plaza" title="Alamo Plaza" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382616bfb513f9048792f/1662222947127/Alamo+Plaza.JPG" coords="1035,375,955,297" shape="rect">
<area target="_top" alt="Market Square" title="Market Square" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/63138293a9a17d3dc0338d85/1662222996856/Market+Square.JPG" coords="408,355,489,430" shape="rect">
<area target="_top" alt="Iron Bridge" title="Iron Bridge" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6313827fbe442a69e8908ff5/1662222976491/Iron+Bridge.JPG" coords="895,388,979,464" shape="rect">
<area target="_top" alt="Navarro School" title="Navarro School" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382a6c6eb82111a63bf56/1662223016248/Navaro+School.JPG" coords="233,582,319,661" shape="rect">
<area target="_top" alt="Wasp's Nest" title="Wasp's Nest" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6313830c9bfffb06c8e2fedf/1662223117500/Wasp%27s+Nest.JPG" coords="364,628,449,703" shape="rect">
<area target="_top" alt="San Pedro Creek" title="San Pedro Creek" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382be9bfffb06c8e2fab7/1662223038791/San+Pedro+Creek.JPG" coords="316,829,391,904" shape="rect">
<area target="_top" alt="Wesley House" title="Wesley House" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6313831f8f71a31aacfdf313/1662223135993/Wesley+House.JPG" coords="368,959,448,1034" shape="rect">
</map>
Here is the website where I am trying to place the code. https://aldapdobbs.squarespace.com/sa-map-2
Any assistance is greatly appreciated! Would love to understand how to convert these coordinates so that I can do it next time.