SVG, o Scalable Vector Graphics, es un formato de imagen versátil que se puede utilizar en una amplia gama de aplicaciones, desde el diseño web para imprimir los medios de comunicación y visualización de datos.
La escalabilidad, el pequeño tamaño de archivo y la accesibilidad de las imágenes SVG hacen de este formato una opción popular entre diseñadores y desarrolladores.
Los mapas son una poderosa herramienta para la visualización de datos, ya que proporcionan una representación visual de los datos que puede ayudar a los espectadores a comprender patrones y relaciones que pueden no ser evidentes en otros tipos de visualizaciones.
En este artículo aprenderás a crear mapas interactivos con HTML y CSS. Estos mapas seguirán siendo ligeros porque utilizaremos SVG.
Si tienes conocimientos básicos de HTML y CSS podrás entender este tutorial.
¿Qué es un Mapa SVG?
Los mapas SVG están basados en vectores, lo que significa que los elementos del mapa están definidos por ecuaciones matemáticas en lugar de píxeles. Esto permite ampliarlos o reducirlos sin perder calidad.
¿Cuáles son las Ventajas de un Mapa SVG?
Algunas de las ventajas de utilizar mapas SVG son
- Escalabilidad: Los mapas SVG pueden ampliarse o reducirse sin perder calidad, lo que los hace ideales para su uso en diseño web responsivo o para imprimirlos en diferentes tamaños.
- Personalización: Los mapas SVG pueden personalizarse fácilmente para adaptarse a necesidades específicas, como cambiar los colores, añadir etiquetas o modificar el tamaño y la forma de los elementos del mapa.
- Interactividad: Los mapas SVG pueden hacerse interactivos mediante el uso de JavaScript y CSS, lo que permite a los espectadores pasar el ratón por encima o hacer clic en elementos específicos para ver información más detallada.
- Accesibilidad: Los mapas SVG pueden ser leídos por tecnologías de asistencia, como lectores de pantalla, lo que los hace más accesibles a las personas con discapacidad.
- Compatibilidad entre plataformas: Los mapas SVG pueden mostrarse en una amplia gama de dispositivos y navegadores, lo que los convierte en una opción versátil para aplicaciones basadas en web.
Ejemplo de Mapas SVG en la Realidad
Stears y la BBC han utilizado SVG Maps para visualizar datos electorales. Los usuarios pueden hacer clic en una región para ver la distribución de los votos emitidos. Más información aquí.
¿Qué Vamos a Construir?
En este tutorial, estamos construyendo un Mapa interactivo de África.
Tiene 2 características:
- Los usuarios pueden pasar el ratón por encima para ver el nombre de un país.
- Los usuarios pueden hacer clic en un país para ver más información en Wikipedia.
Cómo Construir Mapa Interactivo con HTML
Obtener el mapa SVG de África
Puedes crear un mapa SVG utilizando software de gráficos vectoriales como Adobe Illustrator o Inkscape, o con código utilizando bibliotecas como D3.js o Leaflet.
También puedes descargar mapas SVG de Wikipedia utilizando una licencia creative-commons. Haz clic aquí para ver el mapa que utilizaremos en este tutorial.
Crear la estructura HTML básica
Necesitamos una estructura HTML básica, que tendrá el siguiente aspecto:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mapa Interactivo con HTML</title>
</head>
<body>
<span> Mapa de África </span>
</body>
</html>Este HTML nos dará hasta ahora el siguiente resultado:
Importar el archivo de mapa SVG
Para importar un archivo de mapa SVG a un documento HTML, puedes usar la etiqueta <object>, <img> o <svg>.
Lo haremos usando la etiqueta <svg>.
Primero, abre tu archivo HTML en un editor de texto. A continuación, añade el mapa SVG descargado a la sección donde quieras que aparezca:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mapa Interactivo con HTML</title>
</head>
<body>
<section>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
>
... todos los path del país están aquí ...
</svg>
</section>
</body>
</html>Esto hará que el mapa se muestre en tu navegador.
Anidar cada ruta en una etiqueta de anclaje
En nuestro SVG hay varias etiquetas path. Cada una de ellas describe un país. Queremos que al pasar el ratón por encima de cada país aparezca su nombre. Y al hacer clic en ese país, deberíamos ser llevados a su página de Wikipedia.
<a xlink:title="Mali" xlink:href="https://en.wikipedia.org/wiki/Mali" target="_blank" id="malic">
<path
inkscape:connector-curvature="0"
d="..."
id="Mali"
/>
</a>En el código anterior, hemos anidado el path en una etiqueta anchor. La etiqueta anchor tiene el atributo title, que muestra el nombre del país al aparecer. Además, tiene href, que nos permite visitar la página de Wikipedia al hacer clic en ese enlace. target="_blank" se asegura de que el enlace se abra en una nueva pestaña.
Puede que notes el prefijo xlink en los atributos. Esto es compatible con versiones anteriores del navegador. Puedes utilizar el atributo obsoleto xlink:href como alternativa al atributo href. Más información aquí.
Cómo dar estilo al mapa SVG
Podemos dar estilo a nuestro mapa SVG utilizando CSS.
Los atributos comunes en los estilos del path SVG son fill (relleno), stroke (trazo) y stroke-width (ancho del trazo). Por ejemplo, si dibujas un trazado rectangular, puedes utilizar el fill para hacerlo azul.
<svg>
<style>
rect {
fill: blue;
}
</style>
<rect x="10" y="10" width="500" height="100"></rect>
</svg>El resultado, es algo similar a:
Ahora podemos dar diferentes colores a los países seleccionados. Además, deberíamos tener algún tipo de respuesta visual al pasar el ratón por encima de un país.
<style>
#mapsection {
width: 50%;
height: auto;
fill: #ccc;
stroke: #333;
stroke-width: 2;
}
#mali {
fill: brown;
}
#Benin {
fill: #00baba;
}
#Nigeria {
fill: yellow;
}
#Zimbabwe {
fill: brown;
}
#Zambia {
fill: green;
}
#Somalia {
fill: darkseagreen;
}
#Mali {
fill: gray;
}
path {
fill: #1da1f2;
}
path:hover {
fill: purple;
stroke: red;
stroke-width: 3px;
transition: fill 0.4s;
}
</style>El bloque anterior de código CSS da estilo a los elementos de nuestro mapa. He aquí una explicación de cada regla:
mapsection: Se aplica a los elementos SVG con el ID mapsection. Establece la anchura en 50%, la altura en auto y las propiedades de stroke para el elemento.#mali,#Benin,#Nigeria,#Zimbabwe,#Zambiay#Somalia: Se dirigen a elementos de ruta (path) específicos con ID correspondientes a los nombres de sus países. Establecen el color de relleno (fill) para cada país.path: Se dirige a todos los elementos depath(ruta) de la página web. Establece el color de relleno (fill) en #1da1f2.path:hover: Se aplica a todos los elementospathde la página web cuando se pasa el ratón por encima de ellos. Establece el color de relleno (fill) en púrpura, el color de trazo (stroke) en rojo y el ancho de trazo (stroke width) en 3px. También establece un efecto de transición para el cambio de color de relleno (fill).
Prueba a hacer clic en cada país. La etiqueta anchor abrirá una nueva página y mostrará más información.
- Encuentra el código completo aquí.
Conclusión
En este tutorial se explica cómo crear un mapa SVG en el que se puede hacer clic mediante la configuración del archivo HTML, la adición de interactividad con CSS (incluidos los efectos hover y clic) y la adición de funcionalidad mediante la vinculación de áreas del mapa a páginas web externas. También hemos hablado de las ventajas de utilizar mapas SVG.
