How To Make a Simple SVG Map
Last updated: Monday January 29th, 2024
Report this blog
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. :)
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
In this quiz by Stewart
You can be my friend here!
(Also thank you for being my friend)
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.
There’s no actual way to download Inkscape on any of Apple’s mobile devices. The best you could do is apps like Adobe, Sketchbook, and Procreate (well I’m broke so scratch that last one).
I'm don't know of any other websites unfortunately, so you'd be better suited asking someone else or exploring on your own. Sorry I can't help you with that.