How To Make a Simple SVG Map

+15
Now, I'm sure if you have wanted to make an SVG map, you have probably read Quizmaster's article on it. Unfortunately, that article is complicated and hard to follow. (I got lost myself.) In this article, I'll show you how I made my Countries Bordering Sudan With a Map quiz. It's way simpler!

First, you're going to go to this site. Here, you can choose what countries/continents you want to have in your quiz. For me, I'm going to select, Sudan, South Sudan, Ethiopia, Eritrea, Central African Republic, Egypt, Libya, and Chad. Now, click build custom GeoJSON. Next, go to Mapshaper. Here you can drag you file in or select it from a folder. Once you have it in, you can simplify it. To do this, click simplify, and go from there. Then, to export the file, you click export, then SVG, then export. Finally, to edit your SVG, install Inkscape.

Once that is installed, open it and choose your file, or Ctrl-O. All your countries should be black and with no distinctive borders. Now, you are going to create a quiz. Open a text quiz and enter your answers in the answer section. Make sure to keep a column on the left open. Now, in Inkscape, click Edit- XML Editor. This should give you the paths to make things light up. For each answer, enter the path into the column to the left of your answers. Now, if you did it right, the answers will light up when you guess them!

Now, to edit the map, click on a country then press Ctrl-A. This should select all the countries. Then click on Object-Fill and Stroke. Next, select flat color, the icon just to the right of the X. Now, select a white color. This should make everything white. Now, to make one country not be white, just select that one and choose our color. The most common color on Jetpunk is ffff80ff. This is a yellow color. Finally, to add a border to our yellow country, we just click on stroke paint. It should give you a black border. Then, go to file, save as, and save it! Then, import it into your quiz!

I hope this satisfied your needs. If you have any questions then you can put them in the comments!

Note: I have recently figured out how to correct the sizing of your canvas. If when you try to upload your SVG to Jetpunk, and it says, "File has exceeded maximum size of 830 by 600 pixels." (Or something like that) If this happens, in Inkscape, go to File-Document Properties. From there, you should be able to make your countries smaller. (You can also do this by using the Object-Transform tool.) Then, click resize page to fit selection or drawing.

+2
Level 48
May 28, 2020
Feel free to use this strategy if you would like!
+3
Level 55
May 28, 2020
Nice! I usually screenshot the countries I want (including sorrounding countries and oceans), paste it onto Inkscape, and trace the entire thing. Helpful blog, but 1 suggestion: Can you seperate the blog into individual paragraphs?
+1
Level 74
May 28, 2020
Dodoma it would be much easier to just download the map on COTW and put that into inskcape to cut out the tracing entirely
+2
Level 25
Apr 29, 2021
SO HARD TO UNDERSTAND
+1
Level 48
Apr 29, 2021
What's confusing you?
+1
Level 23
Jul 25, 2022
i'm really new to svg, so quick question. when you trace the image, how do you get each region to be its own path? when I SS and Trace Image, only 1 path shows up. Do you have to manually code the d attribute for each region (bc thats so much work)? or is there an easier way to do it

Edit: do you trace each region individually so that it becomes its own path?

+1
Level 48
Aug 4, 2022
Tracing individually should work. I never did much tracing so I'm not the one to ask.
+1
Level 67
Jul 8, 2020
So helpful for making my first SVG quiz, thanks!
+1
Level 93
Jul 12, 2020
Is there a place to download a map with cities instead of countries? I'm trying to create a city quiz with a map.
+2
Level 48
Jul 12, 2020
Yes! You have to use the Jetpunk Dot Placer. Enter the coordinates for cities into this to get your map! If you need more help the SVG guide is good. You can also keep asking me!
+1
Level 57
Oct 3, 2020
How do I choose the countries I want in GeoJSON?
+1
Level 48
Oct 3, 2020
Click on them!
+1
Level 32
Oct 11, 2020
i read it.
+1
Level 60
Oct 19, 2020
A lot easier to digest this than the official blog. Thank you!
+1
Level 38
Oct 21, 2020
Thank you so much!
+1
Level 51
Nov 1, 2020
I read it and found it extremely helpful!
+1
Level 68
Nov 16, 2020
just read! this is super helpful
+1
Level 63
Jan 15, 2021
This is very confusing for me, I'm really not much of a coder or anything. I just want to make an svg map of my quiz Countries by overseas territories, and I don't know if it is actually possible. Could I make the territories that don't exist myself, or is that impossible to do in jetpunk?
+1
Level 48
Mar 29, 2021
I'm not sure I understand your question.
+1
Level 15
Jan 17, 2021
Just a question, is there a way to highlight something in a SVG? Being more specific, if I am making a Europe Map Quiz (I am not actually doing that obviously why would I reveal my idea) and I want to highlight certain countries/cities, what do I do?
+1
Level 48
Jan 17, 2021
What do you mean by highlight?
+2
Level 15
Jan 18, 2021
Make it become a different color, instead of yellow. For example,

In this quiz by Stewart

