Generate Dojo GFX Drawings from SVG Files

One of the most awesome parts of the Dojo / Dijit / DojoX family is the amazing GFX library.  GFX lives within the dojox.gfx namespace and provides the foundation of Dojo's charting, drawing, and sketch libraries.  GFX allows you to create vector graphics (SVG, VML, etc.) using a coherent, flexible API.  With GFX, you can create everything from static vector images to images that rotate, resize, animate, and basically anything you put your mind to creating.

I'll save going through the ins and outs of Dojo's GFX library for another time;  in this post, I'll focus on how you can take an existing SVG graphic and convert it into a Dojo GFX graphic in five minutes using Eric Brown's graphic converter!

The Setup

Obviously you'll want to download a fresh copy of the Dojo SDK.  Within the Dojo SDK you'll want to find the following directory:

dojox/gfx/resources/

Within the above directory you will find a svg2gfx.xsl file.  This file is the magic behind the conversion. You'll want to rename the file to svg2gfx.xslt for maximum capability with processor.

The Command Line Script

The command to run the script is as follows:

xsltproc svg2gfx.xslt YourSVGPhoto.svg > output.json

If you don't have the above package, you can easily find it with a quick Google search.

The Generated JSON

The result of running the script through the converter is a JSON file which will look something like this:

[
    {
        "name": "layer1",
        "children": [
            {
                "name": "g2623",
                "children": [
                    {
                        "name": "path6134",
                        "shape": {
                            "type": "path",
                            "path": "M168.724,99.136c-38.372,0-109.12,9.917-145.181,30.863 C-23.9,298.093,40.635,412.424,168.724,477.286c128.085-64.862,192.608-179.759,145.166-347.287 C277.829,109.054,207.094,99.136,168.724,99.136z"
                        },
                        "fill": "#9D864A",
                        "stroke": {
                            "color": "#9D864A",
                            "style": "Solid"
                        }
                    },
                    {
                        "name": "path5154",
                        "shape": {
                            "type": "path",
                            "path": "M168.724,109.948c-37.711,0-80.143,4.815-135.735,27.492 c-41.385,146.729,6.627,264.341,135.735,328.448C297.83,401.781,345.826,284.169,304.441,137.44 C248.849,114.763,206.437,109.948,168.724,109.948z"
                        },
                        "fill": "#012F73",
                        "stroke": {
                            "color": "#012F73",
                            "style": "Solid"
                        }
                    },
                    // More...

The JSON file could be relatively large (for a JSON file) but the flexibility we'll have with the end product is worth the size.

Rendering the JSON to a GFX Graphic

Hopefully you've found the process to be simple to this point.  Rendering the GFX image is equally as simple:

// Require dependencies
dojo.require('dojox.gfx');
dojo.require('dojox.gfx.utils');

// When loaded...
dojo.ready(function() {
	
	// Load image
	dojo.xhrGet({
		handleAs: 'json',
		url: 'arsenal.json',
		load: function(json) {
			
			// Create the surface
			var surface = dojox.gfx.createSurface("logoHolder", 500, 500);
			
			// Write JSON to group
			var group = surface.createGroup();
			dojox.gfx.utils.deserialize(group,json);
			
		}
	});
});

Start by requiring the dojox.gfx and dojo.gfx.util packages.  Using dojo.xhr you request the file via AJAX.  Once the image JSON has been successfully received, you create a GFX surface, a group within the surface, and use dojox.gfx.utils.deserialize to turn the JSON into a graphic.  Done!

So Why Do This?

There are a few advantages to using JSON and GFX to build and store your graphics:

• GFX-managed graphics are easily animatable, scalable, and transformable
• Load image data once but create the image many times at different sizes instead of needing more than one image
• The GFX vector graphic will work within Internet Explorer, which it otherwise wouldn't if the image is SVG format

There you have it: painless graphic conversion and creation using Dojo's GFX library.  Check out my example or some of the examples that come with the Dojo SDK.