sozi presentation image

Svg based presentations with Inkscape and Sozi

Up

Have you ever heard of deck.js, Impress or Reveal ? These are tools that allows one to create nice web-based presentations with plenty of animations. As strange as it may sound, I first looked at these apps because I wanted some smooth drop shadows for the pictures in my own LibreOffice presentations. CSS can be used to get that effect. I tried all the above mentioned libraries and tools and was disappointed by the fact that adding images and graphics seems to be an after-thought. These tools are excellent for text-based presentations but placing vector graphics, like svg, in a particular position and making graphically-rich presentations is not their main domain of use. Users circumvented these limitations by writing extensions, see examples for deck.js here.

Wandering on the web led me to a tool that allows graphic rich presentations to be made with the best open source tool for vector graphics creation: Inkscape. One of the integrated plug-ins, called JessyInk, allows one to use a succesion of layers to create an svg file that, when opened with a web browser, are shown one after the other. JessyInk is an impressive tool, allowing one to annotate ‘live’ the presentation or to show an overview by clever keyboard shortcuts, but I did not like the fact that the original svg had to superpose all the layers. Additionally, the svg file is modified by JessyInk with some elements not being rendered at all in the obtained presentation. Not good.

In search for an alternative, I found Sozi, an application that takes a different approach from JessyInk. It allows something that I did not thought possible – take a poster, done with Inkscape or other svg creator, and make a presentation based on succesive views of different parts of the large image. Everything is integrated in a html/json pair of files that integrate the original svg with JavaScript magic. While the Sozi interface is in need of some ergonomy improvements, the tool is robust enough to allow me to create a 60 slides presentations in an evening, from a large svg file that I already had in Inkscape. A few of the slides  can be viewed on my bitbucket site (although some images lack from the presentation). Scrolling allows zooming in and out of the slides and clicking on the slide number opens a nice menu with all the slide titles, for fast navigation. The first slide, as a screenshot of my current Ubuntu desktop (clicking on the image goes to the presentation page):

sozi presentation image
Sozi presentation, first slide

I would very likely use Sozi and Inkscape for presentations in the future. There are a few things to consider though:

  1. Images inserted in the SVG file are better handled through relative links and should be kept in a directory that is close to the svg file itself. Moving the presentation around becomes possible if the html, json and img folder are moved together.
  2. Sozi does not allow for the moment to easily have several versions of the presentation based on the same svg but this feature might come in the future. It will be also very useful to allow the existence of svgs where text was converted to paths, so that one does not need to carry some exotic fonts around just to be able to show a presentation. If you want to duplicate a presentation, you have to duplicate the html, json and original svg and change their name so that they match each other.
  3. One has to be familiar with Inkscape and its quirks.
  4. Web browsers are not exactly familiar to the idea of presentations, the mouse pointer, for example, insists on showing the title of the web page.
  5. Do not use layers in the original Inkscape presentation. Somehow, Sozi becomes confused and might transform the layers differently, giving a very strange result. Better to use blocked elements, if you want to make a pattern of rectangular regions as template for the graphical elements of the presentation.
  6. Always do a backup of your presentation in PDF – sozi-to-pdf does it gracefully. It is a module that has to be installed separately. It generates a rather large pdf file because it is composed of high quality graphic png. While it is large, it will not depend on locally installed fonts or any additional resources to be displayed as you expect it to be.

Update (April 2017). For the type of presentation I usually do, better distribute the images or drawings in separate svg files. This helps a lot in finding a particular image or result, more difficult with very large SVG files, as those used for a Sozi presentation.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s