Silverlight and XAML, have you guys met Old Man SVG? - Jon Galloway

Silverlight and XAML, have you guys met Old Man SVG?

Summary

XAML uses a vector graphics markup which is very similar to SVG, but since it's part of a complete application framework the designers decided to use a slightly different format. I'd expect that XAML would be able to load SVG, or that there would at least be plenty of tools to convert SVG to XAML, but it was tougher than I thought. After some background, I'll discuss some solutions I found.

UPDATE: Please don't jump the gun and assume that I'm complaining that XAML should have just used SVG. I'm not. I'm saying that it should be a lot easier to get SVG content into XAML format, preferably on the fly. While this post points to some tools to convert SVG to XAML, I didn't find a solution that was both free for public use and worked perfectly on my test files. In my opinion, XAML adoption would really benefit from SVG import or at least conversion.

XAML and SVG, separated at birth?

Windows Presentation Foundation introduced vector graphics as a first class citizen in the desktop development arena. XAML, the language used to define WPF applications, contains pretty good support for describing vector graphic images.

SVG LogoOf course, there was already a pre-existing W3C standard for vector graphics - SVG - which is supported in most modern browsers except Internet Explorer. Why doesn't WPF just use SVG for vector graphics? That question's pretty quickly answered when you start to actually study WPF - WPF is an entire application framework, and the vector graphics portion was written to fit with the rest of the framework. Ian Griffiths described it pretty well back in 2004:

"On the face of it, it seems strange to invent a new way of representing vector graphics in markup when a standard already exists. However, the principal advantage of these shape classes is that they have been designed to integrate into the Avalon programming model. The vector drawing elements derive from the same FrameworkElement base class as all other XAML elements, and follow the same naming conventions... 

By not using SVG, Avalon ensures that vector graphics can be mixed in with any other kind of markup in your XAML, and can take advantage of all of the same layout facilities."

Aside: XUL, Mozilla's XML User Interface Language, took a different approach by aggregating existing technologies such as HTML, CSS, SVG, and Javascript. The benefit is that it uses accepted standards, but the tradeoff is that it's not as cohesive and consistent as the WPF system.

Microsoft doesn't care about SVG people!

However, the actual vector graphics code in these systems is remarkably similar, and it's a shame that XAML seems completely oblivious to the pre-existing SVG standard. This is of course an even bigger question now that Microsoft's new web technology, Silverlight is as ignorant of SVG as Internet Explorer's always been.

UPDATE: To clarify, I'm not saying that I think XAML should change, just that it should be able to import SVG. What I'd really like to see is something like is something like the XamlReader.Load() for SVG. SvgReader.Load() would pull SVG content into valid XAML and allow me to pop it into a content section.

I've been surprised at the lack of support and / or interest in loading SVG into WPF. SVG (scalable vector graphics) and WPF shapes are very similar. Compare the SVG and XAML code to create the Windows logo:

<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>

Now in 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>

Unfortunately, Microsoft seems to have decided to pretend that SVG just doesn't exist. Expression only works with XAML, and has no SVG import or export. Microsoft seems to see SVG as nothing more than the native format of their competitor, Adobe Illustrator, rather than the most widely accepted and used vector graphics file format. The only Microsoft application I can think of that supports SVG is Visio, and only via export.

The quest for the SVG to XAML converter

