May 31, 2014 Code on Github

drawSVG.js is a very lightweight Javascript library for making SVG images on a page.

Creating an SVG

Create an SVG object with:

var mySVG = new SVG({ width: 400, height: 200 });

Pass in any attributes you want in a object. In this case, the SVG will have a width of 400 pixels and height of 200 pixels.

To display the SVG use:


This will get the element with an id of "target", and replace its contents with the SVG element.

Adding elements

Elements can be added the SVG using the addChild() method.

mySVG.addChild('rect', {x: 10: y: 20, width: 100: height: 80, fill: '#88f'})

The first parameter is the type of element. The second parameter is a object containing the attributes for the element. A third parameter can be included, which is an array of child elements.

The addChild() method returns the element that it creates so you can add children to it. e.g.

var myGroup = mySVG.addChild('g', { opacity: 0.5 });
myGroup.addChild('rect', {x: 10: y: 20, width: 100: height: 80, fill: '#88f'})

Note that all SVG elements have an addChild() method.

Leave a comment

cancel reply