DeltaXML with SVG - A Graphical View

SVG (Scalable Vector Graphics) is the W3C standard for representing graphics in XML. Because SVG is pure XML, DeltaXML can be applied to two SVG files to find the differences and represent them as an XML delta. We have taken a simple SVG graphic and modified it, then by processing the resultant delta we show how the changes can be converted into SVG animation.

This is not just about SVG, though. This demo shows how DeltaXML is being used for

• change identification - the delta between the two documents is computed by the DeltaXML Core engine;
• change processing - the delta is processed and used to generate an animated SVG;
• change synchronization - we show how to propagate changes between "edit paths" and to manage variants of a document.

Step through the demo to see how we animate the changes, merge edits and synchronize. Alternatively, you may prefer to check out the underlying SVG demo code.

As well as being a useful technique for use with SVG, this demo shows the power of DeltaXML for managing change in any XML. The techniques shown here can be applied to W3C Schema, XBRL, XHTML or any other vocabulary.

1. Crouching Tiger, Hidden Changes
2. Merging SVG with DeltaXML
3. Synchronization - A Graphical Demo
4. Optimization Techniques
5. Under The Hood

Requirements

We have embedded rendered images of the SVG files used for the demonstration on the following pages (we faced too many browser incompatibilities dealing with <object>, <embed> tags and different SVG plugins to provide pages with embedded SVG which worked reliably in different browsers).  We also provide explicit links to the bitmaps and SVG files (which can be viewed by SVG plugins)

 If you use an svg plugin/browser you wil need one which supports animation in order to see the change animation - this is well supported by earlier versions of the Adobe viewer, though the current (3.0.3) release has problems with our (valid) SVG. If you have no SVG browser plugin currently installed, we suggest you use the Adobe beta version, check the Adobe plugin page for an earlier version or install a current SVG-enabled Mozilla/Firefox build.

Firefox 1.5 SVG support is developing fast, but at the time of this writing does not yet support the <animate> element.
The Corel SVG plugin is also currently missing <animate> support, as is the Apache Batik Squiggle project.

Note: You may want to try the carto.net SVG switcher if working with SVG.

Conclusions

This short demonstration shows the potential for applying DeltaXML to graphical objects in SVG by operating at the XML level. DeltaXML is performing a comparison at the XML level and not at the graphical level. The full context delta provides an XML file with both old and new graphics in a single file that can be processed to generate SVG. Color, animation or other methods can be used to show the changes. Variations allow SVG files to be merged and variants to be updated.

This is only possible because of the unique features of DeltaXML:

• The full context delta provides a pure XML representation of the two SVG files in one single XML file, with changed data clearly identified
• The ability to compare unordered elements is necessary for some SVG elements
• The use of id attributes as keys ensures that corresponding graphical elements are compared, when they are in the same place in the SVG file.

Next: Crouching Tiger, Hidden Changes