Since WPF is ignorant to SVG's existence, I went looking for an SVG to XAML converter. Since the formats are so similar, I figured it would be a no-brainer. Not so.

  • SVG2XAML was discontinued in 2004. SharpVectorGraphics (SVG#), which powered SVG2XAML, was abandoned in 2005; the latest version wouldn't build for me.\
  • Xamalon had support for Adobe Illustrator's SVG format, but unfortunately they were ahead of their time and couldn't hold out waiting for the long, long, Longhorn release.
  • There's an Adobe Illustrator SVG to XAML converter, but it requires Illustrator. I'm an Inkscape user, though, so that's no help to me.

I was looking into starting an SVG to XAML project when I finally started finding some answers.

WPF-Graphics.com helped me to lose weight and pick up chicks

WPF-Graphics has some cool class libraries which convert a variety of vector formats to XAML, including SVG. The SVG reader, WPF-Graphics ReaderSVG, allows for loading from an SVG resource (locally of via URI) via some really simple code:

Viewbox svgButton = Ab2d.ReaderSvg.Instance.Read("openButton.svg");
myButtonsStackPanel.Children.Add(svgButton);

The sample application did a decent job with loading the basic paths for some of the SVG files I had sitting around (apologies, Scott). It didn't handle embedded bitmaps well, especially in dealing with absolute vs. relative coordinates which seems to be one of the tricky differences between SVG and XAML.

ReaderSvg

It's a free download, so give it a spin. Note that you'll need to have the Visual Studio 2005 extensions for .NET Framework 3.0 (November 2006 CTP) installed to build the project. The only bad thing I can think to say about Ab2d.ReaderSvg is the licence, which restricts use in a commercial program without the author's permission; I wonder if there's a cost involved and, if so, what it is.

Anything worthwhile can be done in Javascript...

Also very interesting is Sam Ruby's a javascript SVG to XAML converter that's working pretty well (information here, demo here). Here's a direct link to the javascript file.

SVG to Silverlight

Let's hear it for sleazy hacks

There's another way - eddwo's Cheap Trick for SVG > XAML Conversion:

1. Open the SVG in Inkscape.
2. Save it as a PDF.
3. Open the PDF in Adobe Reader.
4. Print the PDF to "Microsoft XPS Document Writer"
5. Rename the xps to zip.
6. From the zip extract out /Documents/1/Pages/1.fpage
7. Rename the fpage to xaml.
   Within the file the top level element is FixedPage, which contains a Canvas with the relevant paths. You can pull out just the path data and use it in your app.
Rather a long way around, but it seems quite effective.
You can't print straight to the xps writer from inkscape, as it just prints as a bitmap rather than preserving the vectors.

Published Tuesday, June 5, 2007 1:12 AM by Jon Galloway

Comments

# re: Silverlight and XAML, have you guys met Old Man SVG?

Hate to tell ya this, but i don't think adobe cares about SVG either. i think it's gonna end up by the wayside

Tuesday, June 5, 2007 11:24 AM by Darren Kopp

# re: Silverlight and XAML, have you guys met Old Man SVG?

I posted a FAQ about SVG and XAML last year with some links to old posts about it...

In short, WPF was about building an integrated platform for Windows with a consistent .Net based API.

Thanks, Rob

Rob Relyea | Program Manager, WPF & Xaml Language Team

robrelyea.com | /blog | /wpf | /xaml

Tuesday, June 5, 2007 7:12 PM by Rob Relyea

# re: Silverlight and XAML, have you guys met Old Man SVG?

Thanks for taking the time to comment, Rob. I understand why XAML doesn't use SVG. The main thing that I was pointing out in my post was that loading SVG into XAML should be a lot easier. There are a lot of people who say "Hey, it's trivial to convert..." but

(1) XAML doesn't do it, and

(2) I haven't found any solid, public libraries that do it.

If it really is trivial, than the XAML team should make at least baseline SVG import a priority. From my contact with the non-Microsoft universe, I believe that SVG import (or at least a conversion utility) would have a pretty positive impact on the acceptance of XAML based technologies (especially Silverlight).

Tuesday, June 5, 2007 7:47 PM by Jon Galloway

# re: Silverlight and XAML, have you guys met Old Man SVG?

Jon,

Seems to me that a xslt might help solve the problem somewhat. I mean just based on your samples the data is there, it's just a transform away. Don't know where there would be a major difference that might cause it to get thorny though.

Tuesday, June 5, 2007 9:19 PM by Kevin Isom

# re: Silverlight and XAML, have you guys met Old Man SVG?

@Kevin - I agree, it does seem like this is a simple XSLT problem. However, Avalon's been around for a long time, and I challenge you to find someone who's published that XSLT. Everyone says it should be simple, but no seems to have done it.

Wednesday, June 6, 2007 12:56 AM by Jon Galloway

# re: Silverlight and XAML, have you guys met Old Man SVG?

Kanye West don't care 'bout SVG people either.

Wednesday, June 6, 2007 9:22 AM by Jeremiah Morrill

# re: Silverlight and XAML, have you guys met Old Man SVG?

there's a hanselface in there! better update your virus defs.

Thursday, June 7, 2007 8:57 PM by lb

# re: Silverlight and XAML, have you guys met Old Man SVG?

Maybe the Mono team will add the SVG support.  They have written Moonlight which has a XAML parser.  Maybe, the Open Source community will push them to add this sort of feature (at least to their parser) though they like being as compatible with MS as possible.

Either way, XAML has made it onto Linux and is accessible not only from Mono, but directly from C/C++/etc.

Saturday, June 30, 2007 10:51 AM by Vladimir Giszpenc

# re: Silverlight and XAML, have you guys met Old Man SVG?

I put some stuff online (on mu blog) dealing with SVG to XAML and XAML to SVG transformations. You might want to take a look.

Saturday, September 8, 2007 6:52 PM by Toine de Greef

# re: Silverlight and XAML, have you guys met Old Man SVG?

Does we have a silmilar function for SVG's getURL(...) in Silverlight?

Wednesday, January 23, 2008 4:31 AM by Suman

# re: Silverlight and XAML, have you guys met Old Man SVG?

iam using the following code:

 <Canvas.Resources>

  <Canvas x:Key="ellipse">

<Ellipse Height="60" Width="200" Fill="Blue" Opacity="1" Visibility="Visible"/>

</Canvas>

 </Canvas.Resources>

 <Canvas Canvas.Left="5" Canvas.Top="5" Width="10" Height="25">

     <Canvas.Background>

           <VisualBrush Stretch="None" Visual="{StaticResource ellipse}" />

     </Canvas.Background>  

 </Canvas>

Its throwing the foll. error:

---------------------------

Microsoft Internet Explorer

---------------------------

Silverlight error message    

ErrorCode: 2012

ErrorType: ParserError      

Message: Unknown attribute Key on element Canvas.    

XamlFile: MapVisualization.xaml    

Line: 7    

Position: 27    

---------------------------

OK  

---------------------------

Anyone has any information why this error is thrown??

Thursday, February 28, 2008 5:10 AM by Suman

# re: Silverlight and XAML, have you guys met Old Man SVG?

XAML is Microsoft in its pure state, they want to control Web as they did with OS. Of course web standards are as good (and similar) to XAML and Silverlight. Because Silverlight is HTML5 with good players and tools. THE MAIN QUESTION IS: Why (after several years) we still don't have good tools to create and view standard webs ? Because ADOBE is KILLING THEIR OWN market not accepting standards, they will finish with theme selves like 'Real networks' did some years ago. Big mistakes will give Microsoft the absolute power again.

Friday, September 26, 2008 7:49 AM by toni

# re: Silverlight and XAML, have you guys met Old Man SVG?

inkscape now directly supports saving to XAML and it works pretty damn good !

Saturday, May 9, 2009 3:43 PM by rednuht

# re: Silverlight and XAML, have you guys met Old Man SVG?

I would have thought that if Google and other large non Microsft players on the web ignored IE and silverlight (give IE users a less rich user experience) Microsoft would have to fall in line as their customers moved to the competition. The power can rest with web developers it doesn't have to be one vendor.

Wag the Dog.

Wednesday, October 21, 2009 4:11 PM by David Humpherson

# re: Silverlight and XAML, have you guys met Old Man SVG?

Funny, I'm looking for some way to go from XAML to SVG.

Monday, May 10, 2010 8:45 PM by Robert Biggs

# re: Silverlight and XAML, have you guys met Old Man SVG?

-----------------------------------------------------------

Wonderful put up. I just found your web site and would prefer to say that I have certainly cherished studying via your weblog posts. At any price I'm going to become subscribing to your feed and i genuinely hope you be able to write once more soon.

Sunday, January 9, 2011 7:02 PM by ipad covers

# re: Silverlight and XAML, have you guys met Old Man SVG?

Maybe Alcazzarre could help you to solve your problems? You'r welcome pal.

Thursday, March 17, 2011 1:33 PM by Alcazzarre