SVG, or Scalable Vector Graphics, is a versatile image format that you can use in a wide range of applications, from web design to print media and data visualization.
The scalability, small file size, and accessibility of SVG images make this format a popular choice among designers and developers.
Maps are a powerful tool for data visualization, providing a visual representation of data that can help viewers understand patterns and relationships that may not be evident in other types of visualizations.
In this article, you will learn how to make interactive maps using HTML and CSS. These maps will remain light-weight because we'll be using SVGs.
If you have basic knowledge of HTML and CSS you'll be able to understand this tutorial.
Here's what we'll cover:
I. Introduction
- What Is an SVG Map?
- What Are the Benefits of an SVG Map?
II. How to Set Up the HTML File
- How to Create the Basic HTML Structure
- How to Import the SVG Map File
- How to Set Up the
div
Container for the Map
III. How to Add Interactivity with CSS
- How to Style the SVG Map
- How to Add Hover Effects
- How to Add Click Effects
IV. How to Add Functionality
- How to Link Areas of the Map to External Webpages
V. Conclusion
- Recap of Steps to Make a Clickable SVG Map
- Final Thoughts and Suggestions for Further Customization
What Is an SVG Map?
SVG maps are vector-based, meaning that the map elements are defined by mathematical equations rather than pixels. This allows you to scale them up or down without losing quality.
What Are the Benefits of an SVG Map?
Some benefits of using SVG maps include:
- Scalability: SVG maps can be scaled up or down without losing quality, which makes them ideal for use in responsive web design or for printing at different sizes.
- Customizability: SVG maps can be easily customized to suit specific needs, such as changing colors, adding labels, or modifying the size and shape of map elements.
- Interactivity: SVG maps can be made interactive through the use of JavaScript and CSS, allowing viewers to hover over or click on specific elements to see more detailed information.
- Accessibility: SVG maps can be read by assistive technologies such as screen readers, making them more accessible to people with disabilities.
- Cross-platform compatibility: SVG maps can be displayed on a wide range of devices and browsers, making them a versatile choice for web-based applications.
Example Of SVG Maps In the Wild
Stears and The BBC used SVG Maps to visualize election data. Users can click on a region to see the distribution of ballots cast. See here for more info.
What Are We Building?
In this tutorial, we are building Tour Afrique
, an interactive map of Africa.
It has 2 features:
- Users can hover to see the name of a country.
- Users can click on a country to see more information on Wikipedia.
How to Build Our Interactive Map of Africa
1. Get the SVG Map of Africa
You can create an SVG map using vector graphics software such as Adobe Illustrator or Inkscape, or with code using libraries such as D3.js or Leaflet.
You can also download SVG maps from Wikipedia using a creative-commons license. Click here for the map we'll use in this tutorial.
2. Create the basic HTML structure
We need a basic HTML structure, which will look like this:
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<span> Tour Afrique </span>
</body>
</html>
This HTML will give us the following result so far:
<!DOCTYPE html>
Document Tour Afrique3. Import the SVG map file
To import an SVG map file to an HTML document, you can use the <object>
, <img>
, or <svg>
tag.
We'll do so using the <svg>
tag:
First, open your HTML file in a text editor. Then add the downloaded SVG map to the section where you want it to appear:
<!DOCTYPE html>
<html lang="en">
<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>Document</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#"
>
... all the country paths are here ...
</svg>
</section>
</body>
</html>
<!DOCTYPE html>
Document4. Nest each path in an anchor tag
There are several path
tags in our SVG. Each of them describes a country. We want to hover on each country to see the name of the country. And on clicking that country, we should be taken to its Wikipedia page.
<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>
In the code above, we've nested the path
into an anchor
tag. The anchor
tag has the attribute title
which shows the country name on-hover. Also, it has href
which allows us to visit the Wikipedia page on clicking that link. target="_blank"
makes sure that the link opens in a new tab.
You may notice the xlink
prefix on the attributes. This supports earlier browser versions. You can use the deprecated xlink:href
attribute as a fallback in addition to the href attribute. See more info here.
5. How to style the SVG map
We can style our SVG map using CSS.
The common attributes in SVG path styles are fill
, stroke
, and stroke-width
. For example, if you draw a rectangular path, then you can use fill
to make it blue.
<svg>
<style>
rect {
fill: blue;
}
</style>
<rect x="10" y="10" width="500" height="100"></rect>
</svg>
Now, we can give select countries different colors. Also, we should have some sort of visual feedback when hovering over a country.
<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>
The above block of CSS code styles elements on our map. Here is an explanation of each rule:
#mapsection
: This targets SVG elements with the ID mapsection. It sets the width to 50%, height to auto, and stroke properties for the element.#mali
,#Benin
,#Nigeria
,#Zimbabwe
,#Zambia
, and#Somalia
: These target specificpath
elements with IDs corresponding to their country names. They set the fill color for each country.path
: This targets allpath
elements on the webpage. It sets the fill color to #1da1f2.path:hover
: This targets allpath
elements on the webpage when they are hovered over with the mouse. It sets the fill color to purple, stroke color to red, and stroke width to 3px. It also sets a transition effect for the fill color change.
<!DOCTYPE html>
Document 1000 km 1000 km 1000 mi 1000 mi 0 0 0 0Try clicking on each country. The anchor tag will open a new page and show more information.
Click here to see the live demo.
Find the complete code here.
Conclusion
This tutorial explained how to create a clickable SVG map by setting up the HTML file, adding interactivity with CSS (including hover and click effects), and adding functionality by linking areas of the map to external web pages. We also discussed the benefits of using SVG maps.
References
There are plenty of resources available to learn more about SVGs. Here are some resources you can look up:
- MDN Web Docs - SVG: MDN Web Docs is a great resource for learning about web development, including SVG. The SVG section covers everything from basic concepts to advanced topics.
- SVG on CSS-Tricks: CSS-Tricks is a popular blog about web development and design. The SVG section covers a range of topics, including how to create SVG graphics, animation, and interactivity.
- Xutini Tutorials: the fun way to learn web digital skills.
- SVG Pocket Guide: SVG Pocket Guide is a book by Joni Trythall that covers the basics of SVG, including shapes, paths, text, and filters. It's a concise guide that's easy to read and follow.
- SVG Animations: SVG Animations is a book by Sarah Drasner that covers the basics of SVG animations, including how to create and control animations using CSS and JavaScript.