Other Useful Links:

Other Languages

Contents

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.

What Are SVGs?

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.

How Can I Edit SVGs?

There are various ways to create and edit SVGs. Here are the three main ones:

• Inkscape
• MapShaper
• Editing directly as a text file

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).

Setting Up Inkscape

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:

Download Inkscape 1.0

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:

• The top bar with "File", "Edit" etc... is called the menubar. On Mac this may be at the top of the screen, outside the Inkscape window itself.
• On the left you have the toolbar, with a cursor arrow, the shapes and the text drawer. This is where we will select most of the tools we work with.
• Finally, you have the object editor bar, which is just above the page itself, below the menubar. This is where you can edit the height and width of an object, as well as its position

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.

Setting Up a Template

Although this step is optional, it is highly recommended 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:

• Having the document always in pixels
• Ensuring the scale is 1 so that zooming isn't messed up
• Setting the document size to be JetPunk's maximum

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.

• Green: These are the units used throughout the document. It's best to set these both to pixels (px), as this ensures you won't have units-based issues uploading your SVG to JetPunk.
• Orange: This is the size of the document in pixels (after changing green). I keep this set as the maximum for JetPunk, which is 830px wide and 600px tall, this ensures that you never make an SVG with a document size that is too big to upload.
• Red: This is the scale of the document, this is important as it may affect how zooming the SVG works on JetPunk. It is likely that changing the units in Green may have messed this up, it should always be set to 1.00000, this ensures that every unit on screen for you, is exactly 1 pixel. As I say, this may cause issues with zooming later on if you don't fix it now!
• Blue: Finally, these options are optional to change. Personally, since I have darkmode on, I like to have the background be dark as well (I have it set to 42 on each of RGB). The most important one here is that "Show page border" is selected, otherwise you may not easily see where the boundary of the SVG is.

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!

Creating Your First SVG

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:

• Width: This is the width of the stroke, in pixels. For most things JetPunk related, 1px will look best.
• Dashes: Rarely used, but this will give you the option to change the solid border into a dashed or patterned border.
• Markers: Also rarely used, this allows you to add shapes to the start, middle and end of your border, e.g. placing a circle at every corner.
• Join: This instructs on how corners should be drawn, the first has smooth edges, the middle is tapered edges and the last one (the default) gives a sharp edge.
• Cap: Similar to join, but for open paths with loose ends rather than closed shapes
• Order: This instructs the SVG on how to render edges, i.e. in what order the markers, stroke and fill are rendered. The top-left is the default and most logical.

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!

Adding IDs and Classes to SVGs

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:

• < - this is the start of a "tag", all XML is defined using tags, elsewhere you may have seen "<a>" tags for links, or "<html>" for documents as a whole.
• path - this is telling the browser that the tag we are defining is a "path" tag, this means it'll try to render its contents using the "d" attribute.
• d="___" - this is an attribute of the "path" tag, this means it's like a property of it. Some attributes are necessary, others are optional, and in this case the only attribute required for a "path" tag to work is the "d" attribute which defines its shape and structure. I won't explain how it works, because that's far beyond what's necessary to understand for SVGs, but usually the "d" attribute will contain a bunch of numbers defining the points of your shape.
• id="my-path" - the id of the tag, this is an optional attribute which gives the "path" tag a way to be identified uniquely so that it can be referenced elsewhere, this means you must not give two different paths the same id. These must contain strictly letters, numbers, hyphens and underscores.
• class="class1 class2 class3" - the class attribute is a way of communicating with the path tag, as well as with other tags. Usually class tags are used to give a tag CSS styling, however on JetPunk it also has other uses explained below. This tag actually has three classes, since classes are always separated by spaces (meaning a class cannot contain a space). They must also be alphanumeric, with possibly hyphens and underscores as with ids.
• /> - this combination defines the end of a tag, thus closing it. After a "/>" you can begin a new tag

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".

Adding the SVG to JetPunk

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.

Contents

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.

Adding an SVG to a Quiz

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:

