Building a Large Anki Deck with SVG

Learning with Anki flashcards is a lot of fun, and creating decks can be a big part of the learning process. However, creating large repetetive decks can be very time-intensive.

By automating and outsourcing parts of the process which are time intesntive (or just not that interesting) the time can be reduced significantly, whilst still retaining a lot of the learning that would be gained creating the deck manually. The time saved on the tedious tasks can be spent on more productive or interesting tasks.

In this article I will share my experience of creating anki-uk-geography.

Outsourcing

When working on any project building on the work of others is critical to producing a high quality output. It can be tempting to do everything from scratch but this just won’t scale, and your project will wind up on your long list of things that you never quite got round to doing.

When writing an Anki deck outsourcing can take many forms.

Crowdsourcing

The rewards from crowdsourcing can be significant as others can have skills that you don’t. For example, your contributors may be able to translate your deck to their native language, they may have technical or creative skills that can be used t ehanced the quality of your deck. However, crowdsourcing effectively can be difficult, you need to convince people to invest their precious time in your project. Some factors that may contribute to effective crowdsourcing include:

Making it easy for users to provide feedback
Making it easy for contributors to contribute
Creating an excellent deck
Being inviting and supportive of contributions and feedback
Choosing a project with broad appeal (avoiding niche topics)

The best example of this I’ve seen is the Anki Ultimate Geography deck. This deck uses an open source repository on Github to manage contributions and feedback. Documentation is extensive and it is clear where and how to provide feedback and contributions. The deck is distributed via a versioned release process on Github and is also released on Ankiweb.

In my own project I have largely attempted to imitate the model used by Anki Ultimate Geography. However, whilst I have recieved very useful feedback on my project. I have not attracted any external contributions. I believe this is in part because the barrier to entry for contributions is relatively high, due to a somewhat convoluted build process, and additionally the appeal of the topic (UK counties, regions, and cities) is relatively niche comapred to the broader appeal of world capitals, flags, and countries.

A lot of the interesting feedback I received was from a post I made on the r/Anki subreddit from Github issues, and from comments on the Ankiweb page for the deck. I am very greatful for this feedback, as it acts as a great source of external motivation, and I really believe that it has greatly improved the quality of the deck and would encourage any other deck creators to seek out and engage with feedback from users.

Leveraging Existing Material

You should not reinvent the wheel with your deck. Curating a large amount of content is a significant task within itself and if you also need to create all of that material you will likely fail.

For my UK Geography deck, most of the time was spent understanding how UK Geography actually works, finding the relevant data sources, and combining them in an engaging way.

All of the information in my deck was originally sourced from Wikipedia, including the SVG (Scalable Vector Graphic) Decks. There was no need to create a perfect map of the UK, I could instead build on the incredible work of the wikipedia contributors by adapting the map slightly to fit my use case.

Build Automation

What is a Build Process?

A build process is the process which transforms your sources into releasables.

Your releasable In the Anki context is likely a collection of Anki decks (e.g. .apkg files).

Your sources may include .csv files for data to be included on your cards (potentially in multiple different languages), card templates, images, audio snippets etc.

If you frequently need to change the content in your deck, your deck is particularly large, or you need to manage many versions of the same deck, making this process as easy as possible for yourself is absolutely essential.

Automation

Automating your build process efficiently will require some programming experience. In particular, knowing some python will likely be very helpful. If you don’t have any programming experience, writing your Anki build process could be a great beginnger project to motivate you to start learning!

Your build process will vary depending on your decks but here I will reccomend some very useful tools that I’ve used for automating my build process:

Here’s a diagram documenting how my deck is built:

SVG and Anki <3

As Anki flashcards are based on web technology, SVG is a really natural fit. In my case I simply downloaded SVGs from wikipedia, made any cosmetic changes using Inkscape, tidied them up manually, and compressed them using SVGOMG.

SVG is Data!

Given that SVG is XML-based, it can be used to encode heirarchical data, as well as being used to rendar a visual representation of that data - pretty neat!

For example the following SVG encodes both the information about how to render the Regions map of the UK and it also contains a list of the regions of the UK used in my deck.

<svg ...>
	<path  id="Republic of Ireland" fill="#eee" d="..."/>
	<g id="Regions" fill="#aaa">
		<g id="Scotland">
			<path d="..."/>
			<path id="Outer Hebrides" d="..."/>
			<path id="Orkney Islands" d="..."/>
			<path id="Shetland Islands" d="..."/>
		</g>
			<path id="North East" d="..."/>
			<path id="Yorkshire and the Humber" d="..."/>
			<path id="North West" d="..."/>
		<g id="Northern Ireland">
			<path d="..."/>
			<path d="..."/>
		</g>
		<g id="Wales">
			<path d="..."/>
			<path d="..."/>
		</g>
			<path id="West Midlands" d="..."/>
			<path id="East Midlands" d="..."/>
			<path id="London" d="..."/>
			<path id="East of England" d="..."/>
		<g id="South East">
			<path d="..."/>
			<path id="Isle of Wight" d="..."/>
		</g>
		<path id="South West" d="..."/>
	</g>
</svg>

This means that you can build your deck from the same data that is used to render your image, and use the deck fields to highlight or hide information in your image. Using SVGs like this is really nice as it allows you to create hundreds of different images with relatively little effort, and leads to a much smaller deck size (e.g. my deck is just 3MB).

Modifying SVG elements in Card Templates

Since card templates are just templated HTML, we can embed the SVG inline in the card tempaltes and use CSS and JS to modify the appearance of the cards using CSS and JS. In my deck I highlight relevant portions of the map, hide bodies of water when they are not relevant to the card type, and animate city markers to draw attention to them.

<style>
	[id="Bodies of Water"] > :not([id="{{BoW}}"]), [id='Cities'] * {
		visibility: hidden;
	}
</style>

For example, in the snippet above I use a CSS selector to hide all cities, and all Bodies of Water except the body of water on the card.

Simmilarly in the following JS snippet I select multiple counties specified in the MacroLocation field and highlight them both.

<script>
	selectedCountiesNames  =  "{{MacroLocation}}".split(" / ")
	for (countyName  of  selectedCountiesNames) {
		county  =  document.getElementById(countyName)
		county.style.fill  =  "#2ECC40"
	}
</script>

Conclusion

This article summarises some of the things I’ve learned along the way while creating an anki deck with a large number of images. Hopefully some of it will help you with your creating your own decks!

Search This Blog

Cognoteo

Anki-SVGs