Friday, October 24th, 2008

Round the Web: Vector Graphics

Category: .NET, Canvas, SVG

>Here’s a quick round-the-web series of updates on happenings with SVG, Canvas, and open web graphics libraries.

First is a cool demo using SVG called Blobular:

I got the demo working in Firefox 3, though there were some glitches in Safari 3. As a cool aside, when I was uploading the screencast above YouTube transparently saw that I have Gears installed and used it to give me better upload feedback (“Uploading… 31%”) and resumability (Disclosure: I work for Google and with the Gears team):

Screenshot Uploading Blobular Screencast Using YouTube

Screenshot Uploading Blobular Screencast Using YouTube

Next on our round-the-web update is a cool graphing library named Bluff, taglined “Beautiful graphs in JavaScript”:

Bluff is a JavaScript port of the Gruff graphing library for Ruby. It is designed to support all the features of Gruff with minimal dependencies; the only third-party scripts you need to run it are a copy of JS.Class (about 2kb gzipped) and a copy of Google’s ExCanvas to support canvas in Internet Explorer. Both these scripts are supplied with the Bluff download. Bluff itself is around 8kb gzipped.

To draw a graph, you create a new Bluff graph object using the id of a canvas element on the page, set some options, add the data and labels, then tell the graph to draw. A basic example:

  1. <canvas id="example"></canvas>
javascript
< view plain text >
  1. var g = new Bluff.Line('example', 400);
  2. g.theme_37signals();
  3. g.title = 'My Graph';
  4.  
  5. g.data('Apples', [1, 2, 3, 4, 4, 3]);
  6. g.data('Oranges', [4, 8, 7, 9, 8, 9]);
  7. g.data('Watermelon', [2, 3, 1, 5, 6, 8]);
  8. g.data('Peaches', [9, 9, 10, 8, 7, 9]);
  9.  
  10. g.labels = {0: '2003', 2: '2004', 4: '2005'};
  11.  
  12. g.draw();

Produces this:

Screenshot of Bluff Example

Screenshot of Bluff Example

Next is a nice paper published recently on how the KDE project is using SVG baked in in a deep way:

KDE 4 is the latest release of the KDE software stack. One of the most notable changes in KDE 4 is a pervasive usage of SVG. SVG files are used for themes, icons, storage system and transport. They are at the beating heart of beauty of the KDE 4 interfaces.

Furthermore, the whole graphics stack utilized by KDE has been heavily influenced by the SVG standard. A new Free Software graphics driver model, called Gallium3D, has been written in order to utilize modern graphics hardware for accelerating API’s such as OpenVG and OpenGL to assure real time rendering of SVG files using minimum amount of resources. On top of that the Qt library, which KDE is layered upon, has a graphics API fully compatible with the SVG rendering model.

To cope with variety of uses of the SVG technology KDE comes with two SVG rendering engines. Th SVG 1.2 Tiny [SVG12] compliant QtSvg library, which is meant to be a minimal rendering engine, suitable for things like icons, and QtWebKit’s SVG which is a full SVG engine.

KDE 4 has just begun its existence and almost every day engineers working on it come up with new and creative ideas, tools and use cases for how to better utilize SVG. Unlike most of the technologies leveraging SVG, KDE’s focus is on interactivity and animation. A whole set of tools and utilities has been developed to aid that goal. The best example of such uncommon usage of the SVG standard is the Plasma [Plasma] project, which comes with its own animation framework layered on top of the SVG rendering model.

The openness of the SVG standard aided by the creativity of the Free Software engineers created something truly unique and exceptional.

Checkout the rest of the paper for lots of nice, in-depth explanations of how they have leveraged SVG.

Finally, here is something that will blow your mind (I’m still trying to wrap my mind around this one); someone has been working on getting Microsoft’s XAML/WPF technologies to render in the browser without Silverlight using…. SVG:

This post is basically a pre-announcement…in my spare time, I’ve also been working on another system based around the same ideas, except this time based on the SVG implementations supplied by browsers, along with JavaScript.

It’s called Firelight, and the github wiki is here.

Think of it as a Silverlight-like implementation with some WPF thrown in, with no plugin.  Just a JS file and a little initialization code.  It loads almost instantly (it’s smaller than jquery for the time being, although it’s unlikely to stay that way) and immediately goes to work.  And it will directly benefit from performance work being done in browser SVG, DOM, and Javascript implementations.

Since I don’t expect any of you to go grovel around that stream of consciousness wiki page, here’s a tiny demo of some of the core infrastructure in firelight:   http://squeedlyspooch.com/firelight/xaml.xhtml.  The xaml file which is loaded by that page is here.  Note the event triggers on the smaller gradient filled canvas.  Try mousing over it and clicking it.

That demo (as the wiki states) works in Firefox version 3.x, Safari (windows, at least) 3.1.2, and on the iPhone (that part I get a real kick out of).  Opera has some issues with some of my code, and so I have some issues with Opera.  But I’ll get it working there too soon (makes sense, since last I checked it had the most compliant version of SVG available.)

Related Content:

Posted by Brad Neuberg at 7:00 am
1 Comment

++++-
4 rating from 25 votes

1 Comment »

Comments feed TrackBack URI

I really appreciate the fact that Microsoft is making Silverlight opened-enough that JS developers can use it “freely” in web pages without a plug-in.

Comment by SQLAjax — November 16, 2008

Leave a comment

You must be logged in to post a comment.