How to Make a Clickable SVG Map With HTML and CSS

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:

Document Tour Afrique

3. 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>

This will make the map to show in your browser.

Document

4. 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 specific path elements with IDs corresponding to their country names. They set the fill color for each country.
path: This targets all path elements on the webpage. It sets the fill color to #1da1f2.
path:hover: This targets all path 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.

Document

Try 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.