• Select a JetPunk SVG (see "The SVG Selector" below)
• Upload your own custom SVG

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.

Making SVGs Light-Up on a 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.

The SVG Selector

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.

JetPunk Standard SVGs

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:

• us - all countries have their 2-Letter ISO Code lowercase as their unique path id. They also all have the border class and country class to color them the standard JetPunk colors for SVGs.
• us-c - all capital cities have their country's 2-Letter ISO Code with the suffix "-c" to identify it's a capital city. For countries with multiple capitals, e.g. South Africa, the ids are "za-c1", "za-c2" etc, so they can be uniquely identified. However they all will have the class "za-c", so you can activate them all as one answer if desired.
• mc-d - most prominent in the Europe map, this is used for the orange dots of microstates, as to differ them from their actual outlines hidden below the dots.
• fj-w - this is used when a country has both a country shape and a light-blue shape around it (called light water), the country itself will have the 2-Letter ISO Code as above, but the light water will have it as a class so it changes color when guessed as well. (If only light water and no shape, then it will have id and class just 2-Letter ISO code)
• NY - this is for the U.S. states map, where we have the official state abbreviations in uppercase as their ids.

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.

How Map Quizzes Work

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.

Making Click Map Quizzes

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:

1. Add the answers that will be displayed to users in the green cells.
2. Add the corresponing path ids / classes in the left column shown, for help with this see "Making SVGs Light-Up on a Quiz" above.
3. Order the answers in the order you want them to be highlighted. This doesn't affect randomized quizzes, however for normal Map Quizzes you will need to order these answers in the order you want users to be shown the questions, this usually is in geographical order, i.e. corresponding to the order of answers on the map. The order must be different from alphabetical to distinguish it from the order shown to the user when played.

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:

• Selector Width - This allows you to change the width of the answer selector, this is useful if you have wide answers that shouldn't be contracted width wise.
• Selector Height - Default is "Auto", which will either do the height of the answers, or the height of the SVG, whichever is smaller. You can also set a custom height.
• Selector Text - This will customize the "Select Answer" header that appears at the top, this is useful to be customized for non-English quizzes.
• Selector Style - You can customize the header's background and text color to give some variety to the quizzes.
• Quiz Width - As with text quizzes, you can choose the width of the quiz, useful when you have a wide SVG to ensure it doesn't overflow the screen.
• Sort Type - Three options here, Alphabetical and then two Numerical sorts. This is the sort displayed to the user, not the order the answers are highlighted and asked. The order in Step 2 must be different to the order presented here.

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!

Adding Arrows to Click Map Quizzes

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:

1. All arrows must have the class "map-hidden", this is what hides it until the path is highlighted. This also hides it site-wide, so these maps can be safely re-used on text quizzes too.
2. Each arrow must have the id or class of the path you want it to light-up with. This means if you're pointing to Sao Tome as above, which has id "st", then the arrow needs "st" as a class to make it work. Remember paths can have multiple classes by separating them with spaces.

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.

Contents

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.

Basic CSS Introduction

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:

• .svg-holder - this is the class of the container which holds the SVG on text quizzes. It is necessary to override the normal green of SVG quizzes.
• .svg-correct - this is the class which actually provides the normal green color, since this is the right-most class before the "{", this means it is the class we are changing the style of.
• { - this indicates we are about to define some new styles for the selected class. All styles must be between "{" and "}".
• fill: - this declares what style property we are going to change, later on I'll list the common ones you might want to use. The name of each property is all lowercase, and you must put the colon at the end to declare you're going to give a value.
• blue - this is the actual value we're giving to the fill property. For colors, you can use various color names like "blue", "red" or "lightgreen", but you can also use hex color values, and these are stated in the section below. To use these you simply need a # before it. E.g. doing "fill: #FFFFFF;" would style it white.
• !important; - this is a way of overriding current styles. Since the .svg-correct class is already used to style paths green, we need to use the !important attribute to override it. The semicolon at the end defines the end of a value, allowing you to start a new value.
• } - this simply defines the end of the styles for this class, allowing you to select a new class.

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:

• .class - on its own it can be used to select any object with that class.
• .class1 .class2 - this selects all objects with class2 that are found inside an object with class1. (The space in between matters)
• .class1.class2 - this selects all objects with both class1 and class2 attached to it. (The lack of space matters here)
• #pathid - this will select the path with the id "pathid", which is useful if you want to change a single path with CSS.
• #pathid.class - this will select the path with id "pathid", which also has the class "class".
• .class1, .class2 - this will select all paths with either class1 or class2, they don't need to have both.

In terms of what styles are common to use on JetPunk, we have the following "names" of styles that are used frequently:

• fill - the color inside of a path, it takes a color value.
• stroke - the color around the border of a path, it takes a color value.
• opacity - defines the transparency of the entire path, it takes a value between 0.00 and 1.00 (1 = no transparency).
• fill-opacity, stroke-opacity - defines the transparency of just the fill or stroke independently, it takes a value between 0.00 and 1.00. Also stacks with opacity, so if you had "opacity: 0.5; fill-opacity: 0.5;" then the stroke would have 50% opacity, and the fill would have 25% opacity as both properties are halving its transparency.
• stroke-width - this defines how thick the border of a path is, must be a non-negative number and end in "px" for pixels, e.g. "stroke-width: 1px;".

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.

Standard Colors and Classes on JetPunk

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.

• #64BEFF - JetPunk ocean blue
• #FFFF80 - JetPunk country yellow
• #BEEDFF - JetPunk light water blue
• #BBBBBB - JetPunk surrounding paths (e.g. Turkey on the Europe map)
• #888888 - JetPunk disputed territories
• #707070 - JetPunk country borders
• #FF9900 - JetPunk cities / microstates (often at 70% fill opacity)
• #66FF66 - .svg-correct on text quizzes
• #FF6666 - .svg-incorrect on text quizzes
• #000000 - .random-svg-highlight on text quizzes
• #33FF33 - .map-correct on click map quizzes
• #FF3333 - .map-incorrect on click map quizzes
• #0000FF - .map-highlight on click map quizzes
• #7B3294 - .svg-incorrect and .map-incorrect when on color-blind mode

There are a number of other classes which do things on JetPunk, which may be useful to change some styling / function of quizzes.

• .svg-hidden - this class will hide paths with it until guessed in text quizzes. This is used when the "Hidden Paths" option is selected in the SVG Options menu on a text SVG quiz.
• .svg-highlight - this class does nothing by default, but will be added during "yellow box" quizzes to the path associated to the currently highlighted answer. It's how quizzes like Sequential quizzes were made, since it uses CSS to color only the single path with this class at the time.
• .map-hidden - this class will hide paths with it globally, and on click map quizzes will hide it until any associated paths are highlighted. (E.g. having the id of a path as a class will show it when that path is highlighted - see the "JetPunk SVGs" section).
• .zoomable-circle - adding this class to any circle or ellipse in an SVG will make it look nice and smaller when zoomed in.
• .small-stroke - this class is added automatically to any path with the "border" or "zoomable-circle" class when an SVG is zoomed in. It is the class that gives a smaller stroke to make paths look better when zoomed in.

Using CSS on JetPunk

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.

