Supongamos que tenemos el siguiente SVG
Y queremos que el cuadrado rojo vaya a google.com y el amarillo vaya a stackoverflow
El código del SVG sería el siguiente:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="73.901817mm"
height="32.74506mm"
viewBox="0 0 73.901817 32.74506"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<g transform="translate(0.13229229,0.57723132)">
<rect class="pais" onclick="ir('http://www.google.com')"
style="fill:#cf0000;fill-opacity:1;stroke:#000000;stroke-width:0.264583"
id="rect234"
width="33.37035"
height="32.035534"
x="-7.9494208e-07"
y="-0.44493982" />
<rect class="pais" onclick="ir('https://es.stackoverflow.com/')"
style="fill:#cf8d00;fill-opacity:1;stroke:#000000;stroke-width:0.264583"
id="rect234-7"
width="33.37035"
height="32.035534"
x="40.266884"
y="1.9396143e-06" />
</g>
<style>
.pais:hover{
stroke-width:0.8 !important;
stroke:blue !important;
cursor:pointer;
}
</style>
<script>
function ir(url){
window.open(url, '_blank');
}
</script>
</svg>
A cada elemento le agregué el evento onclick que llama a la función "ir" y cuyo argumento tiene la url destino. Además agregué una clase "pais" para dar estilo.
Abajo del SVG incluí estilos y scripts como si se tratase de un html, donde la función ir llama a window.open
El estilo hace que cuando nos posicionemos arriba del documento cambie el cursor y el borde del elemento.
Ahora el truco es incluir este SVG como object al html, de esta manera:
<html>
<head>
</head>
<body>
<object type="image/svg+xml" data="https://yussef77.github.io/pruebas/demo.svg" ></object>
</body>
</html>
Update
Al parecer y por alguna razón no funciona dentro del espacio para probar código de StackOverflow.
ver SVG
Pero este método funciona incluso con el SVG directo