Conference logo
Conference and Exhibition

4th Annual Conference on Scalable Vector Graphics
Conference takes place in Enschede, The Netherlands, 15-18 August 2005


The courses are sorted by the primary instructor's last name, which is underlined.

Title: Graphical Wonders: Integrating SVG with Mozilla Firefox
Instructor: Kurt A Cagle, Architect, Mercurial Communications
Target Audience: Programmers and Web Developers
Time: Monday / August 15 2:00 pm - 5:30 pm
Room: Room 3
Duration: Half Day
Description: Mozilla Firefox has recently exploded onto the scene, and it is serving increasingly as the foundation for other technologies (such as the Netscape 8 browser). SVG will be integrated into the browser by the time of the conference as a native implementation, capable of interacting with the DOM and of being manipulated by (and manipulating) XBL. This course examines SVG Programming within Mozilla, concentrating on facets of the application of special interested to web developers and application programmers using the Mozilla framework.
Table of Contents: 1) Overview of SVG on Mozilla a) Brief Overview of Development Efforts b) What is and isn't supported under Mozilla SVG c) Look at Applications 2) Working with the SVG DOM in XHTML a) Creating SVG Objects b) Working With ForeignElements c) XML Manipulation of DOM d) Tying into XSLT and Web Services 3) Building XUL Applications with SVG a) A Quick Overview of XUL b) Integrating SVG and XUL c) Power Tricks with SVG 4) Adding XBL Into The Mix a) Exploring XBL b) SVG Component Design and Development.
Title: SMIL and javascript animation
Instructors: M Michel Hirtzler, Pilat Informatique Educative
Mr Lorenzo Boncompagni
Target Audience: People with basic knowledge of SVG and JavaScript/ECMAScript
Time: Monday / August 15 9:00 am - 5:30 pm
Room: Room 2
Duration: Full Day
Description: For this course, after a short presentation with slides about main animation elements and attributes, we start from basic examples using SMIL animation ( set, animate, animateMotion, animateTransform, animateColor ). After detailed study, we can modify, complete these examples ( see importance of attributes even often forgiven as additive ). We study examples in more complete applications to show how animation can add sense. In a second part, we see how javascript can create animations that SMIL cannot. Participants will work on exercises and create animations. A large part of the course depends on participants wishes and needs.
Table of Contents: Contents of the Workshop 1) Declarative Animation Basics * What can be animated ? * Controlling the time * Predefined animation values * Event driven Animation 2) Script Animation Basics * Core DOM and SVG DOM * Controlling the time * Modifying attributes * Event driven Animation * Combining SMIL and Script Animation 3) Animation Principles * Timing and Synchronization * KeyFrames * Controlling Speed 4) Examples * Using filter for effects on pictures * Morphing * Progressive Drawing * Text animations * Animations with clipPath 5) Compatibility * SVG, SVG Tiny and SVG Basic * Viewers
Title: Building SVG-Front-Ends for Multi-Tier Applications
Instructor: Mr Jan-Klaas Kollhof
Target Audience: developers
Time: Monday / August 15 9:00 am - 12:30 pm
Room: Room 3
Duration: Half Day

SVG can be used to build web based applications where it serves as a user interface on the client side to a more complex back end on the server. Thus the SVG user interface must be able to converse with a server, submitting data the user has entered and displaying data to the it has received from the server.

In this course the interested developer will learn how to build such front ends in SVG. The course will provide different example use cases for the participants to study the concepts involved (e.g. monitoring applications, interactive multi user systems, ...).

Participants of this course should have basics knowledge of SVG and ECMAScript/JavaScript.

Table of Contents:
  • 1. Multi-Tier applications
    • 1.1 Concept
    • 1.2 The thin SVG client
  • 2. User interface design in SVG
    • 2.1 Event driven and asynchronous operation
    • 2.2 Widgets
  • 3. Networking in SVG
    • 3.1 getURL/postURL
    • 3.2 SVG 1.2 interfaces
    • 3.3 Protocols
    • 3.4 Security issues
    • 3.5 Limitations
  • 4. Tools, frameworks, libraries
  • 5. Discussion/Q&A