• Changing the color of correct answers on text SVG quizzes:
  <style>.svg-holder .svg-correct { fill: #HEX !important; }</style>
• Changing the color of incorrect answers on text SVG quizzes:
  <style>.svg-holder .svg-incorrect { fill: #HEX !important; }</style>
• Changing the color of paths associated to answers in a yellow box quiz:
  <style>.svg-holder .svg-highlight { fill: #HEX !important; }</style>
• Changing the color of paths selected in randomized quizzes:
  <style>.svg-holder .random-svg-highlight { fill: #HEX !important; }</style>
• Changing the color of correct answers on click map quizzes:
  <style>.map-holder .map-correct { fill: #HEX !important; }</style>
• Changing the color of incorrect answers on click map quizzes:
  <style>.map-holder .map-incorrect { fill: #HEX !important; }</style>
• Changing the color of highlighted answers on click map quizzes:
  <style>.map-holder .map-highlight { fill: #HEX !important; }</style>

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.

• Change the color of a specific path when it is correct, assuming the path has id "us" (for USA in JetPunk Standard SVGs, change this to what you need):
  <style>.svg-holder #us.svg-correct { fill: #HEX !important; }</style>
• Hide paths when they are guessed correctly in text SVG quizzes:
  <style>.svg-holder .svg-correct { opacity: 0; }</style>
• Hide paths when they are guessed incorrectly in text SVG quizzes:
  <style>.svg-holder .svg-incorrect { opacity: 0; }</style>
• Show paths only when they are zoomed in on. First, you'll need to select the "Hidden Paths" option in SVG Options, then use this code to make them show up when zoomed in:
  <style>.svg-holder .svg-hidden.small-stroke { visibility: visible; }</style>
(Remember, paths must have the "border" or "zoomable-circle" class to gain the "small-stroke" class)

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".

Converting Objects

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:

• You have a circle / ellipse / rectangle, and you want to edit it to be a different shape.
• You have some text which is showing differently on JetPunk.

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.

Merging Paths

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.

Intersection and Cutting Paths

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.

Splitting Paths into Two

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.

Contents

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.

How do I make SVGs for Dark Mode?

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):

• #4477AA - JetPunk Dark Mode ocean blue
• #DDDD44 - JetPunk Dark Mode country yellow
• #334477 - JetPunk Dark Mode light water blue
• #505559 - JetPunk Dark Mode surrounding paths (e.g. Turkey on the Europe map)

Can you make SVGs on mobile?

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.

Where can I get an SVG?

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:

• Wikimedia - most SVGs on Wikimedia will be free to use and manipulate, so if you can find what you need there, then you're in luck!
• MapShaper - if you're doing just geography, it may be worth using MapShaper instead. It's quite easy to use, and is explained rather well in this blog article How to Make a Simple SVG Map.
• Inkscape - the final source is to just make it yourself from scratch. This often involves "tracing", whereby you take an image from Wikimedia (to avoid copyright issues) and "trace" over it using the Pen tool in Inkscape. This allows you to convert an image into a usable SVG. If you're feeling bold, you may even want to make an SVG completely from scratch, for example like Dug's Country Shapes Under the Sea.

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.

How big can an SVG be?

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.

Making two paths light up with one answer

This was briefly mentioned on the JetPunk SVGs page, as well as another method on the Advanced SVGs page. However I will repeat it here as it's a common question!

So there are two primary ways to make this happen:

1. Combine the paths in Inkscape so that they are one path
2. Keep them separate but use a class to color them both on the JetPunk side of it

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:

• Classes are stored under the "class" attribute of a path, and are space-separated, meaning each path can have multiple classes.
• Classes must contain strictly letters, numbers, hyphens and underscores, same as ids.
• Classes don't have to be unique, so multiple paths can have the same class.
• A class can be entered in Step 2 of the quiz editor to light up paths as well as ids.

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:

• Bloemfontein has id "za-c1"
• Cape Town has id "za-c2"
• Pretoria has id "za-c3"

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.

How to make an "empty map"

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.

Hiding paths until guessed

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.

Hiding paths when guessed

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.

Making borders look nice when zoomed

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.

How to shrink circles when zooming

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".

How to shrink paths proportionally

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.

What are the standard colors used in JetPunk SVGs?

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).

• #64BEFF - JetPunk ocean blue
• #FFFF80 - JetPunk country yellow
• #BEEDFF - JetPunk light water blue
• #BBBBBB - JetPunk surrounding paths (e.g. Turkey on the Europe map)
• #888888 - JetPunk disputed territories
• #707070 - JetPunk country borders
• #FF9900 - JetPunk cities / microstates (often at 70% fill opacity)

They are the main colors used throughout standard JetPunk maps. Below are the colors given by classes during quizzes.

• #66FF66 - .svg-correct on text quizzes
• #FF6666 - .svg-incorrect on text quizzes
• #000000 - .random-svg-highlight on text quizzes
• #33FF33 - .map-correct on click map quizzes
• #FF3333 - .map-incorrect on click map quizzes
• #0000FF - .map-highlight on click map quizzes
• #7B3294 - .svg-incorrect and .map-incorrect when on color-blind mode

Contents

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.

Errors uploading SVGs

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:

• Invalid Parameters

  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 high. 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.

• Unknown error

  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.

SVG over 600kb limit

If your SVG is over 600 kilobytes, you can try the following methods to shrink it:

1. By far the safest option is to use Inkscape itself. Inkscape has two options for saving as a smaller file. The first is to go to "File" in the menubar, and then do "Save as". Down the bottom, change "Inkscape SVG (*.svg)" to be "Plain SVG (*.svg)" instead. This will remove all of Inkscape's additional XML attributes which aren't needed.
2. The second Inkscape option, since the first will only marginally reduce the file size, is to "Save as" again, but this time choose "Optimized SVG (*.svg)", do not choose "compressed" and make sure it has the extension ".svg". This will bring up some options to optimize the SVG. Most of the default will be fine, however there are a couple in particular you need to make sure are correct. Under the "IDs" tab, you need to make sure "Shorten IDs" is unselected and that "Preserve manual IDs" is checked. This should make sure your ids (as long as they don't end in numbers) won't be removed by the optimizer.
3. Try using SVGOMG.
4. Try using SVG Minify.
5. Try using Nano.

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.

Path doesn't turn green when guessed

There are a few potential issues here, I'll list them.

1. It might sound silly, but have you checked the path id or class typed in to Step 2 for that answer matches what is in the actual SVG itself? If not, type the right thing in and try it again.
2. You have some other CSS overriding it. This is probably unlikely if you're looking at this guide, but if you copied some CSS from somewhere it may be forcing your path to not be green instead.
3. Your path is a stroke and doesn't have a fill. If your path is a stroke only and doesn't have a fill, it may not show up green. To fix this select your path in Inkscape, go to "Fill and Stroke" and give it a solid fill, with any color you wish.
4. The final likely option is that you entered the id of a group into Step 2. Unfortuantely, JetPunk can't support groups very well, so instead of typing the group id, you need to either combine the paths within the group to make a single path, and use that id. Or you need to give each path within that group a mutual class that you type into Step 2 instead. This is explained in the "Making two paths light up with one answer" section of the Common Questions page of this guide.

It's possible there might be many other reasons why it isn't showing green, but these are the most likely.

Parts of SVG not visible

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.

SVG zooming incorrectly

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:

• Go to "Document Properties" with the file opened on Inkscape, then ensure the "scale x" is set to exactly "1.00000", this is usually what caused the old zooming bug. You will need to proportionally resize the SVG's contents after changing the scale.

• 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.

Weird Text in SVGs

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.

Contents

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.

JetPunk Dot Placer

Most of the instructions are on the page itself, but I will elaborate here.

Firstly, the data you need to collect first:

1. What is represented by the circle, this could be a city, a landmark or something else. But this is what we use to determine the path id.
2. The latitude and longitude of the location in decimals (not in degrees). The easiest way to find this for an arbitrary point, go to Google maps, click on a place which is unlabelled, thus placing a pin. This pin should show the latitude and longitude for the location, you shouldn't need more than 3 decimal places. (For cities, geodatos is a very useful site to find co-ordinates)
3. (Optional) The radius of each circle. The default is 4, and this is what will be set if you leave this blank for any line. This is also the size used in the JetPunk Standard SVGs for capital cities. Some people like to adjust the size of the circles based on the population of the cities they use, but that's purely your choice.

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.

Show Missing Dots Feature

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.

• The 2nd column is the horizontal distance in pixels from the top-left of the SVG
• The 3rd column is the vertical distance in pixels from the top-left of the SVG

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.