[Inkscape] Creating SVG presentations, a short tutorial.


Global Moderator
Adam Somlai-Fischer, an architect, staring implementing presentations with a zoomable interface as early as 2001. He coded each of his presentation separately, but most will have seen this in some sort from the payservice Prezi (launched in 2009). I will not talk about Prezi here, but will use Jezzyink (Anno March 2008), an open-source alternative.

Using scalable vector graphics to create presentations can be a powerful way to get your message across, a refreshing alternative to the linear progression style of slide based talks and a great way to rid yourself of the shackles of some of the proprietary based innovation stumping software.

To get started you will need the following

A) Inkscape
B) An idea on how to present your talk in a 2D plain, i.e. non-linearly

Inkscape can be downloaded free of charge here and is an excellent open-source drawing tool. The idea you will have to come-up with yourself, one good tactic - if you have trouble thinking of a 2D way of presenting - is to focus your presentation around that key graph with that crucial result. This can work surprisingly well and note that even talks that are unavoidably linear (e.g. a story through time) can greatly benefit from a SVG (zoom-able) style.

For instance, if you were to talk about the historic failed campaign of Napoleon in Russia, one logical way would be to proceed through the steps linearly in a slide based presentation. However a far more powerful way, in terms of how your audience will experience it and thus remember it, is to base it on a certain infographic. Why not zoom in on the certain events of the "map that made a nation cry", and highlight the key events? It can still be a linear progression through the dates, but your message will certainly "live" in the minds of your audience!

Still having trouble? Well no problem, we have all been trained to structure talks according to a slide by slide progression.. without realizing that some topics benefit greatly from another way of presenting! Making a few SVG's will free your thinking on that swiftly enough!

OK, so you got your idea and you have downloaded and installed inkscape?

There are now two way you can proceed, use Jezzyink (standard installed in inkscape) or use the newer Sozi (it has its own tutorial site).

If you choose to use Jezzyink, the steps needed are relatively simple but - like with so many things in this life - you will need to spend some time fooling around with both JezzyInk and Inkscape before you get the hang of it!

1) Open a new document, and choose something in the list that will correspond to the more or less to the aspect ratio of the device that will be displaying your presentation (800 x 600, is still the standard but it's changing quickly!). [if you like you can now import that key graph and place it centrally).

2) Change the background color to something you prefer, I usually choose black (under Document preferences).

3) Install the Jezzyink script, under Extensions -> JezzyInk ->Install/Update

4) Draw a rectangle, where you want your initial view to be. [Now it helps if you have used inkscape before] Right click on the rectangle and select fill, set the fill on "no fill" (the x). Then go to the stroke page and setup a stroke color and stroke style that is easy visible (e.g. red and thick).

5) Set the masterslide, this is needed for most operations and set your initial view. I like to start with the whole slide so I placed my rectangle over the entire canvas. Go to Extensions -> JezzyInk -> Masterslide. If you are not working with layers, just accept the standard defaults.

6) save the document as a svg somewhere.

7) set your first "zoom" or view. Go to somewhere interesting in your graph, or draw/type something to zoom to. Then put another rectangle like in step 4 around this area - this will set the zoom area - and try to keep your aspect ratio fixed (the one you expect to at the time of presentation). Next go to Extensions -> JezzyInk -> View and set the order and duration (play with this until you find the perfect duration).

8) Save and navigate to the file, open it with firefox, IE or Chrome (chrome works best on my system).

9) test your zoom (progress through the slides with the right arrow key ->), and then repeat steps 5 - 9 until you are done!

I hope this short tutorial will be enough to introduce you to the wonderful and magical world of SVG presentations. Please share your experiences below and always think, work and present freely!


More information here!
Last edited: