Tuesday, June 5, 2007

SVG vs. XAML

Jon Galloway has a post comparing SVG to XAML. SVG - for the uninitiated is Adobe's standard XML file format for vector graphics. Jon mentions that SVG and XAML are very similar and that Microsoft seems to have ignored SVG (which, they may very well have).

However, one thing Jon didn't mention is that XAML isn't just for vector graphics. XAML is a fairly powerful declarative programming language. It just so happens that you can store vector graphic data within a XAML file. SVG, on the other hand, is only for vector graphics. As I understand it, you can manipulate SVG renderings via script, but its definitely not a programming language in its self.

Now, XAML and SVG are fairly similar - I am going to steal Jon's example to demonstrate:

SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 95">
  <path fill="#7B4" d="M106,13c-21,9-31,4-40-2l-10,35c9,6,20,11,40,2l10-35z"/>
  <path fill="#49c" d="M39,83c-9-6-18-10-39-2l10-35c21-9,31-4,39,2l-10,35z"/>
  <path fill="#E63" d="M51,42c-5-4-11-7-19-7c-6,0-12,1-20,5l10-35c20-8,30-4,39,2l-10,35z"/>
  <path fill="#FD5" d="M55,52c9,6,18,10,39,2l-10,35c-21,8-30,3-39-3l10-34z"/>
</svg>


XAML:
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <Path Data="M106,13c-21,9-31,4-40-2l-10,35c9,6,20,11,40,2l10-35z" Fill="#7B4"/>
  <Path Data="M39,83c-9-6-18-10-39-2l10-35c21-9,31-4,39,2l-10,35z" Fill="#49c"/>
  <Path Data="M51,42c-5-4-11-7-19-7c-6,0-12,1-20,5l10-35c20-8,30-4,39,2l-10,35z" Fill="#E63"/>
  <Path Data="M55,52c9,6,18,10,39,2l-10,35c-21,8-30,3-39-3l10-34z" Fill="#FD5"/>
</Canvas>


The only major difference besides the Canvas tag and the svg tag is that SVG is all lowercase, and XAML is title cased. Now, why wouldn't Microsoft just make Path start with a "p" instead. Well, in XAML, each tag represents a class that is going to be instantiated and added to the controls logic/visual tree. Since in .NET, all classes are Title Cased, obviously their XAML counterparts are going to be title cased as well.

Jon mentions many different ways to convert SVG to XAML, but here is my idea (not implemented, just thinking): create a new path class in you local namespace that starts with a lower case p (sorry VB'ers, this can't work for you) and then just create a real Path instance behind it. Don't know if that will work - just a thought.

Aaron

No comments: