SVG Open 2003
Conference and Exhibition

This tutorial is designed to introduce programmers to the fundamental concepts of the W3C Document Object Model (DOM). The DOM is a standards based application programming interface (API) to XML documents such as SVG images. The DOM is implemented as a parser in numerous programming and scripting languages, such as ECMAScript/JavaScript, C++, Java, and Python. A DOM parser reads XML into an in-memory tree structure containing various types of nodes. The API provides a wide variety of methods for examining or changing individual parts of the tree. The DOM is a powerful and flexible means of accessing SVG images.

Introduction to the DOM can be used as a prerequisite to Intermediate DOM. It is aimed at developers with little or no knowledge of the DOM, or those who have used the DOM in the past but would like a refresher on the fundamental concepts. Practical examples using ECMAScript/JavaScript and group interaction will be used throughout the course. At the end of this tutorial, you will have a basic understanding of the DOM, its API, and how it can be used in SVG applications.

• What is the DOM?
  • W3C Specification
  • API
  • Document as a Tree
• Common usages of the DOM
• Why the DOM is important to SVG
  • DOM in browsers
  • DOM in other applications
• The DOM's Strengths and Weaknesses
  • DOM vs SAX
• Implementations of the DOM
  • ECMAScript/JavaScript
  • Java
  • Other
• DOM Data types
  • Node
  • NodeList
  • NamedNodeMap
  • DOMString
  • DOMImplementation
  • DOMException
• DOM Inheritance
  • The Node class
  • Node sub classes
• DOM API
  • Node
    • Document
    • Element
    • Character data
    • Attr

This half-day course is designed to get you started regardless of your previous exposure to GML. Except for the first three introductory topics, this is a technical course, which assumes previous exposure to XML technologies and a working knowledge of programming languages and system modeling concepts (including UML).

The first topic is non-technical and is intended to give a conceptual picture of what GML offers and the benefits it offers over similar technologies available today. The course will provide additional detail on key XML technologies at a technical level including, in particular, XML Schema, XLink and XPointer.

• GML
  • Why GML? Problem domain, creating new opportunities.
  • History of GML.
  • Application of GML. How is it used today, comparison to other technologies and the future of GML
• GML Model
  • Feature model
  • Geometry model
  • Other models (topology, temporal, coverages)
  • GML feature relationships - geolinks
• Designing and building GML schemas
  • From UML models to GML code
  • GML patterns
  • GML schema encoding rules