Title: Building a SVG Webmapping Application Using Postgis, PHP and the UMN Mapserver
Instructors: Andreas Neumann, PhD Student, Institute of Cartography, ETH Zurich
Juliana Williams, Cartographer, GIS-Specialist, Institute for Cartography, ETH Zurich
Olaf Schnabel, PhD Student, ETH Zurich
Target Audience: advanced, attendents should have basic SVG and scripting knowledge already
Time: Monday / August 15 9:00 am - 5:30 pm
Room: Room 5
Duration: Full Day

The course is targeted at GIS specialists or Cartographers with SVG knowledge that want to learn how to leverage Open Source serverside database and mapserver tools in order to build a SVG based client/server interactive webmapping application. PostgreSQL with the Postgis extension is used as a spatial database, PHP as a serverside language to query the db and prepare the SVG structures, UMN Mapserver is used to serve raster data.


We assume that the participants have knowledge in client and serverside scripting languages and know the basics of modifying the SVG document tree using ECMAScript and the DOM. If you aren't familiar with the SVG DOM, the tutorial Manipulating SVG Documents using the DOM and ECMAScript is a good preparation. Basic DB and serverside scripting language knowhow (perl, php) is a plus. It is recommended that the participants bring their own laptops with network hardware (WLAN/Ethernet). A Postgis and mapserver installation will be provided at the instructor's computer. Network infrastructure will be provided by the conference organizers.

Table of Contents:
  • Taking over an existing map layout and map navigation tools
  • Importing ESRI shapefiles to the Postgis spatial database
  • Preparing a UMN map file for serving raster data
  • Writing a simple PHP file to extract and symbolize SVG data for the requested map extent
  • Data filtering and on the fly data reduction
  • Creation of ECMA Scripts to request additional data after zooming and panning
  • Using the OGC WMS interface to request raster data
