Monthly Archives: February 2013

SVG with Backbone JS

I’m working on an application that allows a user to add and manipulate individual elements on a SVG canvas.  I have used Backbone JS for other projects.   So why not use Backbone to wrap a little structure around this app.

Extending the Backbone View

I’m going to start by creating a Backbone View for the root SVG element.

My HTML looks like this…

When I view and inspect the page, the SVG element is in the body as expected.  However I’m going to have a problem once I try to add anything to that SVG.  Backbone created the SVG element when a new instance of the view was spun up.  This is a great feature of Backbone,  but that element isn’t being created with the SVG namespace.

Looking through the Backbone source I found the function that creates an element if one wasn’t supplied to the view.

This is the line that does the element making.

In my setup, Backbone is using jQuery to create the element.  So all I need to do is change this function to create the element with the proper namespace.  Luckily you can just override this function in the view.

Making it Reusable

I don’t want to override this function in each Backbone View that renders SVG.  Lets create a SVG Backbone View that can be used to extend other views.

Now I can update the SvgCanvas object to extend the new SvgBackboneView object.

Ok, display something already!

Lets create another view with some actual graphics to display as a subview in SvgCanvas.  This view will display a face from my Auto Andy project.

Adding in the Face Subview, the SvgCanvas object now displays a face when rendered.

View Demo on jsFiddle

QUnit asyncTest and Sinon useFakeTimers


I came across a small issue when writing some asynchronous JavaScript unit tests with QUnit.  I needed to wait some amount of time before running my tests.  So one of my test looked something like this.

I ran the tests and nothing happened.  The setTimout function was not firing.  Well I’m also using Sinon JS and it turns out by default Sinon has a fake timers setting that is true by default.


SVG and Handlebars JS Templates

I’ve been working with Handlebars JS for a while and wanted to use templating to generate portions of SVG.  If you read my last post on SVG and JavaScript, a proper namespace is the key to the SVG castle.  So I needed a way to get the output from my Handlebars template to be seen as proper SVG.

This is the handlebars template I’m working with.

This template is for a single character from my Auto Andy project.

First thing to do is create a SVG Element.

I’m just going to put the template in a local variable for this demo.

Next step is create some data and run it through the Handlebars template.  This data below is just a single output from running Auto Andy.

When I compile the template with the data, I end up getting back a string that represents the final markup.  Now I need to turn that markup into SVG elements with the proper namespace.

The DOMParser found in the vanilla JavaScript looked to be the ticket.  The DOMParser has a parseFromString method to create JavaScript accessible XML objects.  The object returned has a property call documentElement that contains the root node of the document. The last step is appending the root node to the SVG element.

Everything looks to be in place, but if I run this code I end up with my old friend the “Empty Page”.  So why doesn’t it show up? O’Yeah, namespace! When I called parseFromString(), the XML string was parsed using the default XML namespace.  However, I can change that by altering the template a little.

Setting the XML Namespace to the SVG namespace seems to fix the problem.  Now when I run the markup through parseFromString() it parses the XML string using the SVG namespace.

View Demo on jsFiddle

Using jQuery?

If you are using jQuery with your project, you can use the $.parseXML() method instead of the direct use of DOMParser.parseFromString() to get the same result.

Getting Starting with SVG and JavaScript

I’ve started using SVG in a web application.  I looked into some SVG libraries, but decided it was overkill for what I needed. So I took a deeper look.

Lets start by dumping an inline SVG element in a page.  Boring, but it renders great in the modern browser.


The above example obscures an interesting thing.  The SVG elements have a different namespace than your normal HTML elements.  This becomes very important once we start using JavaScript to do our magic.

Creating & Modifying SVG with JavaScript

Using jQuery

It’s pretty safe to say jQuery is used often in web projects, so why not just use it to create your SVG.

Adding an inline SVG with jQuery does work great!

View Demo on jsFiddle

However I start to run into problems when updating the SVG after it is created.  So lets look at what happens when I try to add the rectangle after the SVG element is created.

View Demo on jsFiddle

After running the demo you’ll see an empty page.  If you look at the elements with the developer tools, you’ll see the entire SVG.  It just doesn’t render in the page.  The issue is jQuery doesn’t use the proper namespace when creating the SVG elements.

So I’m going to put aside jQuery for now.  If you are dead set on using jQuery with SVG, grab this jQuery SVG plugin.

Doing it with vanilla JavaScript

Because the namespace is the key problem in the above example, I’ll use the document.createElementNS() method to create the SVG elements.  You need to use this namespace for SVG:


View Demo on jsFiddle

The end result is SVG I can update any time in the modern browser.

Backbone JS – A Best Practice

This is a nice little tip I came across.  Avoid using model.toJSON() when rendering your Backbone JS Views.

Use model.attributes instead.

Using the toJSON method can work, but overloading the toJSON method of a model is required when you need to send data to an API does not a Rails flavor of a restful web service.  It does seem like a bad idea to use data designed to send to an API to render your view, when we can retrieve it unaltered through model.attributes.