This full day course will look at a number of "advanced" techniques for building applications with the SVG DOM (Adobe's ASV version), including the use of Regular Expressions, Text manipulation, animating classes, building SVG trees, browser access (IE), XSLT, and more. This class assumes that the users are familiar with SVG and Javascript.

1. Organizing for Programming
   1. Grouping and Contexts
   2. The Importance of Transformations
   3. Declared vs. Live Content
   4. Use of Classes
2. SVG DOM
   1. Overview of SVG DOM Classes
   2. Incorporating Javascript
   3. Programming Javascript Classes
   4. SVG DOM vs. MSXML DOM
3. Event Handling
   1. Chaining Events
   2. Riding Events in DOM
   3. Hooking into Animations
4. Text and Regular Expressions
   1. Text Manipulation
   2. Parsing attributes with regular expressions
   3. Building Text Blocks
5. Creating Components
   1. SVG and IE
   2. Invoking ActiveX components
   3. XSLT Transformations
   4. Exposing Interfaces
6. Summary

The course has the target to produce a map with some interaction. We start with a simple 'hello world' graphic. Then we merge our graphic with a more complex graphic (obtained by a SVG export) and add a pixel background image. In a second part we add some simple JavaScript Code to introduce interaction.

• 1. Basic SVG (2 h)
  • 1.1. Hello World
  • 1.2. Basic Shapes
  • 1.3. The Path-Element
  • 1.4. Merging two SVG graphics
• 2. Organising a Document (2 h)
  • 2.1. Styles
  • 2.2. Symbols
  • 2.3. Adding a relief (rasterimage)
  • 2.4. Different coordinate systems
• 3. Interaction (1 h)
  • 3.1. A very short introduction to JavaScript
  • 3.2. Adding JavaScript to SVG
  • 3.3. How to get a JavaScript function for not programmers
• 4. Animation (1 h)
  • 4.1. Something about animation in general
  • 4.2. SMIL
  • 4.3. Different kinds of animation

The documentation is available via http://www.karto.ethz.ch/td/gps/

• SVG provides an environment suitable for portability - both code and data can be easily ported for to the increasingly large number of devices and operating systems. Depending on the application, as much as 90% of the code can be re-used across as many platforms as the user agent supports.
• Leveraging the animation elements empowers the developer with tools to animate complex graphics smoothly and efficiently.
• Using SVG separates presentation from application logic, which speeds up development time and allows for more artistic fine-tuning.

1. Introduction
   1. Graphical Mobile Applications
   2. Challanges developing for small devices
2. Mobile SVG
   1. What is Mobile SVG?
   2. The Mobile DOM
      1. Primary Interface Overview
      2. What?s missing from Full?
      3. Bindings and mobile devices
3. A Case Study
   1. Requirements and definition
   2. Advantages of development with Mobile SVG
4. Portability
   1. Code architecture
   2. SVG document architecture
   3. Roles of SVG in portability
5. Rendering
   1. Memory-efficient rendering
   2. Document, Node and Element interfaces
   3. Board data creation and display
6. Animation
   1. The SVG Advantage
   2. Chaining animations
   3. TimeEvent and ElementTimeControl interfaces
   4. Chaining animations
   5. Harnessing smooth interpolation with AnimateMotion
   6. SVG Vector vs Raster animations
   7. Partial redrawing
7. Mobile User Interfaces
   1. Uses of SVG in UI development
   2. Specifying UI with SVG
   3. Multiple input mechanisms
   4. Input Event Mapping
   5. CharacterData and MouseEvent interfaces
8. Conclusion

1. What Is SVG
2. Viewers And Tools
3. Basic Principles And Grammar
   1. Document Structure
   2. Drawing Model
   3. Basic Shapes
   4. Text
   5. Paths
   6. Transformations
   7. CSS and inheritance
   8. Links
   9. Symbol and Use
4. Advanced Features
   1. Patterns
   2. Images
   3. Reusable elements
   4. Gradients
   5. Filters
   6. User Style Sheets
   7. Geographic Metadata

This tutorial is designed to teach the more advanced topics of the Document Object Model (DOM). The DOM is a W3C standard that defines a tree based interface to documents, primarily XML documents. It is defined in CORBA IDL, but implemented in many different languages, ranging from Javascript to Java to Python. It allows a programmer to refer to, retrieve, and change nodes within an XML tree. It was designed to be easy to use, yet powerful enough to perform the necessary tasks.

This tutorial is aimed at developers with some basic knowledge of the DOM, and also assumes a good working knowledge of XML. Topics covered in this tutorial include the key DOM concepts, advanced DOM mutations, namespaces, advanced DOM methods and the DOM Events model. Also an introduction to the SVG DOM will be given. Throughout this tutorial, examples will be given in Javascript and shown in Internet Explorer. Where Internet Explorer diverges from the standards, both syntaxes will be taught.

By the end of this tutorial, you should have a clear understanding of the DOM and its relevance to your software development. You will have learned the key concepts and interfaces described in the DOM specification, and also the events mechanism relating to the DOM. You should be able to access and modify complex XML documents and successfully use the DOM within your application development.

• Introduction to the DOM
• What is the DOM?
• Basic DOM interfaces
• Advanced DOM Interfaces
• XML Namespaces
• What are namespaces?
• DOM2 support for namespaces
• DOM Events
• What are events?
• DOM2 event interfaces
• A comparison of the DOM specifications
• SVG DOM
• Manipulation of SVG using the DOM
• SVG DOM Events

This course is intended to be an introduction to the main principles behind SVG and how to successfully use it within a Web site. The course will start with a quick overview of sites that use SVG, both effectively and ineffectively. We will then discuss the ways in which SVG can enhance a Web site: static and dynamic graphics, text labels, navigational bars, gradients, etc. The second part of the course will concentrate on how to use these "building blocks" in the construction of a successful Web Site and will attempt to answer the questions: when is it appropriate to use SVG? what parts of a Web site will benefit the most from SVG? how accessible to users will the site be? how can someone tackle the complexity of designing and building a site that includes SVG? how can SVG graphics be automatically generated? The course will end with a discussion on the future of SVG. This course assumes basic knowledge of SVG and other Web related technologies, such as XHTML, XML, and CSS.

• An overview of how SVG is being currently used in Web sites
• Using SVG in a Web site
  • Creating static graphics
  • Creating fancy text labels
  • Creating navigational bars
  • Embedding SVG within HTML and XHTML
  • Combining SVG and Cascading Style Sheets
• Designing a Web site that uses SVG:
  • Advantages and disadvantages of SVG. When does it make sense to use SVG in a Web site?
  • Tacking complexity: designing visual components
  • Generating SVG automatically
• The future of SVG

1. SVG from Database Queries: Exploring the Toolbox
2. Web Services
3. Web service development
4. There are five basic requirements for service-based development:
5. XML: A standard way to represent data
6. SOAP: A common message format
7. SOAP elements
8. The SOAP Envelope element
9. The SOAP header element
10. The SOAP Body Element
11. The role attribute
12. SOAP HTTP binding
13. A SOAP example - request
14. A SOAP example - response
15. WSDL:Web Services Description Language
16. Elements in a WSDL document
17. WSDL element
18. WSDL element
19. WSDL and elements
20. A (simplified) WSDL Example
21. Web service for database access
22. XSL ? a Style Sheet for XML
23. Three parts to XSL
24. XSLT
25. XSLT: Some of the possibilities
26. SVG
27. Putting it all together

The aim of this course is to learn advanced techniques of webmapping.
After a short introduction the participants will be made familiar with complex webmap elements. This lesson is especially focusing on concepts of map navigation, layer control and interactive overview maps. The next part is covering methods of serving maps with PHP. This easy-to-use server implementation allows the delegates to get into dynamic map creation on a webserver comfortably. In order to develop a completely dynamic webmapping environment, additional data has to be loaded. The attendant will explore ways of creating new thematic SVG layers by connecting to a MySQL database. The course will end by finishing an individual highly interactive thematic map within a webmapping environment.
All examples are realized by a prepared SVG Map. In order to provide best assistance, a detailled workshop paper will be handed out. In addition to that, the course instructors will be available for individual help within the sessions as well.

View Documentation

Download Course Files

• map navigation
• layer control
• interactive overview map

• Introduction in PHP
• Client-Server-Communication (getURL / parseXML)

• Loading additional data
• Creation of thematic layers

Prerequisites
No previous experience with Corel Smart Graphics Studio is required. Attendees should have a basic understanding of SVG concepts or familiarity with structured markup languages including HTML or XML. An understanding of vector illustration, development, or HTML WYSIWYG authoring tools is also recommended.

Objectives
After this course, attendees will learn how to create SVG-based smart graphics with Corel Smart Graphics Studio. This course will introduce the basic components of Corel Smart Graphics Studio, provide an overview of its development environment, and will explore the best practices that lead to an effective smart graphics creation workflow.

Topics Covered

• SVG Smart Graphics Overview.
• Introduction to the Corel Smart Graphics Studio development environment, with special attention given to each component of the platform.
• Exploring the smart graphics creation process including UI Controls, Behaviors, Dynamic Elements and Attributes, Data Mapping and Process Building.
• Best practices for creating a successful smart graphics application.

This is a Full Day course with extensive Hands On sessions.

The Extensible Markup Language (XML) is a meta-language used to create markup vocabularies for structuring domain-specific information. In general an XML document does not contain any information on how it should be displayed. To display an XML document as anything other than raw markup content requires a style sheet and/or some form of transformation. An XML document can be formatted for display using a style sheet language such as Cascading Style Sheets (CSS). Alternatively the XML document could be transformed into a display-oriented format such as XHTML. The Extensible Stylesheet Language (XSL) was specifically developed for publishing XML documents both online and in print. It consists of a transformation language and a set of formatting properties.

This tutorial, as presented at various XML conferences in Europe and the US, provides an excellent introduction to the important technologies for publishing XML content. In particular it will focus on using XSL Transformations (XSLT) to transform XML content for publication. Each stage in the process of creating an electronic publication is examined in detail including maintenance issues and best practices. This process will be demonstrated through the creation of textual content for publication on the Web but is applicable to other types of electronic publishing such as SVG. Delegates attending this tutorial will obtain a theoretical and practical understanding of the technologies involved in electronic publishing with XML and XSLT including the creation of Web content.

View Course Slides
 

Module 1:

History and Fundamentals of XML

Module 2:

Defining and Understanding DTDs

Module 3:

XML Publishing Vocabularies

Module 4:

Transforming and Formatting XML documents

Module 5:

Practical Exercises

Module 6:

Publishing Scenarios

This workshop has two main objectives:

1. To introduce attendees of the workshop to current SVG GUI packages.

   There have been numerous requests for SVG UI widgets within the SVG community. Several projects have been developed to fill the short term need. This first objective aims to demonstrate the capabilities of the existing projects and ensure that attendees are aware of the available functionality.

2. To bring together interested parties to discuss frameworks and standards for future SVG GUI design

   There have been enough requests for standard SVG UI widgets that the SVG 1.2 specification mentions it in the section on SVG and XForms integration. The authors ask whether the SVG specification should ?describe a default rendering and behavior for some form elements, such as buttons and sliders?, or whether this should be left up to the individual author. This has been left as an open discussion question and should be discussed at this workshop.

A number of projects have sought to fill the short term need for SVG UI elements. Kevin Lindsey provides a number of SVG GUI widgets on his site, www.kevlindev.com, and started the SVgUI project (currently headed by Mark Robinson and Richard Bennett). Christopher Lewis produced the Custom GUI (CGUI) toolkit, available at http://homepage.usask.ca/~ctl271/cgui which was used for scientific visualization at brassica.agr.gc.ca. Together these three projects comprise the largest collection of publicly available SVG GUI components and functionality, but there are also commercial projects emerging to fill the desire for SVG GUI components (see for example www.corel.com/smartgraphics).

The question becomes: How can these diverse projects work together to provide users with the most complete set of widgets and prevent duplicate efforts within the different projects? The SPARK project (www.schemasoft.org) was created in response to this question. The initial aim of SPARK is to develop an API and programmatic conventions for ECMAScript/SVG to provide a framework for interoperability among SVG GUI components.

There are a number of direct benefits to the SVG standard that will result from the creation of well-designed SVG GUI architecture. For example, SVG will become a more attractive option for web based applications and allow SVG to gain momentum in a market dominated by Macromedia® Flash®. The added visibility will in turn increase interest in and use of SVG. The scientific community (outside GIS) is starting to produce SVG as an output format for their applications, and a well defined SVG GUI architecture will allow them to exploit further the capabilities of SVG. The creation of these projects should push the boundaries of the specification and highlight potential areas for expansion of the standard.

However, to ensure that we reap the benefits of an SVG GUI architecture, many standards of best practice must be developed, publicized, and adhered to. This will require collaborative planning by the major groups/individuals who are involved?or should be involved?in the creation of SVG GUI standards. Part three of this workshop will foster communication among these individuals with a view to promoting informed decision making about SVG GUI standards and architecture.

The results of this meeting will be published on the SPARK website, and worked into the standards developed as a part of that project.

1. A survey of the uses people are finding for SVG GUI.

   This section of the workshop will consist of several short demos to allow attendees to see several working applications and how they were facilitated through the use of SVG GUI.

2. Introduction to existing SVG GUI options

   This section of the workshop will be ?hands-on?. It will step through the creation of several simple interfaces using the existing GUI options and demonstrate their use for a specific task. GUI options to be demonstrated including (but not limited to): kevlindev widgets, SVgUI widgets, and the CGUI widgets.

3. A discussion of frameworks and standards for SVG GUI projects.

   This section of the workshop will discuss the architecture of two or more existing GUI projects, and use them as the basis for discussion on standards and interoperability in new SVG GUI projects.

You've probably seen maps of gardens that are given out at Botanical gardens or next to photographs in magazines. These are a stylized picture of the garden with numbers representing plants and a key to show what plant each number represents. This is easy enough for a photograph but a real garden will keep changing so the map will need frequent updating. This course explains how to do an interactive SVG version of this where if you click on a number, information about the plant is displayed. This may include a list of photographs and clicking on this list will display the photos in pop-up windows. Updating is facilitated by generating the SVG map from an XML database using XSLT. This will be useful for serious gardeners and plant collectors. However it uses principles with more general applications: the applicability of XML to taxonomy (biological classification) and generating SVG with XSLT. A map of this type can be seen at www.PixelPalaces.com - go to the portfolio page or the SVG gallery. As it's rather complicated this is a two-part (full day) course.

Part I
Developing an SVG background showing the main features of the garden (but not the plants). This may be done with an authoring tool and will probably cover basic SVG elements like rect and ellipse.

Developing an XML database of the plants, classifying them in families, genera, species etc. but also adding details like common names and location in the garden. This will include an explanation of taxonomy and how its structure is similar to that of XML.

Developing an XSLT stylesheet to add the plants (as numbers) to the map. This covers basic XSLT, using and applying templates, using data from current database element.

Part II
Adding JavaScript for interactivity - making data about plants appear when the corresponding numbers are clicked on. This covers using JavaScript to change the display property of SVG elements.

Adding the XSLT code to display plant information. This involves extracting data from ancestors, siblings, siblings of ancestors, and descendents of the current element in the XML database. It also addresses the issue of displaying text in SVG without a word wrap (assuming a word wrap hasn't been implemented in a common viewer by then).

Displaying images of plants in pop-up windows. It will be explained that this requires the SVG map to be displayed in an XHTML page. This involves using XSLT to generate somewhat complicated JavaScript arguments.

XSLT is the most popular way to turn one XML vocabulary into another. This is important in a variety of domains. In publishing, it is necessary to turn specialized vocabularies into display-specific ones like HTML (for the Web) or XSL-FO (for print). In e-business, it is necessary to translate between various organization or industry-specific vocabularies into more generic ones. And most interesting for SVG Open attendees, it is possible to use XSLT to translate from various data sources into SVG graphics. XSLT is an indispensible part of a well-rounded XML developer's toolkit.

XSLT is a sophisticated side-effect-free language based upon years of research and experimentation with various XML transformation techniques. This full-day class will teach basic XSLT techniques and advanced techniques specifically appropriate to transformations into SVG. It will start by teaching the XPath language embedded in XSLT, continue by showing how to use XSLT to pull data out of XML documents, then show how to build transformations with multiple templates and more complicated flows of control. XSLT is a full programming language and could require several days to teach in its entirety. This course will cover enough of the language to handle simple input and output formats, including basic diagrams.

1. Why use XSLT?
2. The Role of XPath
3. XSLT's XML Data Model
4. XPath Quickstart
5. The XSLT Processing Model
6. Simple XSLT Stylesheets
7. Basic Statements
8. Flow Control
9. Graphical Stylesheets
10. Advanced XSLT Features
11. XSLT Futures
12. Other Resources