Use svg with basis.js

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/basis.js/1.2.1/basis.min.js"></script>

JavaScript

basis.require('basis.ui');

var Shape = basis.ui.Node.subclass({
    name: '',
    x: 0,
    y: 0,
    
    extendConstructor_: false,
    init: function(x, y){
        basis.ui.Node.prototype.init.call(this);
        this.x = x;
        this.y = y;
    },

    binding: {
        x: 'x',
        y: 'y'
    },
    action: {
        click: function(){
            alert('Hi! I\'m ' + this.name);
        }
    }
});

var Rect = Shape.subclass({
    name: 'rect',
    width: 10,
    height: 10,
    init: function(x, y, width, height){
        Shape.prototype.init.call(this, x, y);
        this.width = width;
        this.height = height;
    },
    template: '<svg:rect x="{x}" y="{y}" width="{width}" height="{height}" fill="blue" event-click="click"/>',
    binding: {
        width: 'width',
        height: 'height'
    }
});

var Circle = Shape.subclass({
    name: 'circle',
    radius: 80,
    init: function(x, y, radius){
        Shape.prototype.init.call(this, x, y);
        this.radius = radius;
    },
    template: '<svg:circle cx="{x}" cy="{y}" r="{radius}" fill="green" event-click="click"/>',
    binding: {
        radius: 'radius'
    }
});

var canvas = new basis.ui.Node({
    container: document.body,
    template:
      '<div>' +
        '<h1>SVG in basis.js templates</h1>' +
        '<svg:svg width="400" height="300" style="border: 1px solid red">' +
          '<!--{childNodesHere}-->' +
        '</svg:svg>' +
      '</div>',
    childNodes: [
        new Rect(10, 10, 50, 50),
        new Circle(100, 100, 50)
    ]
});