My SVG Quizzes

+8

I created many quizzes over the years, way too many that I care to admit. Since JetPunk opened up SVG quizzes to users, I created many quizzes with SVG too. In this blog, I will go through some of my SVGs, from the good, the bad to the ugly and anywhere in between. This may seem a blatant attempt to promote my own quizzes. If you are offended by that, please skip to the next blog.

Although I use a lot of computer at work (who isn't these days?), I did not study computing at school, and I have to say that I only know very basic coding. Most of my SVGs are copied referenced from Wikipedia or other open sources and modified using Inkscape, which I am still learning how to use and hopefully am getting better now. I am still sometimes baffled by why some SVGs don't work; or I do things clumsily, like formatting every single object individually rather than using style and class. Anyway, here are some of the highlights (or lowlights) of my SVGs.

Map of Hong Kong

These are all based on a SVG map of Hong Kong in Wikipedia with the 18 districts boundaries. All I did was simply adding the locations and changing the colours like the ones below:

Locations of the 11 universities in Hong Kong

Locations of the major public hospitals in Hong Kong

City Maps

I created many of these well before the wonderful JetPunk dot placer was available. Back then I would manually place the cities as accurately as I can, like this one below:

My Chinese cities map

Note that the above map is based on spherical projection, reflecting the "real" map of China. In contrast, the official JetPunk map of China (in my opinion) is rather ugly.

The official JetPunk's map of China

In some cases, I built a formula in Excel to calculate the coordinate of the dots, like the ones below (I thought I was quite smart haha).

Northernmost cities in the world in polar projection
Southernmost cities in the world in polar projection

If you are interested in trying out my city map quizzes, here is the link to the series.

Random City

In addition, I made few random city map quizzes. It takes a lot of effort to make a random quiz as I need to prepare many answers so that the quiz is truly random (refer to this excellent blog on the JetPunk randomiser). For example, in the random Asian cities quiz, I had 200 cities for a quiz with 20 answers.

Random Asian cities

Again, I much prefer the spherical projection to the equirectangular one used in JetPunk, especially for Asia when the JetPunk map omits the entire Siberia.

Cities Along River

These are quite simple to make. Just steal find a SVG map of a river in open source and then put the dots along it. For example,

Cities along the Ganges

These quizzes can be quite challenging because you don't have any other reference in the map like boundaries and coastline to identify the cities. So you do need to know your river and cities very well to score 100%. If you think this is fun, here is the series.

Borderless City Maps

Again similar to the ones above, the challenge here is that the map has no country border. I had to place the dots carefully myself as these maps were not done using the JetPunk dot placer.

African cities on a borderless map

If you find this interesting, give it a try here.

Population vs Area Charts

I have a series of SVG quizzes based country population vs area, like this one for Asian countries.

Asian countries on a population vs area chart

I had a lot of fun drawing these charts in log scale by formatting the dots using Excel formula. These quizzes turn out to be quite difficult, with only one person so far scoring 100% in the South American quiz, and none in any other quizzes (well not that many people took these quizzes anyway). You have to know all the country population and area quite well and how they are relative to each other in order to excel in these quizzes. If you would like a challenge, here is the link to the entire series.

Pie Charts

I have to admit that these quizzes are quite ugly and unsuccessful. The idea is to draw a pie chart representing the continent/region population in the outer circle, and the largest countries within each in the inner circle.

World population on a pie chart

The black and white colours are not very appealing, and it looks more complicated than it should be. So I only made two quizzes in this series.

Pixelated Maps

I then had some fun in creating pixelated map based on the country population or GDP, like the one below:

Country population on a pixelated map
Country GDP on purchasing power parity (PPP) on a pixelated map

While these maps look interesting, the quizzes themselves are quite meaningless as these are just another glorified Country of the World quiz. Anyway, you can check out the series here.

Subdivision Shapes

There were already many country shape quizzes, so I decided to make one for subdivisions. These were not hard to make. I simply took the many subdivision maps out there, copied and rearranged them together so they looked similar size.

European subdivisions

The hardest part was to pick the common subdivisions so that it would not be too obscure. Here is the link to the series.

Metro Network Maps

In case you didn't know, I am a big metro (or subway/underground) fan. In particular, I love studying network maps. I started my first network map quiz with the Hong Kong Mass Transit Railway (MTR) network.

Hong Kong MTR network map

This was copied and modified from the one on WikiCommons. There are two main challenges in creating these maps:

  • Often there is no SVG available on the internet. Only JPG or PNG are available.
  • New lines and stations kept being built, so it is hard to keep up-to-date.

This is particularly challenging for the metro networks in Chinese cities. Initially I tried only making quizzes when a SVG was available. Even with that, it took a lot of time and effort to modify them, e.g. removing the labels, changing the size, IDs, and redrawing the lines so that it resembles more closely to the real network. For example, my Shenzhen map is quite different from the official one.

My Shenzhen metro map. I have significantly redrawn the purple, red & blue lines.

My goal is to create a metro map for every Chinese cities. There are currently 40 mainland Chinese cities with metro in operation (and few more under construction), and I have only made 12 quizzes so far. The most difficult one was the Chengdu metro, which I drew the map entirely from scratch myself in Inkscape.

Chengdu metro map

This is one of my quizzes I am most proud of, although no one has taken it yet 🤔. With this experience, I can now draw these network maps myself without stealing from the internet. It still takes me a lot of time and effort to draw one, so it will take a very long time to complete this project (if ever). And after every few months, a new metro line sprung up from nowhere like a bamboo shoot in China, so I am always chasing my tail.


Honestly, I created quizzes and drew SVGs for my own entertainment only and I learnt a lot while making these, so I don't really mind if only very few people (or no one) are taking my quizzes. I am now much more proficient in Inkscape, although I can never make quizzes like overtired, whose quizzes are beyond amazing and I have no clue how he made them. Anyway I hope you enjoyed reading my blog (well I wrote this blog solely for my own entertainment too 😅).

10 Comments
+1
Level 63
Mar 13, 2022
Very interesting maps! I find the pixelated maps the most interesting. Things like these, based on population, GDP or other features that is not land area really show a true picture of how the world is.
+1
Level 68
Mar 13, 2022
I agree
+1
Level 67
Mar 13, 2022
Thanks. But these numbers are changing every year and it is difficult to keep these maps up-to-date.
+1
Level 43
Mar 13, 2022
All these SVGs are wonderful! Your contribution is outstanding!
+1
Level 67
Mar 13, 2022
Thank you
+1
Level 73
Mar 14, 2022
Can you tell me how do you add all those lines for metro quizzes? I have lately started making some SVG quizzes but I am unable add shapes.
+1
Level 67
Mar 14, 2022
Just draw a straight line, set the stroke width to 5 px, and add nodes so you can bend the line. You can then round the corners by smoothing the nodes (I usually have 2 nodes per bend)
+1
Level 73
Mar 14, 2022
Oh, got it! I always wondered how do I add a rectangle but seems like all I had to do was draw a straight line and bend it. Thanks a lot!
+1
Level 66
Mar 14, 2022
Dang it, you beat me to Beijing. I may have to steal Hangzhou back. ;) Nice maps!
+1
Level 67
Mar 14, 2022
Haha thanks. You also beat me to Shanghai. Let's divide and conquer then. I just did Suzhou and will probably do Wuxi next.