0

svg en html

¿Cuál sería la forma correcta de poder añadir hipervínculos a diferentes elementos en un archivo SVG que no sea dentro del html?

He vectorizado una imagen en illustrator y la exporté como SVG. Sería una especie de "mapa mundial" entonces cada sector de la imagen al hacer click llevaría a un sector diferente dentro de la web. Solo pude lograrlo utilizando la etiqueta "a" dentro del html, el problema es que el SVG tiene más de 12 mil lineas de código y se hace muy pesado.

5
  • No entiendo tu pregunta. Quieres un link que esté fuera del svg y que al presionarlo te lleve a un elemento del svg??? o un link que esté dentro del svg y que te lleve a otro lado??? o otra cosa?
    – Yussef
    Commented el 6 nov. 2022 a las 19:12
  • Claro, yo quisiera poder ponerle un link al archivo .svg, se entiende? la única forma de poner links que conozco es con la etiqueta a "DENTRO del html" pero si yo inserto el codigo de mi svg en el html es un código inmenso de más de diez mil lineas. siempre veo los ejemplos y usan svg con iconos o figuras geometricas y son pequeños, pero mi archivo tiene muchas cosas y es muy grande. Commented el 6 nov. 2022 a las 20:13
  • <a href="www.algo.com"><img src="misvg.svg" /></a> esto?
    – Yussef
    Commented el 6 nov. 2022 a las 20:19
  • Claro! exactamente eso! pero sería solamente un link para una imagen en general. Y lo que yo quiero hacer es ponerle a distintos sectores del svg links distintos. para que te des una idea es como tener un mapa de "sudamerica" con todos los paises hecho en SVG, y que al hacer click en "Colombia" te lleve al wikipedia de colombia, al hacer click en "Brasil" al wikipedia de brasil y asi. Commented el 6 nov. 2022 a las 20:52
  • aahh ya entiendo
    – Yussef
    Commented el 6 nov. 2022 a las 21:02

1 respuesta 1

0

Supongamos que tenemos el siguiente SVG

introducir la descripción de la imagen aquí

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

6
  • Excelente tu aporte!!! me fue de muchísima ayuda estoy implementándolo en lo que estoy haciendo, no sabía que podía dentro del archivo .svg añadir scripts y estilos. Commented el 6 nov. 2022 a las 23:39
  • Y una pregunta más, disculpas quizás es una tontería! pero en caso de querer en lugar de abrir un url, abrir con el target _self un documento html dentro de mi mismo proyecto, es posible? Gracias nuevamente! Commented el 6 nov. 2022 a las 23:41
  • @DenisseSelene No habría problema en usar _self. Básicamente y en teoría, puedes hacer lo mismo que en html, incluso podrías hacer toda el sitio en un svg
    – Yussef
    Commented el 6 nov. 2022 a las 23:45
  • Realmente muy interesante, soy nueva en esto de utilizar svg, estoy investigando más a fondo, pero esto que me comentas realmente no lo sabía! muy útil! de verdad. Probé con _self y no tuve problemas! pero lo que no logro es poder abrir un html de mi mismo proycto es decir por ejemplo onclick="ir(miProyecto/home.html')" Commented el 6 nov. 2022 a las 23:49
  • @DenisseSelene a ese código le falta una debería ser comillaonclick="ir('miProyecto/home.html')" también puedes probar con un slash onclick="ir('/miProyecto/home.html')". Como concejo aparte: 12 mil líneas puede ser mucho para que un navegador lo renderice bien (problemas de performance), si te sucede eso, deberás simplificar los objetos svg, seguramente ilustrator debe traer una herramienta para ello
    – Yussef
    Commented el 6 nov. 2022 a las 23:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.