Title: Introduction to SVG
Instructor: Mr. Douglas A. Schepers, Contract Programmer / Student, Vectoreal
Target Audience: Introduction to SVG
Time: Monday / August 15 9:00 am - 12:30 pm
Room: Room 1
Duration: Half Day
Description: This is an introductory class for SVG. The goal is to teach people enough that they will understand the rest of the conference. I'll take you through the basics of XML, the structure and elements of SVG, and interactivity. This class assumes no prior knowledge of XML or SVG, but familiarity with HTML, CSS, and basic JavaScript would be helpful. This class is geared toward hands-on experience, so people with access to a computer with will benefit the most; however, it will also serve as an overview for those who don't have a computer. For those with laptops, I recommend installing Adobe's most recent SVG viewer, and a good text editor (I use TextPad, and have a special clip library for those interested). No other software will be needed (besides a Web browser). A survey of SVG tools, including graphical editors and other utilities, will be discussed at the end of the session. SMIL, or declarative animation and interaction, will also be treated as time allows; though this is a very useful aspect of SVG, it deserves a course of its own to understand it in depth. Time is better spent in this survey course on scripting, since most presentations at this conference will be based on script. Finally, an explanation will be offered of sXBL, a key new SVG technology. It is expected that much of the conference will focus on these concepts, and this brief overview will aid the audience in understanding what they are and how they will affect SVG development and the Web. The tone of the class is interactive, with questions permitted during the lecture; the syllabus below outlines the planned presentation. Because the pace of the class will depend in part upon the audience, optional topics are also included, as mentioned above. Please note that it is outside the scope of this class to discuss the full range of what advantages SVG offers or the uses to which it may be put; this topic is the goal of the entire conference.
Table of Contents: * XML Basics o Text-Based o Elements + Similarity to HTML + Case Sensitivity o Attributes o Values - Numbers, Strings, Ids o Hierarchical Structure + Parent and Child Elements + Closed and Open Elements ( vs. ) + Namespaces * SVG Basics o X/Y Coordinate System o Viewbox o Painter's Model o Basic Shapes + # X/Y Coordinate System + # Only Positive Values for Height/Width # Rounded Corners # Styling # fill # stroke # stroke-width # stroke-dasharray # opacity # Lots of Other Style Properties # Attributes vs. Style Properties (style='property:value;') # Touch On CSS Classes and Inheritance + + + + + # Path Commands # Absolute # Relative # Each Command and Its Parameters + # XLink Namespace # Inheriting Style Attributes + # SVGFont Basics # Orientation and Alignment # Internationalization Using # and Relative Positioning # Flow Text o Container Elements + (Group) # Inheritance + # Nested SVGs # Percentage Values for Element Attributes # Revisit Viewport + # Elements Not Shown Directly * Revisit # Touch On Gradients, Filters, and Patterns o Transforms + transform Attribute + translate(x, y) + scale(factor) + scale(xfactor, yfactor) + rotate(angle) + rotate(angle, centerx, centery) + skewX(angle) + skewY(angle) + Importance of Ordering * Scripting o Event Types: mouseover, mousemove, mouseclick, mousedown, mouseup, keypress, keydown o Functions + Init o Commonly-Used Methods + getElementById + getElementsByTagName(NS) + createElement(NS) + appendChild + get/setAttribute(NS) + style.getPropertyValue + style.setProperty + And Others o DOM (Document Object Model) accessors + parentNode + firstChild + nodeValue + And Others * SMIL (As Time Permits) o Interactivity + Colors o Timing + Movement * sXBL o XML Binding Language o Custom Tags o Namespace Reminder o Component-Based (Can Use Pregenerated Libraries) o Handles Rendering and Behavior * Tools o Authoring/Drawing Tools o Animation Tools o Other Utilities
Title: Dynamic Applications with SVG and ECMAScript
Instructors: Christian Wenz, Hauser Wenz Partnerschaftsges.
Tobias Hauser, Author, Trainer, Consultant, Hauser & Wenz Partnerschaftsges.
Target Audience: People with basic SVG knowledge and interest in learning scripting.
Time: Monday / August 15 2:00 pm - 5:30 pm
Room: Room 1
Duration: Half Day
Description: SVG without scripting is like Linux without the GNU tools: A good thing, but far away fom using its full potential. SVG itself has animation capabilities, but when it comes to interaction, including reacting upon user input and working together with the HTML file the SVG is embedded in (and vice versa), SVG alone cannot do much. Using ECMAScript and the SVG DOM, this can be achieved with rather little effort. In this half-day course, attendants learn what the W3C DOM is, how the SVG DOM relates to it and get a crash course in ECMAScript. Then, we show how to access the SVG DOM using ECMAScript code, how to react upon SVG events and how to create SVG animations that cannot be done without scripting. Finally, interaction between HTML and SVG is discussed.
Table of Contents: Introduction to W3C DOM The SVG DOM ECMAScript Accessing SVG DOM elements SVG Events Animation with SVG SVG and HTML interaction
Title: Mapping with SVG and ECMA-Script, the client side view
Instructors: andré m winter, cartographer, Vectoreal
Olaf Schnabel, PhD Student, ETH Zurich
Tobias Dahinden, Research Assistant, Institute of Cartography - Swiss Federal Institute of Technoloy
Nicole Ueberschär, TFH Berlin
Target Audience: cartographers and GIS specialists with basic web techniques knowledge such as HTML and JavaScript; SVG knowledge not required
Time: Monday / August 15 9:00 am - 5:30 pm
Room: Room 4
Duration: Full Day

The course is targeted at cartographers and people willing to work on interactive graphics, with basic web techniques knowledge such as HTML and JavaScript. The learning goal is to get map data out of their favourite GIS or DTP and use this to build an interactive SVG map. These are basically the common first steps also needed in for later adding of databases or strong mapserver services. Only SVG and ECMA-Script will be used in this workshop, additionally needed scripts and form elements will be provided as widgets.


We assume that the participants have basic knowledge of client side source customised with XML source code such as HTML.

All instructors held SVG and mapping courses at SVG Open 2002-2004 and/or in university lectures. The main instructors fluently speak English, German and French.

Table of Contents:
  1. Conception
    • Designing the screenplay
    • Designing the map layout
    • Designing the interface
  2. Geometry
    • Getting ASCII out of your preferred GIS or DTP, case studies on shape, ai, fh, cdr.
    • Transforming it into SVG
    • Cleaning up your code
  3. Statistical Data
    • Adding scripting
    • Joining the data with the geometry
  4. Building the Scene
    • Outer SVG framework
    • SVG content
    • JavaScript Code and Data-Arrays
  5. Debugging
    • Cleaning Code
    • Compatibility
  6. Closing
    • Other approaches
    • Excursus: Adding databases and mapservers