How To Make a Simple SVG Map

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!

Please comment (even if it is just "I read it") so I can get a sense of how many people are reading this!

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!
+2
Level 51
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 72
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 48
May 28, 2020
Thanks! I've never tried with the screenshot thing. Good suggestion. Also, yes to the paragraphs!
+1
Level 66
Jul 8, 2020
So helpful for making my first SVG quiz, thanks!
+2
Level 48
Jul 8, 2020
Your welcome.
+1
Level 89
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.
+1
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 55
Jul 24, 2020
read it
+1
Level 47
Oct 3, 2020
How do I choose the countries I want in GeoJSON?
+1
Level 48
Oct 3, 2020
Click on them!
+1
Level 30
Oct 11, 2020
i read it.
+1
Level 56
Oct 19, 2020
A lot easier to digest this than the official blog. Thank you!
+1
Level 28
Oct 21, 2020
Thank you so much!
+1
Level 41
Nov 1, 2020
I read it and found it extremely helpful!
+1
Level 61
Nov 16, 2020
just read! this is super helpful
+1
Level 49
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 48
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 49
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 49
Jan 2, 2021
Is there possibly a Ctrl-something that will work?
+1
Level 49
Jan 3, 2021
It might just be my device :ccccc
+2
Level 48
Jan 3, 2021
Hmmmm, I'll check on Inkscape soon. Are you using the online version?
+1
Level 49
Jan 3, 2021
no idea
+1
Level 49
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 48
Jan 3, 2021
Did you ever download Inkscape?
+1
Level 49
Jan 3, 2021
I don't know but I don't think so.
+1
Level 49
Jan 3, 2021
So ummm.. How do you download Inkscape?
+2
Level 48
Jan 4, 2021
Click the link, press download on the left side, and choose options from there.
+1
Level 49
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 48
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 49
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 48
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 49
Jan 5, 2021
welp, guess I can't ever use a SVG :C
+2
Level 48
Jan 5, 2021
Try the onlilne version! No download required!
+1
Level 49
Jan 5, 2021
How do you get the online version? Do I search it up?
+2
Level 48
Jan 5, 2021
I gave you a link a few comments above. You could also search it up.
+1
Level 49
Jan 5, 2021
ok
+1
Level 49
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 48
Jan 5, 2021
What didn't work?
+1
Level 49
Jan 5, 2021
When I used the online version*
+2
Level 48
Jan 6, 2021
But what, when you did that, didn't work?
+1
Level 49
Jan 6, 2021
Ok let me explain from the beginning,
+1
Level 49
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 48
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 49
Jan 7, 2021
What green button? Is it the one that says enter? And thank you so much for helping!
+1
Level 49
Jan 7, 2021
I subscribed btw
+2
Level 48
Jan 7, 2021
Yes! The enter button!
+1
Level 49
Jan 7, 2021
ok
+1
Level 49
Jan 7, 2021
I will do that later because I have to go right now
+1
Level 49
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 49
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 38
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 3
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?
+1
Level 3
Jan 18, 2021
Make it become a different color, instead of yellow. For example,

In this quiz by Stewart

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

You can be my friend here!

+1
Level 49
Jan 22, 2021
Yay! You are now my friend!
+1
Level 34
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