+2
Level 48
Jan 18, 2021
Copy Stewart's quiz to see the CSS used! 👍
+1
Level 15
Jan 18, 2021
Ok, thanks! :)
+1
Level 15
Jan 19, 2021
If the thing in the caveat was a CSS, I want to know HOW you figure that out... It was at least 300 characters long.
+1
Level 62
May 26, 2021
If you mean to change the countries colour, just change the colour on Inkscape and delete the class (the svg guide may be helpful as it explains it in more depth).
+1
Level 54
Jan 22, 2021
The best way to add XML in your svg is to simply open any file with XML markup and then copy and paste or draw any SVG. The XML markup will be automatically added
+1
Level 58
Feb 18, 2021
Thank you ducklingpanda1245!

(Also thank you for being my friend)

+1
Level 57
Mar 2, 2021
Read it
+1
Level 58
Mar 6, 2021
The parts below the XML editor thing and the XML editor part confuse me.
+1
Level 48
Mar 15, 2021
Hmm, what confused you?
+1
Level 31
Mar 22, 2021
I have looked all over jet punk and I am very, very confused and lost! Your article helps but I am totally lost on paths, say I wanted to do cities in New Zealand Quiz, how would I get it to have all the dots and have then selected the dot and click the answer. If you don't know, can you please point me to some articles that explain this?
+2
Level 48
Mar 23, 2021
To put the dots, go to the dot placer. I can link that if you like. Then, find the coordinates for each city. Stewart has good tutorials on this, and the formatting. For paths, the dot placer can change that. Again, stewarts guide explains that. If you have more questions, just ask!
+1
Level 65
Mar 24, 2021
Say I was making the quiz, modern-day countries of the Parthian empire on a map, (which I am not.) Since it covers a part of Pakistan, what would I do to make Pakistan the shape I want it to be.
+1
Level 48
Mar 24, 2021
Trace the map you are using in Inkscape. I am not an expert on this, so I would ask others for more help. :)
+1
Level 41
Apr 3, 2021
Thanks.
+2
Level 50
Jun 13, 2021
If I wanna break apart my uploaded image on Inkscape, how do I do that? In other words, make multiple paths when you select a part of the image?
+1
Level 48
Jun 14, 2021
I haven't been on Inkscape in a while. So for example if you selected a square, you want to break it into two paths? I think Stewart can help in his SVG guide. I'll look into it.
+1
Level 22
Jul 9, 2021
Thank you so much! This helped a lot!
+1
Level 53
Jul 14, 2021
Wow, really helpful! Though, when I try and upload it to my quiz, it says "Unable to find height attribute in SVG tag. Make sure it is in pixels." Do you know how to fix this?
+2
Level 48
Jul 14, 2021
I'm not sure, but when you go to inkscape, attempt to make sure your height is in pixels, and not inches or something else.
+1
Level 53
Jul 15, 2021
So it worked, but now my SVG doesn't show up when I preview!
+1
Level 48
Jul 15, 2021
Hmm, could you screenshot it or something?
+1
Level 53
Jul 15, 2021
Screenshot how it looks on JetPunk or Inkscape? I think it may have to do with the width though. Ideally, what should the width and height on Inkscape be?
+1
Level 48
Jul 15, 2021
I thought screenshot jetpunk. I think for the map should be something by 830. Haven't been on Inkscape in a while though...
+1
Level 53
Jul 16, 2021
Now it works, but I have run into a problem, on the final step, this shows up:

Some answers in Step 2 have an invalid path id or class associated to them! The following require a non-empty valid class or id in the left-most column of Step 2:

I have typed the paths as shown on Inkscape. E.g. for Botswana, I have done . Unsure if this is right or wrong.

+1
Level 53
Jul 16, 2021
< svg:path id= "path34"> or something is the path I have typed
+1
Level 48
Jul 16, 2021
For that you would just type path 34.
+1
Level 53
Jul 18, 2021
Okay, sorry I keep bothering you, but now I've done exactly what you said, and the main country (Sudan, in yours, I won't tell you what mine is) appears, but the bordering ones do not, even though I have typed all the paths correctly, etc.
+1
Level 48
Jul 18, 2021
Don't be sorry my friend. It's fine. If you'd like, add me as a collaborator. If you'd like to keep it to yourself, I'm not sure what you mean. Is the SVG blank, or when you preview the quiz is it messed up.
+1
Level 53
Jul 18, 2021
Yeah, so now the problem is that when the countries are guessed, they don't turn green like on most quizzes, something else happens ... you can see, the link is here. I've collaborated it with you, and thanks for helping me, I really appreciate it.
+1
Level 36
Oct 12, 2021
I don't understand what you mean by "keeping a column on the left open" while entering the answers. Do you mean the "Hint" column?
+1
Level 23
Dec 14, 2021
So... there's no coding?
+2
Level 48
Dec 15, 2021
Nope.
+1
Level 35
Apr 15, 2022
I resized the SVG but its size didn't changed.
+1
Level 35
May 7, 2022
I dont understand what to do when you say "This should give you the paths to make things light up. For each answer, enter the path into the column to the left of your answers."
+1
Level 48
May 8, 2022
It should display words saying things such as "path56" put that into a column on the left in jetpunk.
+1
Level 53
Nov 9, 2022
how can you draw a custom map like Dekkie does