Inkscape to support XAML export

Today, Adam Kinney gave me the tip off to some cool news: Inkscape is adding XAML export.

Great, what's Inkscape? Glad you asked! Inkscape is an open source vector graphics editor, like Adobe Illustrator. Rather than drawing in pixels (like you'd do in Photoshop, Paint.NET, etc.), you're drawing in vectors. Inkscape is a little unique in that it uses SVG (scalable vector graphics) as its base format. SVG is a W3C standard, with pretty good support in most non-IE browsers (check out SVG Tetris in Firefox 1.5 or higher). It's unfortunate that IE doesn't (and likely never will) support SVG, since browser support for standards based vector-based graphics and text could do so much for the web.

Although the drawing primitives in XAML are very similar to SVG, up until now there hasn't been a really solid way of developing assets in SVG and moving them to XAML.

Right now, there are only two real ways to do any serious design in XAML:

  1. Buy Expression Blend and Expression Design ($599)
  2. Buy Adobe Illustrator ($599) and use the XAML export plugin

Now that Inkscape is picking up XAML export, there's a third way that doesn't start with any buying.

Why this is important

Lots of reasons:

  • It’s nice to be able to say that you can create full featured Silverlight apps without having to buy a product, in the same way that a free csc.exe and the Visual Studio Express products really round out the .NET platform. Obviously, the Expression products are compelling for XAML creation, but it’s nice for the Silverlight platform to show that it’s not directly tied to a product.
  • Since Inkscape is cross-platform (running on Windows, Linux, and Mac OSX), this opens up cross platform development quite a bit. Now you could create Silverlight apps on OSX with Inkscape and TextMate (or whatever it is they code in these days), then host the app on Linux. I'm guessing that a small minority will actually use Inkscape to do Silverlight / Moonlight development without running Windows, but the fact that they could suddenly makes the Silverlight platform fee a lot friendlier.
  • Inkscape has some really cool features that aren't in the Expression products yet. For example, Inkscape has pretty nice bitmap tracing, and the tile cloning is very powerful. Example:

 

Let's try it out!

Tim Heuer says the XAML export is already in the Inkscape nightly builds, so let's grab it call his bluff. The Inkscape nightly builds are available as a 30MB 7z archive, so you'll need 7-zip to extract it. 7-zip is a great program with significantly better compression than the standard zip format, so it's worth grabbing it if you don't already have it.

I kept my test pretty simple - a solid background, a bunch of translucent stars, and some text that I'd converted to paths.

Inkscape-XAML-Export-1

Next, I save the drawing, selecting XAML as the output format.

Inkscape-XAML-Export-3

Now I've got a XAML file, which can be opened directly in IE7.

Inkscape-XAML-Export-2

I won't bore you with the XAML itself - since the text was converted to paths, it's really verbose. But it's valid XAML, and no different than I'd expect to see if I'd created it in Expression. No, this isn't being hosted in Silverlight, but I'd fully expect that it should work without any problems - maybe if I get time I'll give that a shot.

Inkscape-XAML-Export-4

This is very alpha right now. I've run the Inkscape nightlies many times over the past two years and they've generally been pretty solid, but it wasn't hard to get the XAML export to crash. To say that another way, it took several tries to come up with a simple design that wouldn't cause a crash when I exported it. For this example, I kept with very simple primitives and converted my text objects to paths. However, it's definitely working, and as Tim says they're hoping to have a stable build the Southern California Linux Expo in February.

Combined with the Moonlight plugin, it should be possible to design, develop, host, and view a Silverlight on Mac or Linux without ever firing up Windows. Not that you should, necessarily, but you could. Neat.

14 Comments

  • Wow, this is really cool! I can't wait for a stable build.

    But just because you can create the vectors, doesn't mean you have a silverlight app does it? What about the animation stuff you can build with Expression Blend? There still isn't a free option for that is there?

  • That's great news, perhaps I'll be able to convince my colleague now who looks at Silverlight as if it's a lump of poo. (Because it's related ot Microsoft or because it brings developers and designers closer together... I don't know :p)

    Nice job !

  • Everybody now understands open standards are key.
    Use SVG in-line and have a link to the XAML version. Maybe you can put Inkscape at the server doing this automatically, so you only have to take care of the SVG content.

  • Nice informative post Jon.

  • @joefitz You may have installed an SVG viewer plugin, like the Adobe viewer. IE has never had native support for SVG, and there have been no announcements saying that it will ever be added.
    http://wiki.svg.org/Internet_Explorer

    Adobe has announced that they were discontinuing their SVG viewer in 2006. While it's still available for download, they're not developing it, and it will be removed from their site in 2009.

    Even if there are SVG viewers available, very few people have them installed.

  • Awesome news. Last year I was looking for a piece of software who quickly replaces CorelDraw in my office. Installed Inkscape and love it at once. With this little tool I won a small contest to design a logo in my company.
    Two thumbs up!

  • WHY is my question - WHY??????????????

    I don't follow - why would I want to output something like that in XAML, instead of, say, just a jpg or png or something?

    Forgive the ridiculous nature of my question, please - I truly don't understand!

    Can you please elaborate a tiny bit on why someone would want to output images in XAML...

    Thanks a lot!

  • You would do it if you are developing silverlight or wpf apps. These technologies are utilizing an UI-Language called XAML which is an XML format. You could also use just png or something like that, but xaml is much more flexible, i.e. you can adress just a single path in your XAML Object, maybe the shadow from within your application, wether the whole png.

  • I generated the Xaml with no problems but when I placed it inside a canvas in a WPF application it didn't like the source attribute. Error was "URI prefix is not recognized."

  • I'm not sure why but this blog is loading incredibly slow for me. Is anyone else having this issue or is it a problem on my end? I'll check back
    later on and see if the problem still exists.

  • It's not my first time to pay a visit this site, i am visiting this website dailly and get pleasant data from here all the time.

  • Magnificent beat ! I would like to apprentice whilst you amend your web site, how
    could i subscribe for a weblog website? The account helped
    me a appropriate deal. I had been a little bit
    acquainted of this your broadcast provided vibrant clear idea

  • Pretty great post. I simply stumbled upon your weblog and wanted to say that I've truly enjoyed browsing your blog posts. After all I'll be
    subscribing to your feed and I hope you write once more very soon!

  • For most up-to-date news you have to pay a quick visit world wide web and on the web I
    found this web page as a finest web site for most up-to-date updates.

Comments have been disabled for this content.