Spacer Topics Register! Press Blog
Spacer Spacer Spacer Spacer
Spacer Spacer Spacer
Spacer Spacer
Spacer Spacer Spacer

Main Sponsors:
examotion Logo

Adaptive Inc. Logo

Lexware GmbH Logo

Bitflash Logo


Workshops will be hold on Friday, August 29, after the main conference. They are 150 minutes in length. Participants are encouraged to bring along their own laptops for hands on exercises. Please note that this list is still subject to change.

Build an offline SQLiteSVG application with Firefox

Klaus Förster

As of Firefox 2 the Mozilla team introduced mozStorage, a database API to communicate with local, flat file SQLite databases through C++ or Javascript. This workshop will show how to create a clientside, database driven SVG application utilizing this setup. It's targeted at SVG developers with a thorough knowledge of scripting and beginning to intermediate knowledge of relational databases, respectively the use of SQL. As the provided example deals with mapping, interest in mapping and GIS is welcome, although not crucial to be able follow the workshop.


The course will last for 120 minutes and is divided into three sections

  1. Introduce SQLite and prepare the database

    What is SQLite? Learn how to create, query and modify a SQLite database with the SQLite Manager extension. Load GIS data (Shapefiles) and tabular data using the ogr2ogr utility provided by GDAL

  2. Firefox and mozStorage

    Why and how does Firefox use mozStorage in combination with SQLite? Create a simple Javascript library that uses mozStorage to query and modify a SQLite database. Deal with security issues when using mozStorage.

  3. Build a thematic map for the region of Tasmania

    Use SQL-statements to query point, line, polygon or annotation layers along with additional data for tooltips, styling and the like. Build a Javascript library to transform "Well-known Text" (WKT) presentation of geometry columns to appropriate SVG path or circle elements. Add a thematic layer with coloured, scaled circles presenting power stations by type and capacity. Query and display detailed data onclick. Modify and store label position of annotations.


All you need to create the sample application is a Texteditor of your choice and Firefox 3 with the SQLite Manager extension on Linux, Mac or Windows. A sample database with geometry and data for the region of Tasmania will be provided. Vector and statistical data for the demo SQLite database has been downloaded from Geoscience Australia and is used under license.


As this example demonstrates clientside database storage it must be run locally. Please download tasmania.tar.gz, unpack it, open tasmania_init.html with Firefox 2 or 3 and continue to the demo (Screenshot).


Eugene Lazutkin (

One of the major additions to Dojo since last fall was dojox.charting --- simple charting package on top of dojox.gfx, which leverages SVG, or other graphics facilities if SVG is not available. This course discusses design objectives and correspondent decisions, the final API we come up with, and how SVG shaped the package. Short introduction to dojox.gfx is given as well.

ECMAScript Bootcamp for SVG Developers

Tobias Hauser (Arrabiata Solutions GmbH)

The scripting language ECMAScript (which is the standard JavaScript is based on) can take SVG applications to the next level by adding dynamics and interaction. The aim of the workshop is that attendees will learn how to do that. No specific ECMAScript/JavaScript experience is required, but a programming background is a plus. After in introduction to DOM, including event handling, we will cover the SVG DOM and lay out the available Interfaces. Then, we give a brief introduction to ECMAScript and how to incorporate it into SVG files. In this section, and throughout the tutorial, we will always analyze which viewers do support which functionality, in order to allow attendees to develop for an audience that is as large as possible. In the next step, we present methods to access SVG DOM elements and how to modify them. Then, we show techniques for SVG animationen and how ECMAScript/JavaScript can create animations SVG alone can't. Finally, since SVG is widely used in the WWW, we have a brief look at SVG-HTML interaction: How can SVG content be accessed from within HTML/JavaScript code, and vice versa.

Provisional agenda:

1. Introduction to DOM (according to W3C)

* The DOM tree

* Event Handling

* Important Functions

2. The SVG DOM - what is different, what is new

* Interfaces

* Special Features

3. ECMAScript (Javascript)

* What is it?

* How to use it within SVG

* SVG Viewer Support

4. Accessing SVG DOM elements

* By walking the tree

* By accessing elements directly

* Universal code to access any SVG structure

5. Modifying SVG

* By manipulating the DOM, and why (almost) no-one is using that

* By setting/modifying/removing attributes

6. Animation with SVG

* Short recap: the power of SVG animation

* Going beyond: animation using JavaScript

* Random animations

7. SVG <-> HTML Integration

* Incorporating SVG into HTML for a variety of web browsers

* Accessing SVG documents from HTML/JavaScript code

* Accessing HTML elements from within SVG script code

Filter Effects in SVG

David Dailey (Slippery Rock University, Associate Professor)

Abstract: this workshop will present a practical overview of SVG filters applied to both vector and bitmapped graphics. Participants will learn how to use simple filter effects in isolation as well as more complex filters including compound filters including animation effects and scripting. The workshop will present numerous examples, providing each participant with an illustrated handout containing code and examples.

The workshop is intended for anyone who already has a good working knowledge of SVG basic elements (rect, line, path, image, gradients and the like).

A. Introduction to Filters: what they are

B. The basic filter tag, filter primitives and syntax.

C. Simpler filter primitives

a. Controlling the extent of the filter through its height and width

b. feGaussianBlur

c. feColorMatrix

d. feConvolveMatrix

e. feComponentTransfer

f. feSpecularLighting

g. feMorphology

D. Filter primitives that stand alone

a. feFlood

b. feImage

c. feTurbulence

E. feDiffuseLighting and feSpecularLighting

F. Utility Filters

a. feTile

b. feOffset

G. Combining Filter Primitives

a. in, SourceGraphic, and result

b. feMerge and feMergeNode

c. BackgroundImage

d. feBlend

e. feComposite

f. feDisplacementMap

H. Animation and Scripting

Introduction to Inkscape

Jon A. Cruz (Inkscape, Developer and Board Member)

Introduction to Inkscape

This course introduces students to Inkscape and its use in creation of SVG for applications such as print, web, art, illustration and diagramming. It will cover what Inkscape is and also what it is not. Some of the uses for which Inkscape is appropriate will be shown, along with some of those that are best suited for different software. Each of the main tools will be explained, with information given on the available options and some of the uses they can be put to. A few dialogs that are most common for basic use will be presented.

The course is intended for the novice who wishes to learn how to start using Inkscape and the basic user who wishes to fill in gaps in knowledge to cover the full set of core tools. By the end of the course students should have learned enough to feel comfortable opening up Inkscape and getting started on graphics, art, illustrations or diagrams.

SVG 101

Ruud Steltenpool

Showing the spectrum of SVG use around the world/web

  • ...
  • ...

Showing basic principles of SVG coding

  • document structure, drawing model
  • basic shapes, paths, text
  • transformations, re-use
  • No prior knowledge of SVG needed
  • A laptop and admin rights to install software on it are a strong advantage

Advanced Features

  • patterns, gradients, filters
  • animation, scripting, interaction
  • SVG fonts


  • validator, Batik, Inkscape, FontForge
  • link resources for the SVG creator


  • No prior knowledge of SVG needed
  • A laptop and admin rights to install software on it are a strong advantage

Spacer Spacer
Spacer Spacer Spacer Spacer
Spacer © 2008 Concept by examotion GmbH.