How to Make SVG Maps

Some users have asked how to make SVG maps like the ones we have in our quizzes here and here.

It's a somewhat complicated process that took me a long time to learn. I hope that this article will save time for people who are trying to make maps of their own. Warning: This article assumes expert level computer skills.

Step 1: Getting the Raw Data

The first step in the process is getting the raw data we need. To make an SVG map, we will need either a "shape file" or a "geojson" file.

To get a shape file that contains all the countries, go to Natural Earth, then click "Download Countries".

You can also download a shape file with all regions of all countries under the heading "Admin 1 – States, Provinces".

In addition, many government entities offer these types of files as well. For example, the U.S. Census Bureau has a shape file for the counties of every state in the United States. If you need a specific file, try searching Google for "shape file" or "geojson file".

Note: You may have noticed that some of these files are very large and unwieldy! We will deal with this in the next step.

Step 2: Making and Simplifying GeoJson Files

The next step in the process involves taking a huge shape file or geojson file and making it into a geoson file of a useable size.

For that, we are going to use an awesome command line tool called MapShaper. You will need to install this program, including the prerequisite: Node.js.

Got that installed? Good! Let's practice making the geojson file that I used to make our Regions of France Quiz.

  • Download the shape file with all the regions of every country, found here. Once you've download it, unzip it. It will contain a directory with many files. Even though only one of these is a shape file (.shp), some of the other files are necessary so don't delete them.

  • Now, run this command:

    mapshaper -i ne_10m_admin_1_states_provinces/ne_10m_admin_1_states_provinces.shp snap -simplify visvalingam 5% -o format=geojson force admin1.geojson

    This command is doing several things. Let's break it down part by part.

  • -i ne_10m_admin_1_states_provinces/ne_10m_admin_1_states_provinces.shp

    This indicates the shape file we are using as an input.

  • snap

    This is necessary to fix errors in our geojson file. The source data has a problem where borders from neighboring regions don't align exactly. Running mapshaper with this keyword will fix these errors. Before I found mapshaper, dealing with these errors was extremely frustrating!

  • -simplify visvalingam 5%

    This "simplifies" our geojson, which results in a smaller geojson file with less detail. Without simplification, our output file would be 574 MB! You can vary the % to make the file smaller or larger depending on your needs. The lower the %, the smaller the file.

  • -o format=geojson force admin1.geojson

    Finally, this indicates that the output file will use the geojson format. The output file is admin1.geojson. The keyword "force" indicates that the output file will be overwritten if it already exists.

Step 3: Slicing GeoJson Files

Our file still contains every country of the world. Let's slice it to get just the country we want (in this case, France):

mapshaper -i admin1.geojson --filter "admin=='France'" -o format=geojson force france.geojson

We also want the neighboring countries on our map. Let's put them into a separate file.

mapshaper -i admin1.geojson --filter "admin=='Andorra' || admin=='Austria' || admin=='Belgium' || admin=='Germany' || admin=='Italy' || admin=='Liechtenstein' || admin=='Luxembourg' || admin=='Netherlands' || admin=='Spain' || admin=='Switzerland' || admin=='United Kingdom'" -o format=geojson force surrounding-regions.geojson

These neighboring countries are still broken up into their regions. Let's merge these regions together:

mapshaper -i surrounding-regions.geojson -dissolve admin -o format=geojson force surrounding-countries.geojson

At the end of this process, we have two .geojson files that we will use. One file, france.geojson, contains the regions of France. The second file, surrounding-countries.geojson, contains the countries that are near France.

If you are curious, I'd recommend opening these files in a text editor. Geojson is a human-readable format.

Step 4: Turning GeoJson into SVG

Now that we have geojson files we need to turn them into an SVG file that we can manipulate with a vector editing program like Inkscape.

To do this, we will use javascript.

Download and extract this zip file. It contains the two geojson files created in Step 3. It also contains a file named d3.js and another file named svgify.html

Open svgify.html in Firefox. Opening it in Chrome will not work due to cross-site scripting restrictions. However, you will be able to open it on Chrome if you access it through a local webserver.

In the browser, you should see the map of France and its neighboring countries. This might look pretty bad, but it will look sharp when you enlarge it in a vector graphics editor and edit the css:

Now, in the browser, right click the map and choose "Inspect Element". You should see the SVG code. Copy the SVG code and paste it into a text editor. Save the file as "france.svg". You now have an SVG file that you can edit with a vector editing program like Inkscape.

