XTech 2006 news

Newsletter sign-up


RSS and Atom feed icon News feeds

Dynamic SVG generation under Firefox 1.5 using JavaScript, XML and XSLT

Thomas Meinike (Merseburg University of Applied Sciences / Department Computer Science and Communication Systems)
Browser technology Foyer Room

The first specification of Scalable Vector Graphics (SVG) was released by the W3C organization in 2001. SVG is a vocabulary which describes two-dimensional graphics in XML syntax. In 2003 a modularized version with number 1.1 including the mobile profiles SVG Tiny and SVG Basic came out. SVG includes vector shapes like circles, rectangles, lines or paths for more complex graphical objects. There are also special techniques available: gradients, filters, animations and transfomations. Formatting is done by using presentation attributes or CSS properties.

SVG is attractive for designers and programmers too and supports other technologies like ECMAScript (the standardized form of JavaScript) or XSLT in the field of interactive and dynamic content creation. In the first years users had to install a plug-in for their web browsers. In most cases this was the Adobe SVG Viewer software. Recently more and more native SVG implementations come on the browser market.

The final version of Mozilla Firefox 1.5 provides a subset of the SVG 1.1 specification. Some interesting parts like SMIL animations are not included, but there are enough possibilities to compensate the absent features with script programming based on the Document Object Model (DOM). XML related aspects of Firefox 1.5 are also innovative. Client-sided XSL Transformations and the introduction of ECMAScript for XML (E4X) expand the power of the Firefox browser to handle SVG. The popular AJAX methods enable to communicate with server-side resources like web services out of a SVG document. Using the concept of namespaces SVG document fragments can now be included in XHTML code directly.

This presentation starts with an overview related to the main SVG constructs and their current availability under the Gecko engine of Firefox. Afterwards the aspects of the dynamic SVG generation will be treated in detail. Practical examples will be given along with the theoretical considerations. Some knowledge of XML, XSLT and JavaScript is helpful, but it’s no condition for consuming the presented contents.

Chair: Sebastian Schürmann