The basics of SVGs, downloading Inkscape and making your first SVG for JetPunk.
Making quizzes with SVGs, JetPunk Standard SVGs, the SVG Selector and clickable Map Quizzes.
Using advanced features of Inkscape to make SVGs, as well using basic CSS to make advanced SVG quizzes.
Some frequently asked questions about SVGs on JetPunk in general.
If you're having any SVG problem, then hopefully this will solve it.
Help for anything else SVG-related, such as the Dot Placer and Show Missing Dots.
You'll find some background on what SVGs actually are and how to edit them, including downloading Inkscape and setting up a template so your settings are always correct. We also walk you through how to make a simple SVG to allow you to make your first SVG quiz on JetPunk.
SVGs, or Scalable Vector Graphics, are an image format with some key differences from other formats like JPG or GIF (raster graphics). Whereas those formats just store a bunch of pixels, SVGs store objects.
As an example of this, an SVG file might contain a circle and a rectangle. These would be stored as points, with instructions on how the points join together. This differs from raster graphics, since they would store the individual pixels.
Storing objects and shapes (called paths) in this way allows for more precision in your image, and in particular means your image never looks pixelated because, even when zooming, the browser can render the image to look detailed. You'll notice this when zooming in on SVGs on JetPunk, since the maps look just as good when zooming than when unzoomed.
There are various ways to create and edit SVGs. Here are the three main ones:
It is also important to note that SVGs, on the face of it, are just text files. They are somewhat human-readable, meaning that you can open them in any text editor (like Notepad or TextEdit) and edit them directly. This is the 3rd option above, and has its uses if you know how to efficiently edit text files en masse. However, for most people, this option will be the least desirable option as it can be very confusing.
The second option is briefly described in a blog article here on JetPunk, How to Make SVG Maps, however this method requires some programming knowledge, and overall is not too useful for anything but geographical maps. This is personally not what I'd recommend, though if you do go down this route, you may prefer this explanation to MapShaper as it's better in my opinion: How to Make a Simple SVG Map. Again, though, this only works really for geographical country maps, and gives very little room for expansion into other areas.
We now come on to the first option, which is the most used and most preferred option: Inkscape. Inkscape is a free-to-use, open-source, piece of software specifically designed for editing SVGs. This is what we will use and reference throughout this entire SVG guide. It allows you to create SVGs easily and intuitively from scratch, as well as the ability to directly edit and add classes and ids which are necessary to get SVGs interacting with JetPunk too (more on that later).
We now move on to actually installing and setting up Inkscape. So first up, you'll need to download Inkscape. You can do that here:
You should see something like this on the page:
You need to select the version for your Operating System. For most people, you'll want either the Windows or MacOS version. Click the button to download the installer for it. After it has downloaded, if you're on Mac then just drag and drop the application into the Applications folder provided when you open the installer. If you're on Windows, after clicking the installer and following the steps (if it gives options for anything, just go with the recommended one), you should see something like this:
Once it has completed installing entirely, you can go ahead and open it. Doing so should bring up something that looks like this:
This is the main layout of Inkscape. A brief discussion on its layout:
We'll see more of what these mean later on. For now, once you have Inkscape downloaded, the next step is to setup a template.
Although this step is optional, it is highly recommend to reduce issues later on. What we'll do is setup a template so that every time you open Inkscape, you start with the same settings that'll be useful for JetPunk.
In the first step, we'll change some settings. We need to navigate to the Preferences panel. On Mac, this is done by clicking "Inkscape" in the top-left corner of the screen, then clicking "Preferences". On Windows, go to Edit in the menubar, then "Preferences" is right at the bottom. Clicking it should bring up a window like this: (although in white not gray)
This is the Preferences pane, and first up we'll switch up some settings to be the same as mine, this way all the images in this guide will make more sense. Plus, who doesn't like Dark Mode? :)
Next up, on the left-hand side of the Preferences pane, navigate to "Interface" and click the little triangle to the left to show the options within Interface, then click on "Theme". This will bring up the following settings. Ideally you'll want to set the options to be similar. It may look slightly different to this, but that's okay. If you don't want to have dark mode, that's not a problem, but be warned things may look slightly different to my setup, shown below.
Now we have those sorted, you can close the Preferences pane. We now need to setup the template itself. This will fix a few common issues found on JetPunk:
To change these settings, we need to go to Document Properties. Navigate to this by clicking "File" in the menubar and going to "Document Properties". This will open up a screen like this:
An explanation on each color, and what needs to be done.
Once you have made changes, you can close the Document Properties window. As mentioned, Green, Orange and Red are mandatory to get SVGs to work best on JetPunk, Blue is recommended for usability but is not compulsory.
Lastly, we now want to save this as a template. Currently, all we have done is changed the document settings of the currently unsaved document. We want this to be the default each time we open Inkscape. To do this, click "File" in the menubar, then select "Save Template...". A little pop-up box should appear with some inputs to fill in. All you need to do is fill out the "Name" as "default" and tick the "Set as default" box:
Now you can click save, it may ask if you want to replace the current one, and you want to say yes by clicking "Replace". This will now replace the default template, so that when you open Inkscape again, it will start up with the default settings!
We'll begin by making a very simple drawing so that we can explore Inkscape, and add the necessary XML attributes to get it working with JetPunk too!
So the first thing, I'll briefly explain the important tools we'll be using from the toolbar on the left-hand side of your window. Note the symbols may be slightly different to what's shown here:
As mentioned, we'll be using the Pen tool for this section. It may also look like this in some versions:
So to start, all you're going to do is click the Pen tool, then left click on the document. This will start the path, and you'll see that a red guide is showing where the line will show up when you next left click. Ensure when you left click you do so without dragging, as otherwise you will get a curve not a straight line. We can fix that in a moment though if it does happen. So click around, and at the end, click the square on top of where you started to close the path, resulting in a closed path being drawn. Something like this...
Note yours may be solid black, solid white, or even no color at all. We can edit the styling of it in a moment. First though, we now want to edit the shape. Next up, click the Node Editor tool, that's the second one down on the toolbar above. It may also look like this:
Notice we have a curve in our shape above? Well we want to get rid of that, and we can do that using the Node tool. When we select the Node Editor, several little shapes will appear on the corners of our shape we drew:
These little shapes indicate our corners, or nodes, by which our shape is defined. Notice how the diamonds indicate corner nodes, meaning that lines between diamonds are straight, but squares represent curved nodes, meaning the line through a square node will curve rather than be straight. We want to fix this. To do this, select the square node, you'll notice some "guides" will show up, these indicate how the curve through that node is defined:
If you move the little circles of the guides around, this will change the curve through the node. However, to remove the curve entirely, we need to change the type of node. We can do this in the shape editor bar mentioned before, this is above your page. In particular, while the curve node is selected, you're looking for these symbols:
These 4 tools define the different types of nodes. For us, we want to click the far left of the 4, which says "Make selected nodes corner". Once clicked, you'll notice our little square node has turned into a diamond node. However! You'll also notice it may not have removed the curve, this is because we still have those curve guides defining the curve, so despite changing the node type, we still need to remove those. Thankfully, just click the same "make corner" button again and it'll remove them. After doing this to every curved node, you'll have a shape with all corner nodes:
We can now edit the style of the path. To do this, go back to the Selector tool (the first one at the top of the toolbar on the left). Then right-click the shape, and select "Fill and Stroke...", this will show a panel on the right-hand side looking like the below.
In this panel you can edit the Fill color, Stroke color or Stroke style of the path currently selected (by changing the tab selected, shown at the very top of the image). Note that a path's "stroke" just means the border around it. By default, you want the Fill and Stroke to be set to the solid square right next to the "x" just below the tabs. This ensures you have a solid color and not a pattern fill. You'll know this is selected as it will say "Flat color" just above the "RGB" and "HSL" line.
By default you'll also get RGBA coloring, this means the color of the shape is defined by the amount of Red, Green and Blue there is, along with an Alpha channel for transparency. You can change these values directly either by clicking in the colored bars, entering the numbers directly, or by entering a Hex color code into the "RGBA" box (currently filled by ffffffff above). If your Hex color code is only 6 characters long, add "ff" to the end of it to maximize transparency. You can also change the opacity of the object itself at the bottom of Fill and Stroke. This will equally affect the fill and stroke together, as it's changing the transparency of the entire path, not just the fill or stroke separately.
The Stroke color tab is identical to the Fill tab, except that it affects the border of the path, not the fill of the shape. The other tab is Stroke style:
A brief explanation of each row of the styling:
So now you should have a shape, with a border, colored how you want to. We can move on to editing the XML data of the SVG so that we can connect it to JetPunk!
As mentioned, we now need to add "ids" and "classes" to make our SVGs reactive on JetPunk. But what does this all mean? Now, bear in mind this may seem like complicated stuff, but take your time to ingest it, it's actually not too bad. First, a bit of basic XML, let's look at the XML of the "path" below:
Let's briefly explain what each of these mean:
Now you've had a basic lesson in XML / HTML! On JetPunk, we use ids and classes to color SVGs after you guess answers on a quiz. This means we need to add ids or classes to the SVG itself to give JetPunk something to communicate with, as otherwise we have no way of telling a particular path to light up.
To edit the XML attributes of a path, we need to open up your SVG in Inkscape, then go to "Edit" on the menubar and click "XML Editor..." near the bottom of that menu. It'll open something like this:
Now, I know some people might panic and think "Ah! There's code, I don't know programming!", but rest assured it's not that bad.
The Inkscape XML Editor shows some information in the top half, in particular the order of the objects, and the ids of objects / paths. Note that "svg:defs", "svg:metadata" and anything with "sodipodi" can be ignored for anybody not advanced. If a tag in the top half has a little triangle or a "+" to its left, then this indicates there are objects inside it. For example above, we have a group "svg:g" tag, with a "path" tag contained inside it.
When you select an object, in this case the "path" tag highlighted in blue, you can see and edit its attributes below. Ignoring the sodipodi attributes, you should have at least an "id" attribute and a "d" attribute for paths. These are explained above! You may have other attributes too, but the one we'll focus on for now is simply "id".
What you want to do is simply click the current value of "id" (in this case path9) and change the text to whatever you want your id to be, then hit "enter" on the keyboard to submit the changes. I will change mine to be "my-path" as in the example at the start of this section.
That's it! You've added a custom id to your path, now you can connect it to JetPunk in the next step.
If you wanted to add classes to your path too, you can do so by clicking the "+" (to the left of "Name" in the bottom half of the picture above) then type "class" as the Name, and your classes, separated by spaces, as the Value. The Name must be exactly "class", not "Class" or something else. E.g. the example we had above would be written like this:
This path now has an id of "my-path" and 3 separate classes, namely "class1", "class2" and "class3".
Now we have made the SVG, what you want to do is connect the SVG to JetPunk. We explain this entirely in the next section of the SVG Guide. Head back to the "Menu" and then click "JetPunk SVGs". Alternatively click here: JetPunk SVGs.
A guide on how to do the JetPunk part of making quizzes with SVGs, as well as covering the SVG Selector itself. We also discuss JetPunk Standard SVGs and how they're formatted and standardized. Finally, towards the bottom is a complete guide to creating clickable Map Quizzes.
To add an SVG to your quiz is very easy. Simply head to Step 4 of text quizzes, or Step 3 of Map Quizzes, then click the golden "SVG Options" button:
This will bring up the SVG Options pane, which you can use to add SVGs, as well as other things too. For adding SVGs, there are currently two options:
As mentioned, if you wish to learn more about selecting a JetPunk SVG and the JetPunk Standard SVGs, then you can read more about those below. For now we'll assume you wish to upload a custom SVG.
To upload your own SVG, simply click the green "Upload" button, choose the file in the pop-up box with the grey button, then click the blue button to upload the SVG itself.
If you have issues uploading, see the Troubleshooting page of the guide.
Once you have uploaded successfully, a preview of your SVG will be shown at the bottom of the Options pane. You can remove the SVG by clicking the red button, and download the SVG by clicking the grey button.
Now just click "<< Back" at the top of the page to apply the changes and add the SVG to the quiz. Then that's it! You now have an SVG added to your quiz.
Now comes the more technical bit; adding ids and / or classes so that your paths light up on a quiz.
I will assume you already have the ids / classes at the ready, to learn about how to add these to an SVG, see the Getting Started page. Note, these must be attached to the paths themselves, not the groups they're contained in, otherwise it will not work.
Adding the id / class associated with each answer is easy, simply write it in the left-most column of Step 2 when creating your quiz. This must be the left-most column, and must be exactly how the id appears in the XML Editor in Inkscape.
If you're unsure what id or classes your paths have, head to the SVG Options pane again (the golden button), then, while you have an SVG in your quiz, you can click the "Get SVG IDs" button. This will attempt to retrieve the ids and the classes of all the paths in your SVG currently uploaded. It looks something like this:
As you can see, all paths found will have their ids shown in the left column, and then the classes of these shown in the right-hand column. The classes here are separated by commas for clarity, but are normally space-separated in the SVG itself.
The ids should be unique, meaning you can enter any of these into Step 2 to color your path during gameplay. Classes can also be entered into the left-most column of Step 2 as a way to color multiple paths in your SVG at once from a single answer.
For example, if two paths had the "water" class shown above, and we set the left-most cell of an answer in Step 2 to have "water", then typing that answer would color all paths with the class "water" or id "water" in green.
Finally, in Step 2, the editor doesn't distinguish between classes and ids, meaning if you have something with an id of "water", and something else with a class of "water", they will both be colored in green for any answer with "water" in the left-most column in Step 2.
If you don't want to upload a custom SVG, and instead just want to use a JetPunk Standard SVG, then you can do so with the SVG Selector.
Simply head to the SVG Options pane by hitting the golden button as before in Step 3 or 4, then click the blue "Select JetPunk SVG" button. This will bring up the selector.
This selector shows a list of JetPunk Standard SVGs (explained below) that you can freely choose from and select for your quiz. Some will only show for different quiz types, since for example the standard-width world map doesn't fit on Click Map Quizzes, so we show a compressed one width wise instead.
To select an SVG from this pane, simply click the name of the map you want on the left, then click the green button to select it, this will take you back to the SVG Options pane, where you can click "<< Back" to apply the changes to your quiz and return to the quiz editor.
The SVG is now added to your quiz! To add ids for JetPunk Standard SVGs, see the next section below.
On JetPunk, we have various "standard" maps which are free for all users to use on their quizzes, as well as to download and modify for re-upload to their quizzes.
These SVGs all have standardized formats, meaning that the ids of every path are uniformly defined to ensure that it is as easy to understand as possible. Here are the possible ids you'll find in a JetPunk Standard SVG:
To easily grab the ISO Code of a country, simply head to this Wikipedia page: ISO 2-Letter Codes, it also has the codes of smaller nations which are not recognized as independent nations.
Adding ids to your quiz for JetPunk Standard SVGs is easy. Simply type in the country's name to the answer cell of Step 2, and click the "Add Path IDs" button. Select what type of answer you are looking for, then it will try to match the names written with the id of those paths on the map. E.g. typing "United States" and clicking the button will suggest setting the path id of that answer to be "us". You can review any changes before they are made, and can undo easily once they are made if needed.
It should work for any standard names in the JetPunk featured languages, and some variants of the country's name (e.g. D.R. Congo for Democratic Republic of the Congo will work).
Even when not using JetPunk Standard SVGs, if your SVG is the same formatting and naming scheme as the Standard, then you can click the button under "Advanced" in Step 2 of the quiz editor to add path ids.
If you are new to JetPunk you may be curious how these quizzes work exactly. Well it's quite simple!
You are presented with a highlighted country on the map, usually in blue, and you need to select from the scrollable box the correct answer. E.g. if France is highlighted in blue, then you should scroll down to "France" and click it.
You can choose to take the quiz in the order pre-defined by the quizmaker, or choose a random order by switching from "Fixed order" to "Random order".
Note that the answers should always be in either Alphabetical order, or in Numerical order for numerical answers.
You can use the arrows on screen, or the arrows keys on your keyboard, to switch between highlighted answers so you don't need to answer the question presented to you straight away.
This section aims to help users with making Click Map Quizzes.
The first thing you may notice about these types of quizzes, is they have a common naming theme which is highly suggested to be followed. This simply involves sticking "Map Quiz" on the end, e.g. "Europe Map Quiz" and "United States Map Quiz".
Next, the rest of Step 1 will look familiar to other quizzes, and in fact the only difference is the "More Options" button. This allows you to make randomized Map Quizzes, simply switch to "Random", enter the number of answers you want displayed, and then hit "Okay". Randomized Map Quizzes will simply present the user with a random selection of answers from Step 2, in a randomized order.
Onto Step 2, there are several things you must do in this step:
To help with Step 2, there are some options under "Advanced", for example "Shuffle" which will randomly order the answers in Step 2 to ensure it is different from alphabetical. You can also sort the answers, import and export answers similarly to Text Quizzes too. Although this is an advanced feature so is not recommended for beginners.
We can now move onto Step 3.
In Step 3, you can add your SVG by hitting the golden button. See the other sections of the guide for help with this, namely "Adding an SVG to a Quiz" above.
We also have a variety of design options available:
Once you have finished with Step 3, you can preview your quiz before submission. If you're happy with the order of answers, and the look of the quiz, then you can go ahead and submit your quiz. You've now made a Click Map Quiz!
You may have noticed that some Map Quizzes show circles or arrows for particular answers. You can do this yourself very easily!
The circle is a function called city-selector and is added automatically to all quizzes, so there is no need to add it manually. As long as your paths are circles or ellipses, you'll get a city-selector around them. This is particularly useful for cities, as they are often circles or, if poorly formatted, ellipses.
The arrows are a little more complex, but still quite easy. They look like this:
In order to add this, the easiest thing to do is download the Africa Map Quiz SVG, as this will have arrows already in there. The important things required for this to work are:
And that's it, as long as the arrow shares the id / class written in Step 2, and has the class "map-hidden" as well, then it will work as you desire! You can also make your own arrows if you wish to switch up the style of them, as long as they follow 1 and 2 above.
A deeper look into making more advanced SVG quizzes, including some basic CSS you can use to interact with the SVG as well as using advanced features of Inkscape to make better SVGs.
As a prior warning, abusing CSS on JetPunk to affect more than just your svg / quiz is not tolerated. (Basically don't do anything stupid).
Onto CSS! CSS stands for Cascading Style Sheets, this basically refers to the fact that CSS is what is used to style webpages. For our purposes, we can use CSS to style SVGs how we want them. On webpages, you place CSS code in between style tags, these look like this: <style>. These allow the CSS to function while not rendering the text inside them, so you don't see the code only its effects.
Let's jump into an example and we'll explain it. Say you want the correct answer in a text SVG quiz to light up blue instead of green. To do this, you would use the following CSS:
We'll look at each thing in turn:
So, overall, you can probably gauge we have two main things to consider in CSS, selectors and styles. Each style has a name and a value, and they can be built together like:
The selectors are usually what people get most confused with, and the best source I've found for this is W3Schools CSS Selectors Reference. This site clearly lays out the different operations and selectors you can do with CSS. The most important are:
In terms of what styles are common to use on JetPunk, we have the following "names" of styles that are used frequently:
They are the commonly used ones for SVGs and are all you really need to know. Remember color values can be defined with a word, if it exists, or by hex color value using the # in front. Also remember that, for most color-related styles, you'll need to use the "!important" tag after the value to ensure it overrides the existing styling.
The final reminder is that all CSS styles need to be between a <style> tag and an enclosing </style>. Without these around all the CSS, you will end up not styling anything at all.
This list can be found in "Common Questions" too, but I think it will be useful for reference here as well. This is all the standard colors and classes which provide colors.
There are a number of other classes which do things on JetPunk, which may be useful to change some styling / function of quizzes.
Assuming you have read the first two sections on this page, then you should be able to get started with CSS. But, if you're still struggling, I'll leave some common examples here as well.
First, a bit of background information. When selecting classes on text SVG quizzes, you'll need to include ".svg-holder" at the start to ensure you override the styles, leaving a single space after it as well. Without this it is unlikely to work. Similarly for click map quizzes you can use ".map-holder".
Now for some example uses. Note I will use #HEX to denote wherever a color value should be. To use these, just copy and paste into the description of your quiz.
They are pretty much the most common scenarios, and are used in various quizzes. Here are some other scenarios you may want to use some more obscure CSS.
You'll notice the last one uses an unfamiliar style property, but this is used because of how we use .svg-hidden on JetPunk. The opposite value to "visible" is "hidden".
This section will briefly go over the "Object to Path" tool under "Path" in the menubar. The primary purpose of this tool is to convert something which isn't a path, into a path. Here are two examples:
The tool itself is very easy to use, you simply need to select the object you want to convert, then go to "Path" in the menubar and click "Object to Path". Note that your resulting paths may be grouped together, especially if you have text being converted. To ungroup them, simply right-click on the group and click "Ungroup".
The other tool that may be useful here is to convert a stroke to a path. What this means is that if you have a path's border which you don't want to change thickness or you want more freedom over its shape, you can convert this to a path instead. An example of this is drawing metro maps, as you can trace the metro lines easily with the Pen tool, and then convert to a path afterwards so that they color in green or red during the quiz.
To convert stroke to path, simply select a path which has a stroke and no fill, and then go "Path" in the menubar, and select "Stroke to Path". To give a path no fill, go to Fill and Stroke and click the "x" next to the solid square.
The two features that will be described here are the "Combine" and "Union" tools. These do slightly different things, and may have different uses depending on what you want to do. First, we'll cover "Combine".
The "Combine" tool can be found under "Path" in the menubar, or using the keyboard shortcut Ctrl+K on Windows and Cmd+K on Mac. This tool simply combines all selected paths into a single path, and that's it.
This means even if you have overlapping paths, they will still be overlapping after combining. The only other thing that happens is they will all be colored the same, since paths can only store a single fill and stroke.
In contrast, the "Union" tool, which can also be found under "Path" in the menubar, does a lot more than just combine them. This tool will attempt to completely merge the paths together, removing all overlapping nodes. This also has the effect that if you "Union" two paths which have only strokes, it will attempt to join them together if they aren't closed. Finally, the "goal" of this function is to have the same overall shape without overlapping shapes, meaning you just have a single path.
As with "Combine", there are keyboard shortcuts to use "Union" too. In this case you have Ctrl and "+" at the same time on Windows, and Cmd with "+" on a Mac.
Here's an example of the difference between the two. Suppose we have two circles which overlap:
Using "Combine" we get:
Using "Union" we get:
As you can see, the two functions produce very different results here. "Combine" has resulted in two circular paths, in the same path tag. Whereas "Union" has resulted in a single path which looks somewhat like a peanut.
One note with merging paths, if you "Union" two bordering countries on a map, depending on whether the nodes of each border are exactly aligned, you may have residual nodes leftover in the middle you'll want to remove. The best way to do this is to simply open up the node editor, that's this symbol:
Then, select the nodes that are leftover along the border and delete them.
This section will detail how to cut paths. Note, if you're looking at dividing paths, rather than cutting away a portion of the path, then you might prefer the next section instead.
In particular, the two tools we will be looking at are the "Difference" and "Intersection" functions under the "Path" section of the menubar. These are sort of opposites in what they do, I'll explain why.
On the one hand, "Difference" takes two paths, and "cuts away" any of the bottom path that intersects with the top path. This can be used to make rings, by performing "Difference" on concentric circles.
On the other hand, "Intersection" does the opposite. It takes two paths, and leaves behind only parts which are present in both paths.
Note: "Difference" and "Intersection" only take two paths, and it matters which is on top of which.
Let's look at an example for "Difference". I mentioned we can make a ring shape out of two circles. To do this, draw one circle by using the ellipse tool and holding ctrl. Then, to get a concentric circle, copy the circle and then "paste in place". To do this, you do Ctrl+C, then Ctrl+Alt+V, or the equivalent with Cmd on MacOS. You can also do it straight from the menubar under "Edit".
Once you have two identical circles, you can shrink it "in place" by holding control to keep it circular, then also holding shift to keep it centred. After recoloring the second circle, you should end up with something like this:
Then, select both circles, ensuring the blue one is on top, and then go to "Path" and select "Difference". This will result in "cutting" the blue circle out of the pink circle, leaving behind just a pink ring:
This is perhaps one of the most useful uses of "Difference" in my opinion, especially on JetPunk.
Now, let's look at Intersection. With "Intersection", the most useful thing I can think of for JetPunk is when you edit another map and have lots of excess paths outside the page. Let's work through a complete example. Let's say you have downloaded the Europe Map from JetPunk, and have resized it with the intention of having only France and nearby countries visible, then you might have lots of excess. It may look something like this, the page border here is shown in red and is on top of the document (you can change this in Document Properties).
So, the first thing you'd do here is remove all paths that aren't within the square somewhat, you can do this just be clicking and dragging the mouse to select paths and then delete to remove them. You would also want to change the size of the "ocean" behind to be exactly the page size. You can do this by clicking the ocean, and changing these values in the object editor above the page:
Ideally, you'll want "X" and "Y" to be 0.000 (placing the top-left corner of the ocean in the top-left corner of the page), then "W" to be the width of your page in pixels, and "H" to be the height of your page in pixels (you can find / change these in Document Properties). After doing both this and the shedding of countries outside the region, you'll end up with something like this:
Now you have that, we can start using the "Intersection" function. What we're going to do, is copy and paste-in-place the ocean square behind, then intersect that individually with each country exceeding the boundaries. This is why it was important that the ocean square lined up perfectly with the page itself. Remember to "paste-in-place" you can do Ctrl+Alt+V (Cmd+Option+V on Mac) or you can do it in "Edit" in the menubar also.
What I like to do is copy the ocean, "paste-in-place" loads of times, then go ahead and select a country and one of the squares and perform "Intersection". For example, here is the UK and the copied ocean square both selected:
Then, we go to "Path" in the menubar and do "Intersection". We now end up with this:
Now, because "Intersection" removes all classes after performing, and because we use classes to color paths on JetPunk, you'll see that it may turn black as the UK has above. We can fix that later. Repeat the steps above for each country whose path is partially outside the boundary, and you'll end up with this:
Finally, to fix the black shapes, you can either edit the colors directly using Fill and Stroke, or add the classes "country" and "border" to each country path if you're editing a JetPunk Standard SVG (or manually coloring cities if present). You could also add "surrounding" instead of "country" to give it the standard grey surrounding color (again, only if editing a JetPunk Standard SVG). In the end, you end up with something like this:
Hopefully that worked example gives a feel for the power of "Intersection" in making your SVGs much nicer and cleaner.
The last function we'll describe on this page is the "Division" function, again under "Path" in the menubar. This function can be used to split paths into two different paths, based on a dividing line. Imagine it like taking an oddly-shaped knife and cutting a cake.
Again, this function will only take two paths, one of which is a stroke. All you need to do is use the Pen tool to draw the nodes definining a stroke which will be exactly where your path is cut. In the end you'll have something like this:
What we have here is the underlying path being the one you want to cut, and an open-ended stroke on top defining where you want to cut it. Then, selecting both, under "Path" in the menubar, select "Division". This will result in something like this:
Which has divided the background path into two separate paths based on the stroke on top, perhaps this will be clearer what has happened:
The primary thing to remeber with this tool is that the ends of the stroke you're using to cut (shown in red above) must be outside the path itself. If the end is inside the path then the division will fail.
Find answers to common questions about SVGs on JetPunk. If you're looking for help on Inkscape in general, such as merging paths or cutting paths, go to the Advanced SVGs page instead. If you can't find your answer here, it may be worth looking at the Troubleshooting page too. If you're still having problems after that, feel free to contact me here.
With the introduction of Dark Mode for JetPunk in September 2021, there are many SVGs which don't look great now that the background isn't white. If your quiz is using a JetPunk Standard SVG, then it will be updated for Dark Mode automatically. Otherwise, you will need to adjust the SVG yourself if you wish to.
If your quiz is similar to a JetPunk SVG, including classes of "country", "light-water" and others, then you can simply add "jetpunk-svg" as a class to the SVG object itself. This is easily done by opening the SVG in a text editor (e.g. Notepad) and then adding:
at the end of the "<svg" tag. For example the very first line of the JetPunk world map file is this:
Here is a list of all the updated colours for Dark Mode (everything else is unchanged):
Unfortunately not. Inkscape is currently only available to download on a desktop computer. You may be able to find something else out there, but there is nothing I know of that can help.
However, you are able to use JetPunk Standard SVGs on mobile through the SVG Selector when making a quiz. You just won't be able to edit the SVG itself.
There are various sources to find SVGs, the main issue is not stealing someone else's content, as it may be copyrighted. Here are the main sources for SVGs:
It is important to note though, that tracing should be done as a last resort. It can take a lot of effort and often results in lower quality maps, so if you can find a free-to-use SVG elsewhere, such as wikimedia, then you should use that instead.
An SVG on JetPunk must be under 600 kilobytes in filesize. Furthermore it must be at most 830 pixels in width and 600 pixels in height. If you're having trouble uploading, see the Troubleshooting page.
So there are two primary ways to make this happen:
The first one is useful in situations where you don't need the paths separated. Meaning if, in your quiz, there's no chance one will be lit up but not the other one, you may wish to combine them. More information on combining paths on the Advanced Inkscape page.
The second is perhaps the more powerful option, since it allows you to color one, the other, or both with a single answer. To do this, we need to use classes. Here's a brief recap:
Using all this information, you can see that by giving two paths the same class, then typing that class in the left-most column of Step 2 for a particular answer will make that answer light up any path with that class.
Just to use a worked example. Let's take the capitals of South Africa. In the Africa Capitals JetPunk Standard SVG, we have the following:
We have three capitals for South Africa as that is what is recognized on JetPunk. However, in some quizzes (e.g. World Capitals Quiz) you may want the ability for the user to type any of these answers and for all 3 paths (circles) on the map to light up. But since they have different ids, how do we do this?
Well, as mentioned on the JetPunk SVGs page, each of them will have the class "za-c", since that's the standard naming format for capitals. This is useful as it gives you flexibility to light up all capitals of South Africa at once, or each separately. And in this case we can't combine them in Inkscape since they're circles and that would break the zooming on them.
So, by typing "za-c" in the left-most column of Step 2, and typing "Bloemfontein | Cape Town | Pretoria" in the answer cell, then typing any of the capitals will light up all 3 on the map for the single answer. (If you didn't know, putting "|" between answers in Step 2 of Picture / Text quizzes will act like an "OR" and set typeins for each independently).
That's it! Hopefully the worked example was useful to gain understanding of this, and feel free to explore the JetPunk Standard SVGs to get a sense of how it works.
A popular type of map is the "empty" map, for example in the quiz Countries of the World with an Empty Map. But how is it made?
It's actually rather easy, take any map you want to make "empty" and open it up in Inkscape. Select everything and change the Fill to be white, then remove the Stroke from all paths by going to "Stroke style" and setting the width to be 0. Now, we need to stop the classes of the SVG paths from overriding these colorings. If you're on a JetPunk Standard Map, or another map where the paths have classes to color them (like "country" or "border"), then we want to stop them coloring anything.
To do this, open up the XML Editor in Inkscape and scroll all the way to the top, then you're looking for a node called "svg:style". If you don't have one, you can skip this step. If you do have one, then select the text node inside. You may need to click the triangle or + to see the text node inside the style node. You should have this when selecting it:
Now change the value of the "content" to be nothing at all, i.e. it should look like this once you've removed all the text and hit enter:
And that's it! The empty map should work as intended now.
Thankfully this one can be done by an in-built class called "svg-hidden". This class will automatically hide paths until guessed. The easiest way to do this is to go to SVG Options (the golden button) when editing a text quiz, and select "Yes" for the "Hidden paths" option. This will hide the paths of all answers until guessed. It's even compatible with randomized quizzes too.
Unfortunately this is not compatible with clickable map quizzes.
If you wish to only apply the effect to some paths but not all, then you just need to add the class "svg-hidden" to each path you wish the effect to be on. To do this (assuming knowledge of the "Getting Started" page), head to the XML Editor under "Edit" in the menubar, and select your path. Then, if you have no class already, add a class by adding an attribute with the +, and typing the following:
If you already have a class attribute, simply change its value to include the class "svg-hidden" by adding it on the end. E.g. if you have the classes "border" and "country" already, then set the value of class to the following:
By adding this class to the paths you want, JetPunk will automatically hide them until they're guessed.
Do not set objects in the SVG to have an opacity of 0, these are automatically removed from the SVG when uploading.
If instead you now want paths to be hidden after being guessed instead of before, then you can do so with some simple CSS. All you need to do is add the following code to your quiz instructions. As it is a "style" tag, it won't show the actual text on the quizpage.
If you want it to hide incorrect answers simply change "svg-correct" to "svg-incorrect". If you want it to do both, you can do it with this code instead:
These will only work on text SVG quizzes. If you want it to work on clickable map quizzes, simply replace "svg" with "map" in the above, like "map-correct" and "map-holder".
This is basic CSS, if you want to learn more about how to use it on JetPunk visit the Advanced SVGs page of the guide.
If your borders look ugly when zooming in, then you may be wondering how to make borders look nice like the Countries of the World quiz for example. Doing so is easy, you just need to add the class "border" to your path. For instructions on how to do add classes, see the second half of the question "Hiding paths until guessed" above.
Furthermore, if you're using the "zoomable-circle" class, then you don't need the "border" class as well. See the next section.
If you have circles or ellipses in your SVG, you may want them to shrink when the map is zoomed in. This is a common feature of many quizzes about cities that have maps. To create this effect, all you need to do is add the class "zoomable-circle" to any circle or ellipse. See the second half of the question "Hiding paths until guessed" above for instructions on how to add a class to a path.
Note that the class "zoomable-circle" also shrinks the stroke of circles and ellipses, so there is no need to add "border" to anything with "zoomable-circle".
To shrink paths proportionally, simply select the paths you wish to shrink, hold Ctrl (control) and then drag the little arrow in the corner of the selected paths. It looks like this:
Holding Ctrl locks the aspect ratio meaning you will change the height and width simultaneously by the same proportion.
This may or may not shrink your stroke widths too, if you wish to change them, right click on the paths and select "Fill and Stroke", then navigate to "Stroke style" and change the width to something more suitable.
If you want precise measurements, then you can change the width and height directly in the shape editor just above the page itself. You'll find a padlock which will lock the ratio. All you need to do is make sure the padlock is highlighted, then any change to the height or width will change the other proportionately.
This is a list of all the standard colors used on JetPunk SVGs and their quizzes. Some of these you may not understand, but the Advanced SVGs page may help with that. All colors are given in Hex RGB format. (In Inkscape, add "FF" to the end when entering the hex in the RGBA Fill and Stroke menu).
They are the main colors used throughout standard JetPunk maps. Below are the colors given by classes during quizzes.
If you're having a problem with something related to SVGs, then you may find your answer here. For general help you may wish to try the Common Questions page too. If you're still having problems after that, feel free to contact me here.
When uploading SVGs, you may encounter several error messages if your SVG is not formatted appropriately for JetPunk. Find your error and follow the steps to remedy the issue:
This usually refers to selecting no file, the wrong file or multiple files. Simply try refreshing the page and choosing the single SVG you wish to upload.
Exceeded filesize limit
This one is because you exceeded the filesize limit of JetPunk itself, which means your SVG is likely over 2 megabytes. SVGs are very unlikely to be that big, and if they are then they're too detailed. Either way see "SVG over 600kb limit" section below for tips to reduce SVG size.
Exceeded filesize limit of 600 kilobytes
Unlike the one before, your SVG has successfully uploaded to JetPunk. However this time you have exceeded our imposed limit of 600kb on all SVGs. Again, see the next section for help on reducing the size of an SVG.
Uploaded file does not contain valid XML markup
This usually happens when you haven't uploaded an SVG file, or the SVG file you uploaded is actually corrupt. The easiest way to fix these issues is to try an XML validator. We recommend trying W3C Markup Validation, as they provide lots of details on why your file may be broken and how to fix it. Remember SVG files are just text files, so if even Inkscape can't open it to fix it, you can try fixing it by editing it in a text editor.
Error processing SVG file
All SVGs uploaded to JetPunk are compacted using a command-line tool called "svgo". This tool can massively shrink the size of the SVG, but sometimes it can cause errors if it finds something it doesn't like. Unfortunately, if you receive this error then something has gone wrong when it has been compacted, and there's no way for us to tell why. This is a rare error to occur, but trying some of the other error fixes here might help.
Unable to find SVG tag at the start of the file
This is usually if your SVG doesn't contain the "<svg>" tag right at the start of the file after compacting through svgo above. It shouldn't happen, but if it does then open your SVG up in a text editor and remove everything before the "<svg" part.
Unable to find height / width attribute in SVG tag. Make sure it is in pixels.
This will show when either your units are not in pixels, or no height and width have been provided. The most likely problem is you're not in pixels, so to fix this open your SVG up in Inkscape, then go to "Document Properties" under "File" in the menubar, then change both the display units at the top, and the document units around halfway down to be "px". You will then need to ensure it is smaller than 830x600 pixels otherwise you'll get another error.
SVG exceeded the maximum size of 830 pixels wide or 600 pixels high
Pretty self-explanatory this one. We have a maximum of 830 pixels wide and 600 pixels wide. To shrink it, you need to go to Document Properties as with the previous error, and then change the document size to be less than or equal to 830 pixels in width and less than or equal to 600 pixels in height. After that you may need to proportionally shrink your SVG to fit on the new page size. See the Common Questions page of the guide for that.
The most unhelpful and unfortunate of errors. This means something has gone wrong, somewhere. We don't know what, and we don't know where. The only real option is to try again, as well as making sure your SVG is valid using the W3C Markup Validation service.
If your SVG is over 600 kilobytes, you can try the following methods to shrink it:
The last 3 are all external programs which may or may not mess up your ids or classes, so always keep a backup before using these. However they can be very good at shrinking the SVG drastically, especially if the original is formatted badly.
There are a few potential issues here, I'll list them.
It's possible there might be many other reasons why it isn't showing green, but these are the most likely.
If some parts of the SVG are not visible, the most likely issue is that your SVG is not on the page itself. What I mean by this is, when you open up your SVG in Inkscape, its contents aren't on the page shown. If you don't have a page border shown, go to "Document Propeties" and ensure "Show page border" is selected at the bottom. Then ensure all of your SVG fits onto the page that is shown. You may need to resize the contents all at once by doing Ctrl+A to select all, then dragging to place and resizing with the arrow in the corners of the selection and holding Ctrl to fix the height-to-width ratio.
This is an old bug that shouldn't be occurring anymore. But if you're still having issues, there are a few things you can check to make sure all is well:
The other possible issue is the viewBox being incorrect. The viewBox is an attribute on the SVG itself which tells renderers where and how big to render the SVG. You can find its value by opening the XML Editor in Inkscape, scrolling all the way to the top and selecting the "svg:svg" tag itself:
The ideal value you want the "viewBox" attribute to be is "0 0 w h" where "w" is your width and "h" is your height in pixels. If you don't have a viewBox attribute, then the viewBox isn't the issue for you. After changing its value, you may need to reposition the contents of the SVG back onto the page.
They're the two usual suspects for the old zooming bug. But as mentioned, this shouldn't be a bug that occurs anymore.
Sometimes when you upload an SVG with text in it, it may appear differently to how you intended. This is because, unlike Inkscape, pure SVGs don't store fonts. So if you used any unusual fonts that aren't supported by browsers, then your text may look different to what you expected.
The easiest solution is to use a standard font like Helvetica or Arial. The other solution is to use the "Object to Path" tool in Inkscape. To do this, select your text in Inkscape, and head to "Path" in the menubar, and click "Object to Path".
This function turns your text into paths, stored in a group, with each letter being a single path. To turn this into a single path, first ungroup by right-clicking on the resulting text-path and click "Ungroup". Finally, with everything of the text still selected, under "Path" in the menubar again, click "Combine". You should now have a single path with the text, and it'll show up exactly like that on JetPunk too!
Note: this process will likely remove ids and classes you have before, so you will need to set them again if needed.
This page is primarily for anything else SVG related on JetPunk that may not have a place elsewhere. Most prominently the Dot Placer and the Show Missing Dots feature.
Most of the instructions are on the page itself, but I will elaborate here.
Firstly, the data you need to collect first:
That's all that is required to use the dot placer!
You can also now style all the dots at once before placing them, this can be done using the style selector provided. The default is used on many quizzes regarding cities and has #FF9900 as the fill (orange), then 70% fill opacity, a solid black stroke and then 1px stroke width. You can style yours how you wish.
The next step is to choose which SVG you want to use. All the continents, as well as the world and USA maps, are provided as options. These are the JetPunk Standard SVGs. There are also two bonus options to use a completely blank map with different projections as well, so all you have on the map are cities and nothing else.
Once you have chosen your map, simply click "Draw Dots" and then download the SVG. You can now upload this SVG to JetPunk! The ids for each of the circles is provided in the textarea, where you entered data, as a 5th column. You can use this in Step 2 of the quiz editor to light up the path when guessed.
You can also download the map you want beforehand to grab the JetPunk Standard SVG on its own.
Note: Switching between maps will remove all circles on the map switched from.
This feature, prominent in the Countries of the World Quiz, can be used to show small circles on the SVG before an answer has been guessed. In that quiz's case, it is showing the countries of the world that a user has left to guess.
To add the "Show Missing Dots" feature, simply go to the SVG Options button in Step 4 of a text quiz and select the option inside there. You also have the option to change the text that is shown below the map during gameplay, by default this is "Show/Hide Missing Countries" (and if kept as default and the quiz is non-English, it will automatically be translated to featured languages).
In terms of "programming" where the dots will show up, this must be done in Step 2. You must have at least 4 columns to make this work. The left-most column, as usual, must contain the SVG path id or class to color the paths. The 2nd and 3rd columns from the left must contain pixel co-ordinates for where the dots should appear.
For example, "192" and "123" would show a dot 192px right, and 123px down from the top-left corner of the SVG. For any cells left empty, its value is assumed to be 0.
The dots will also show up in Step 4 so you know where they are and can adjust the values to suit. Unfortunately, there's no easy way other than trial and error to place the dots. One alternative option is to place them where you want them in Inkscape using little circles, and then type in the "cx" and "cy" values of those circles into Step 2, as these refer to the centre of the circle.