SVG and XAML

Clash of cultures

Keywords: SVG, XAML, Adobe, Microsoft

Tobias Hauser
Author, Trainer, Consultant
Hauser & Wenz
Laerchenweg 3
Starnberg
D-82319
Germany
th@hauser-wenz.de

Biography

Tobias Hauser works as an author, trainer and consultant with focus on web technologies. He wrote or co-wrote over three dozen books, including SVG Unleashed (Sams Publishing) [SVGUn] and two of most successful German Photoshop books. He frequently speaks at conferences around the globe; topics include SVG and web graphics in general, server-side generation of dynamic content and comparison of competing web technologies. Together with Christian Wenz, he is editor of "Web Professional", a bi-monthly German publication for professional web developers; additionally, they are both responsible for PHP's PEAR::UDDI module. He also frequently publishes articles in various IT magazines. Tobias holds a degree in Business Management from Ludwig-Maximilians-University of Munich, Germany.

Christian Wenz
Author, Trainer, Consultant
Hauser & Wenz
Laerchenweg 3
Starnberg
D-82319
Germany
chw@hauser-wenz.de

Biography

Christian Wenz works as an author, trainer and consultant with focus on web technologies. He wrote or co-wrote over four dozen books, including [SVGUn] (Sams Publishing) and various titles on web development with ASP.NET and PHP. He was awarded Microsoft MVP (Most Valued Professional) for ASP/ASP.NET for two years in a row. He frequently speaks at conferences around the globe. Together with Tobias Hauser, he is editor of "Web Professional", a bi-monthly German publication for professional web developers. He also frequently publishes articles in various IT magazines. Christian holds a degree in Computer Science from Technical University of Munich, Germany.


Abstract


As an (independent) web developer, you cannot focus on one technology alone. Only PHP, only Java, only Python is not enough. And a lot of such developers have also met Microsofts ASP.NET on their way, including ourselves. In the area of web design and development with SVG or Flash it is not so easy to be open-minded. SVG is an amazing technology, but succeeds only in some areas, however does have problems conquering the desktop. Now Microsoft has in some way taken the idea of SVG and announced an own vector graphic language, XAML. XAML is part of Avalon, the presentation layer of the next Windows version code-named Longhorn. WVG (Windows Vector Graphics) is the vector graphic part of XAML and looks very similar to SVG. This analysis is interested in the technical differences and how to use SVG know-how for XAML. It also focusses on preparing you for the XAML impacts on your daily work. Important questions are: will XAML get a part of the Internet or is it just Windows-based? How can you convert SVG to XAML and vice versa? What will the impact of XAML on SVG be? Some of these questions can only be answered by the final version of Longhorn, but it is wise to be prepared.


Table of Contents


1. XAML today
2. WVG and SVG
3. Scripting
4. Conclusion
Bibliography

1. XAML today

The idea behind XAML is not new: a XML-based language, which describes a UI. A very similar model is Mozilla's XUL (cf. http://www.mozilla.org/projects/xul/). But there is one big difference between XAML and XUL: XAML will not only be used for only one application and some derived programs, XAML will be the basis for the next Windows and all underlying programms.

To be correct, the term XAML is only one part of Avalon. The official specification does not contain explicit information on what part of this XAML could be (cf. http://winfx.msdn.microsoft.com/library/en-us/wcp_conceptual/winfx/graphicsmm/overviews/mediagraphics_ovw.asp). You can find out a little bit more via the availible implementations of XAML. Some companys have already started with XAML-related products. One of the most well known is XAMLON (cf. http://www.xamlon.com/). You can install the XAMLON browser as a Windows program with the usual look & feel and then have a viewer for XAML content. Some examples already show the abilities of XAML.

xamlon.png

XAMLON is a implementation of XAML that can be used today.

Figure 1: XAMLON

mobiform.png

Mobiform is another XAML-browser. If you open a XAMLON sample file in Mobiform, however, it fails.

Figure 2: Mobiform

For us, the most important part of XAML are not the UI components but the vector graphics. The language responsible for this is named WVG (Windows Vector Graphics). The UI components will look different in Windows Longhorn, but they will stay UI components. The vector graphics instead will change the look and feel of the whole UI. With vector graphics, Windows programmers and designers have a lot of new possibilities: changing themes and flexible animation are only two of them.

2. WVG and SVG

SVG is in a difficult position. As Adobe acquired Macromedia, no large software company stands 100% behind it. That makes the anger of SVG community even more understandable when Microsoft announced that WVG will look like SVG, smell like SVG, but will also be a bit different.

The main difference is the naming convention: WVG-tags are all written in PascalCase, that means, every word (including the first one) starts with an uppercase letter. And the second difference is that every WVG name is a full English name. Wesner Moise, a Microsoft employee, unveils in his blog that these two differences were the main reason for Microsoft not to use SVG (http://wesnerm.blogs.com/net_undocumented/2003/10/xaml_and_standa.html). He also claims that the convertion should be very easy.

Certainly, SVG is not ready for the inclusion of UI components and it is not realistic demanding Microsoft to standardize its Windows UI. But to create a new language only for naming conventions is not very efficient. So one can also guess that there could be other reasons like being independent of W3C and other standardization groups. But even if Wesner Moise is right and names were the (only) reason to create WVG instead of using SVG, this tactic is a hit in the face of the SVG community.

3. Scripting

Of course, XAML does also support scripting to get around the limitations of declarative animations and to be able to interact with the users. However, unlike SVG, the scripting is not done using ECMAScript, but by another standardized language: C#. Since Microsoft is putting a lot of emphasis on the .NET technology, this is a logical choice, however creates great problems when SVG/ECMAScript files shall be converted into XAML/WVG/C# data and vice versa. The possibilities of the languages are comparable, however C# does have the advantage of being able to access the .NET Framework which is more than the core language features ECMAScript is concentrating on. The aspect of scripting could therefore generate a great level of incompatibility of the two technologies used.

The final version of XAML will also support other .NET languages for scripting support. Since the core functionality of .NET resides in the .NET Framework and the .NET languages are just "syntax sugar", this would also allow developers to use JScript .NET instead, Microsoft's JavaScript clone. This, however, would not help too much in a transition from XAML to SVG, since also JScript .NET code will probably rely heavily on the .NET Framework, making a conversion to ECMAScript without the .NET Framework hard.

4. Conclusion

For designers with SVG know-how, WVG and XAML can create a win situation, because this opens a whole new working area. Everybody who loves SVG should be anxious. It is far from certain that the conversion between SVG and WVG will be as smooth as expected. And if it is not, SVG stands alone, not only against Flash/SWF and Adobe but also against XAML/WVG and Microsoft.

Bibliography

[SVGUn]
SVG Unleashed by A. Watt/C. Lilley/D. Ayers/R. George/C. Wenz/T. Hauser/K. Lindsey/N. Gustavsson, Sams Publishing, 2002, ISBN 0672324296

XHTML rendition made possible by SchemaSoft's Document Interpreter™ technology.