How To Make a Simple SVG Map

+23
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!

To edit the map, click on a country then press Ctrl-A. This should select all the countries. Click on Object-Fill and Stroke. Next, select flat color, the icon just to the right of the X. 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.

I realize this is from a while ago, and I don't even know if it still works. If anyone still uses this let me know and I can try and update it. I also realize the borders from these quizzes look odd, and the answered countries show up without borders at all. This could use a major revamp. :)
+2
Level 52
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 75
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
+3
Level 25
Apr 29, 2021
SO HARD TO UNDERSTAND
+1
Level 52
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 52
Aug 4, 2022
Tracing individually should work. I never did much tracing so I'm not the one to ask.
+1
Level 69
Jul 8, 2020
So helpful for making my first SVG quiz, thanks!
+1
Level 95
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 52
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 64
Oct 3, 2020
How do I choose the countries I want in GeoJSON?
+1
Level 52
Oct 3, 2020
Click on them!
+1
Level 32
Oct 11, 2020
i read it.
+2
Level 61
Oct 19, 2020
A lot easier to digest this than the official blog. Thank you!
+1
Level 39
Oct 21, 2020
Thank you so much!
+1
Level 53
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 51
Jan 2, 2021
I put in my file of my SVG and the countries were black with no distinctive borders like you said in your blog they were supposed to be so that is all good but, I don't see Edit- XML Editor that you said to click on. What do I do? :o
+2
Level 52
Jan 2, 2021
Great question! Click. "Edit" at the top of the screen. Then, you should get a list of options below. Click on XML Editor from those options.
+1
Level 51
Jan 2, 2021
What happens if I can't see the word 'Edit' I don't see any words at all actually just my SVG with my countries in black and stuff with a total white background and kinda grey borders that are not very distinctive
+1
Level 51
Jan 2, 2021
Is there possibly a Ctrl-something that will work?
+1
Level 51
Jan 3, 2021
It might just be my device :ccccc
+2
Level 52
Jan 3, 2021
Hmmmm, I'll check on Inkscape soon. Are you using the online version?
+1
Level 51
Jan 3, 2021
no idea
+1
Level 51
Jan 3, 2021
All I did was click your link to Inscape then created an account because I have never used Inkscape then clicked ctrl-O and inserted my file
+2
Level 52
Jan 3, 2021
Did you ever download Inkscape?
+1
Level 51
Jan 3, 2021
I don't know but I don't think so.
+1
Level 51
Jan 3, 2021
So ummm.. How do you download Inkscape?
+2
Level 52
Jan 4, 2021
Click the link, press download on the left side, and choose options from there.
+1
Level 51
Jan 4, 2021
Can you be a teeny bit more specific I don't quite understand because there are 2 different things saying download one of the things saying download is in between 2 buttons the button to the left it says about and to the right it says new and the other thing that says download says Download Now! Get the professional vector graphics editor! What do I click?
+2
Level 52
Jan 4, 2021
Sure. Scroll down until you find download now. Then, choose your device. Windows etc. Then, choose the 32 or 64 bit version. That's your choice. Finally, choose of of the last 4 options to download. Keep asking questions if your confused!
+1
Level 51
Jan 4, 2021
I still have questions, sorry for keeping you occupied. What happens if you are using a Chromebook? What device do you choose?
+2
Level 52
Jan 4, 2021
No harm in asking questions. Gives me something to do. :) There is an online version of Inkscape, but I have never used it. Pandora49 knows more about it (I think). A quick google search gives me this. I don't think you can download it on a Chromebook.
+1
Level 51
Jan 5, 2021
welp, guess I can't ever use a SVG :C
+2
Level 52
Jan 5, 2021
Try the onlilne version! No download required!
+1
Level 51
Jan 5, 2021
How do you get the online version? Do I search it up?
+2
Level 52
Jan 5, 2021
I gave you a link a few comments above. You could also search it up.
+1
Level 51
Jan 5, 2021
ok
+1
Level 51
Jan 5, 2021
I tried but it still didn't work I even tried making two new SVG's to see if it would work with them Edit- XML Editor. I don't think I will ever be able to make an SVG even if we try our hardest to make me an SVG...
+2
Level 52
Jan 5, 2021
What didn't work?
+1
Level 51
Jan 5, 2021
When I used the online version*
+2
Level 52
Jan 6, 2021
But what, when you did that, didn't work?
+1
Level 51
Jan 6, 2021
Ok let me explain from the beginning,
+1
Level 51
Jan 6, 2021
I saw your message to go to the online version and I scrolled up the comments and found your link to the online version, then I clicked on it, it sent me to a place called Inescapable online version 0.92 according to what it said it was on the tab and I it said "RUN DESKTOPS ONLINE" at the top and then a bunch of boring stuff that I was to lazy to read, then I click on my keyboard ctrl-o and put in my file and then click open and it opened up my file but when I scroll up, but I still don't see something saying Edit- XML Editor. What do I do now? I am so worried, frustrated and down right sad... (That sounds like a movie I once saw but that is not the point)
+2
Level 52
Jan 6, 2021
Click on the link, then press the green enter button. Enter your name to use, and then it should work! I'm sorry you feel that way. :(
+1
Level 51
Jan 7, 2021
What green button? Is it the one that says enter? And thank you so much for helping!
+1
Level 51
Jan 7, 2021
I subscribed btw
+2
Level 52
Jan 7, 2021
Yes! The enter button!
+1
Level 51
Jan 7, 2021
ok
+1
Level 51
Jan 7, 2021
I will do that later because I have to go right now
+1
Level 51
Jan 11, 2021
It did not work, I think it is just because of my device. I probably will never make an SVG.
+1
Level 51
Jan 13, 2021
It said:

Enter username and password

Username only with chars [A-Z][a-z][0-9].

Choose a password if this is the first time your enter in

OffiDocs

+1
Level 52
Feb 8, 2021
Yes, use your username. Then, at the top it should give an edit option.
+1
Level 65
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 52
Mar 29, 2021
I'm not sure I understand your question.
+1
Level 14
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 52
Jan 17, 2021
What do you mean by highlight?
+2
Level 14
Jan 18, 2021
Make it become a different color, instead of yellow. For example,

In this quiz by Stewart

+2
Level 52
Jan 18, 2021
Copy Stewart's quiz to see the CSS used! 👍
+1
Level 14
Jan 18, 2021
Ok, thanks! :)
+1
Level 14
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 66
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 51
Jan 21, 2021
ducklinpanda1245 wanna be my friend??????

You can be my friend here!

+1
Level 51
Jan 22, 2021
Yay! You are now my friend!
+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 61
Feb 18, 2021
Thank you ducklingpanda1245!

(Also thank you for being my friend)

+1
Level 62
Mar 2, 2021
Read it
+1
Level 61
Mar 6, 2021
The parts below the XML editor thing and the XML editor part confuse me.
+1
Level 52
Mar 15, 2021
Hmm, what confused you?
+1
Level 30
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 52
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 71
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 52
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 40
Apr 3, 2021
Thanks.
+2
Level 55
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 52
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 52
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 52
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 52
Jul 15, 2021
So it worked, but now my SVG doesn't show up when I preview!
+1
Level 52
Jul 15, 2021
Hmm, could you screenshot it or something?
+1
Level 52
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 52
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 52
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 52
Jul 16, 2021
< svg:path id= "path34"> or something is the path I have typed
+1
Level 52
Jul 16, 2021
For that you would just type path 34.
+1
Level 52
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 52
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 52
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 48
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 24
Dec 14, 2021
So... there's no coding?
+2
Level 52
Dec 15, 2021
Nope.
+1
Level 38
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 52
May 8, 2022
It should display words saying things such as "path56" put that into a column on the left in jetpunk.
+1
Level 61
Nov 9, 2022
how can you draw a custom map like Dekkie does
+1
Level 65
Mar 10, 2023
Thank You so much it took me like 4 hours but I made it WORK!!
+1
Level 48
Nov 1, 2023
how do I select the country I can only select south sudan
+1
Level 45
Jan 25, 2024
Thank you! Here's the quiz: Countries that border Russia
+1
Level 34
Mar 19, 2024
Thank you very much for your explanation of how to create a quiz with your own map ;). I only have one question: How do I get color on my SVG map. Because for me, when I upload it to Jetpunk, the website makes the map gray with white borders, while I colored them in Inkscape with the standard colors of Jetpunk maps. maybe i found it. which blend mode must I choose at fill and stroke?
+1
Level 52
Mar 27, 2024
Changing the color should work, if it doesn't, you can play with changing classes and having set class fill colors. I'm no expert at this, but Stewart and others can help. With the addition of Jetpunk maps being added, a different route would be to download a Jetpunk map and then resize it to fit your needs.