How does this work? The d3.js file is doing most of the heavy lifting. D3 stands for "Data-Driven Documents". Books have been written about D3, and I'm not an expert on how it works. I know just enough to make these maps.

If you open svgify.html in a text editor you will the code that tells d3 how to draw the map. You can edit this code to use different geojson input files or different map projections. In this case, we are using the Mercator projection. There's a lot you can do with d3, but it's beyond the scope of this article.

Final Thoughts

I realize this article is pretty technical. There's a lot I left out for the sake of brevity. If you have questions, please post them in the comments!

+1
level 58
Jun 28, 2016
Cool.
+1
level 56
Jun 28, 2016
Cool.
+1
level 59
Jun 28, 2016
Cool.
+1
level 28
Jun 29, 2016
Why does everybody say cool? I have a comment. Cool.
+1
level 58
Jun 29, 2016
Cool. Cool.
+1
level 51
Apr 17, 2017
.looC
+1
level 39
Jun 14, 2017
Warm.
+1
level 53
Sep 13, 2017
Hot
+1
level 46
Dec 21, 2017
Toasty
+1
level 54
Jul 14, 2019
Liquid nitrogen.
+1
level 73
Jul 4, 2016
This goes way over my head as a non-techie. If anyone wants to grab my 23 wards of Tokyo quiz and attach a map to it they are very welcome to!
+1
level 73
Jul 8, 2016
Speaking of Maps Mr Quizmaster, any chance of adding a map to this quiz? http://www.jetpunk.com/user-quizzes/64315/russian-oblasts-provinces-and-krais-territories Russia must be the last country of any significance without a map quiz.
+1
level 43
Nov 15, 2016
oh my gawd! that's my quiz! AWESOME! If the Quizmaster wants to create this quiz and save me having to learn all that confusing svg nonsense, then he is absolutely welcome to. Otherwise, looks like I've got some working to do. I'm currently working on making the Russia quiz more accepting of spellings, and getting rid of anything that is just completely wrong. After that, I'll give it a go. Thanks NZ, you're cool.
+1
level 73
Jan 5, 2017
Would love to see a map quiz. I've asked before and the quizmaster has cited time constraints as the reason he hasn't done it. Understandable as it is a big country with a lot of different regions. If you can do it mate, hats off to you.
+1
level 40
Oct 30, 2016
Any way I can get a Periodic Table SVG?
+1
level ∞
Oct 31, 2016
We use HTML not SVG to render our periodic table, so we don't have one. Sorry!
+1
level 30
Jan 20, 2018
I found one for this quiz. You can get it from Wikimedia Commons
+1
level 40
Jan 18, 2019
Which world map SVG did you use?
+1
level 47
Dec 19, 2016
I was lost with all the codings
+1
level 39
Apr 29, 2017
Me too.
+1
level 73
Jan 5, 2017
After one success at extracting the SVG from one featured quiz and creating the same quiz in another language, I'm keen to do more. I'm wanting to create a map for my 23 wards of Tokyo quiz. Is it easy to use what is already out there and modify it? For example Wikipedia uses the following map? https://en.m.wikipedia.org/wiki/File:Tokyo_23_Special_Wards_Area_Map.svg
+1
level 73
Jan 7, 2017
Scrap that, have gone to IT professional sister and IT professional brother in law to see if they can do the map for me. Now that's delegation!
+1
level 25
Feb 20, 2017
When I type the first command, it says: "-bash: mapshaper: command not found"
+1
level 47
Mar 18, 2017
This most likely means it's not installed globally. Don't forget -g flag, when you install by running npm i -g mapsharper
+2
level 40
Mar 12, 2017
Is there any way to make this sound simpler?
+1
level 39
Apr 29, 2017
I know. It's so confusing.
+1
level 66
Jul 11, 2017
What if you want a map of, say, the volcanoes of the West Indies? Would I have to make it myself? (P.S. That would not end well at all because I don't understand technology like this AT ALL :P)
+1
level 66
Feb 21, 2018
Good article. How do I go about taking an existing svg map and then adding points/cities to it to represent cities. My quiz would then look for the cities as answers and fill in the circles red/green if correct/incorrect.
+1
level 79
Aug 19, 2018
When I tried to extract the zip file in step 4 with WinRAR I got an error saying the file is corrupt. It doesn't work with Winzip either.
+1
level 79
Aug 19, 2018
When I downloaded the file with Chrome it worked. When I download it with Firefox for some reason it doesn't.
+4
level 54
May 12, 2019
Can you please make a short video about it, this would be so much easier to follow.
+1
level 60
Sep 13, 2019
Can't do this xd