diff --git a/svgjs/svgjs-tests.ts b/svgjs/svgjs-tests.ts
new file mode 100644
index 000000000..845702ac4
--- /dev/null
+++ b/svgjs/svgjs-tests.ts
@@ -0,0 +1,69 @@
+///
+///
+
+// create svg drawing paper
+
+
+// Example from svgjs.com
+function one() {
+ var draw = SVG('canvas')
+
+ // create image
+ var image = draw.image('images/shade.jpg')
+ image.size(600, 600).y(-150)
+
+ // create text
+ var text = draw.text('SVG.JS').move(300, 0)
+ text.font({
+ family: 'Source Sans Pro'
+ , size: 180
+ , anchor: 'middle'
+ , leading: '1em'
+ })
+
+ // clip image with text
+ image.clipWith(text)
+}
+
+
+// random one I found online
+function two() {
+ var draw = SVG('paper').size(300, 300)
+ var rect = draw.rect(100, 100).attr({ fill: '#f06' })
+ rect.animate().move(150, 150)
+}
+
+
+// Ripped out of a project.
+function renderSVG(data:string) {
+
+ var el:JQuery;
+
+ var root = SVG(el.get(0))
+
+ // Load the SVG into a container
+ var div = document.createElement("div")
+ var container = SVG(div) // this creates an SVG tag inside
+ container.svg(data) // this creates an SVG inside the SVG
+ var $inner = $(div).find("svg svg")
+ var inner:svgjs.Element = $inner.get(0).instance
+
+ // Copy in the important attributes
+ root.attr('x', inner.attr('x'))
+ root.attr('y', inner.attr('y'))
+ root.attr('width', inner.attr('width'))
+ root.attr('height', inner.attr('height'))
+ root.viewbox(inner.viewbox())
+
+ // Append the children
+ el.append($inner.children())
+
+ // Activate and Label all child paths
+ var index = 0
+ el.find("rect, path, circle, ellipse").each(function() {
+ var $path = $(this)
+ var path = $path.get(0).instance
+ var uniqueId = "path"+index++
+ path.attr({"path-id": uniqueId})
+ })
+}
\ No newline at end of file
diff --git a/svgjs/svgjs.d.ts b/svgjs/svgjs.d.ts
new file mode 100644
index 000000000..6b7a7a6ae
--- /dev/null
+++ b/svgjs/svgjs.d.ts
@@ -0,0 +1,233 @@
+// Type definitions for svg.js
+// Project: http://www.svgjs.com/
+// Definitions by: Sean Hess
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+// Reference: http://documentup.com/wout/svg.js
+
+// TODO sets
+// TODO gradients
+
+declare var SVG:svgjs.Library;
+
+declare module svgjs {
+
+ export interface LinkedHTMLElement extends HTMLElement {
+ instance: Element;
+ }
+
+ export interface Library {
+ (selector:string):Doc;
+ (domElement:HTMLElement):Doc;
+ create(name:string):any;
+ Element:ElementStatic;
+ supported:boolean;
+ get(id:string):Element;
+ extend(parent:Object, obj:Object):void;
+ }
+
+ export interface Doc extends Element {
+ svg(data:string):any;
+ pattern(w:number, h:number, add:(e:Element)=>void):Element;
+
+ defs():Defs;
+
+ use(element:Element):Element;
+
+ clear():void;
+
+ mask():Mask;
+
+ // TODO gradients
+ }
+
+ export interface Element extends Text, Parent {
+ node:LinkedHTMLElement;
+
+ nested():Doc;
+
+ animate(duration?:number, ease?:string, delay?:number):Animation;
+ animate(info:{ease?:string; duration?:number; delay?:number}):Animation;
+
+ attr(name:string, value:any, namespace?:string):Element;
+ attr(obj:Object):Element;
+ attr(name:string):any;
+ viewbox():Viewbox;
+ viewbox(x:number, y:number, w:number, h:number):Element;
+ viewbox(obj:Viewbox):Element;
+
+ move(x:number, y:number, anchor?:boolean):Element;
+ x(x:number, anchor?:boolean):Element;
+ y(y:number, anchor?:boolean):Element;
+
+ center(x:number, y:number, anchor?:boolean):Element;
+ cx(x:number, anchor?:boolean):Element;
+ cy(y:number, anchor?:boolean):Element;
+
+ size(w:number, h:number, anchor?:boolean):Element;
+
+ show():Element;
+ hide():Element;
+ visible():boolean;
+ remove():void;
+
+ each(iterator:(i?:number, children?:Element[])=>void, deep?:boolean):void;
+
+ transform(t:Transform):Element;
+
+
+ style(name:string, value:string):Element;
+ style(obj:Object):Element;
+ style(name:string):string;
+ style():string;
+ bbox():BBox;
+ rbox():RBox;
+ doc():Doc;
+ data(name:string):any;
+ data(name:string, value:any):Element;
+ remember(name:string, value:any):Element;
+ remember(obj:Object):Element;
+ remember(name:string):any;
+ forget(...keys:string[]):Element;
+
+ fill(fill:{color?:string; opacity?:number}):Element;
+ fill(color:string):Element;
+ fill(pattern:Element):Element;
+ stroke(data:{color?:string; opacity?:number; width?: number}):Element;
+ stroke(color:string):Element;
+ opacity(o:number):Element;
+ rotate(d:number, cx?:number, cy?:number):Element;
+ skew(x:number, y:number):Element;
+ scale(x:number, y:number):Element;
+ translate(x:number, y:number):Element;
+
+ maskWith(element:Element):Element;
+ masker:Element;
+ unmask():Element;
+
+ clipWith(element:Element):Element;
+ clipper:Element;
+ unclip():Element;
+
+ front():Element;
+ back():Element;
+ forward():Element;
+ backward():Element;
+
+ siblings():Element[];
+ position():number;
+ next():Element;
+ previous():Element;
+ before(element:Element):Element;
+ after(element:Element):Element;
+
+
+ click(cb:Function):void;
+ on(event:string, cb:Function):void;
+ off(event:string, cb:Function):void;
+ }
+
+ export interface Mask extends Element {
+ add(element:Element):Mask;
+ }
+
+ export interface Text {
+ content:string;
+ font(font:{family?:string; size?:number; anchor?:string; leading?:string}):Element;
+ tspan(text:string):Element;
+ path(data:string):Element;
+ plot(data:string):Element;
+ track:Element;
+ }
+
+ export interface ElementStatic extends Parent {
+ new(node:any):Element;
+ }
+
+ export interface Defs extends Element {}
+
+
+ export interface Animation {
+ stop():Animation;
+
+ attr(name:string, value:any, namespace?:string):Animation;
+ attr(obj:Object):Animation;
+ attr(name:string):any;
+
+ viewbox(x:number, y:number, w:number, h:number):Animation;
+
+ move(x:number, y:number, anchor?:boolean):Animation;
+ x(x:number, anchor?:boolean):Animation;
+ y(y:number, anchor?:boolean):Animation;
+
+ center(x:number, y:number, anchor?:boolean):Animation;
+ cx(x:number, anchor?:boolean):Animation;
+ cy(y:number, anchor?:boolean):Animation;
+
+ size(w:number, h:number, anchor?:boolean):Animation;
+ during(cb:(pos:number)=>void):Animation;
+ to(value:number):Animation;
+ after(cb:()=>void):Animation;
+
+ // TODO style, etc, bbox...
+ }
+
+ export interface Parent {
+ put(element:Element, i?:number):Element;
+ add(element:Element, i?:number):Element;
+ children:Element[];
+
+ rect(w:number, h:number):Element;
+ ellipse(w:number, h:number):Element;
+ circle(diameter:number):Element;
+ line(x1:number, y1:number, x2:number, y2:number):Element;
+ polyline(data:string):Element;
+ polyline(points:number[][]):Element;
+ polygon(data:string):Element;
+ polygon(points:number[][]):Element;
+ path(data:string):Element;
+ image(url:string, w?:number, h?:number):Element;
+ text(text:string):Element;
+ text(adder:(element:Element)=>void):Element;
+
+ group():Element;
+ }
+
+ export interface BBox {
+ height:number;
+ width:number;
+ y:number;
+ x:number;
+ cx:number;
+ cy:number;
+ merge(bbox:BBox):BBox;
+ }
+
+ export interface RBox extends BBox {}
+
+ export interface Viewbox {
+ x: number;
+ y: number;
+ width: number;
+ height: number;
+ zoom?: number;
+ }
+
+ export interface Transform {
+ x?: number;
+ y?: number;
+ rotation?: number;
+ cx?: number;
+ cy?: number;
+ scaleX?: number;
+ scaleY?: number;
+ skewX?: number;
+ skewY?: number;
+ matrix?: string; // 1,0,0,1,0,0
+ a?: number; // direct digits of matrix
+ b?: number;
+ c?: number;
+ d?: number;
+ e?: number;
+ f?: number;
+ }
+}
\ No newline at end of file