Extracting map information from an SVG

This post explains how I converted an SVG map from Wikipedia into a map in the Khan Academy Computer Science environment. At the bottom of the post is the Python script I wrote to do the conversion.

The final map on Khan Academy

SVG starfield animation

This little project was the result of an email request, which I'm sharing here because I thought it was quite interesting. The question was, how could you make a starfield animation (like the old screensaver) with SVG.


SVG Tutorial

A tutorial for creating simple SVGs. With interactive examples.

Converting a python list to an SVG path

Here's a short snippet of Python code that was I very pleased with. It converts a list of coordinates, such as this:

[(10, 200), (12, 220), (15, 180)]

Into the d attribute of an SVG path, such as this:

"M10 200 L12 220 L15 180"


SVG optimiser

I've started work on a program I've been meaning to make for a while: an SVG optimiser. I've often found myself spending a lot of time tidying, simplifying and compressing SVGs created by Inkscape or Illustrator. Sometimes, changes are merely aesthetic, e.g. reducing numbers from an unnecessary six decimal places to one, or removing unused attributes. These changes make it easier to read the file, and can reduce its size noticeably. Other changes are more practical, such as removing transforms which otherwise make it difficult to see where paths and shapes are actually placed.

3D Animation in SVG

A couple of months ago, I wrote a short post about experimenting with creating 3D graphics with SVG. Well, I've been experimenting a bit further, with shading and a bit of animation. I decided to make a mobile after seeing the Google logo celebrating Alexander Calder's 113th Birthday, which I think was some sort of Canvas animation.

SVG seedling animation

Below is an SVG seedling animation I made for Victoria. (Refresh page if it doesn't seem to work.)

Python SVG writer

I've written dozens of different Python programs that write SVGs of various types, so I thought it was about time I wrote a single generic module to make writing SVGs easy. Unsurprisingly, I'm not the only person to have had this idea, but rather than try to learn how to use someone else's module, I decided to write my one. It's more fun anyway. If anyone else wants to use the module it's available to download (and edit) on Github:


Moving SVG elements in Z

This a quick post prompted by a question of Stack Overflow about how to move one element drawn after another below it. Because of the way SVG works, sequentially drawing elements on the page in the order they are in the file, there is no simple way to do this. Instead you have to play with the DOM, grabbing the element you want to bury and inserting it into the beginning of the document.

SVG animation: Rotating elements

A few days ago, I wrote about creating a rotating 3D SVG cube, which involves using EMCAScript to redraw every line. However, simple two-dimensional transformations can be animated in SVGs with much less hassle using <animateTransform>. For example:

The code for this animated square is