C помощью js можно быстро и удобно динамически создавать SVG элементы.
Достаточно воспользоваться прилагаемой библиотекой.

Пример работы

var svg = SVG.create('svg');

var g = SVG.create('g');

var circle = SVG.create('circle', { cx: 10, cy: 20, r: 30, fill: '#d00' });

var text = SVG.create('text', { x: -20, y: 20, fill: '#999' });

svg.append(g);

g.append(circle);

g.append(text);

g.translate(50, 50);

g.scale(2);

g.rotate(90);

circle.attr('r', 33);

text.text('This is text');

После чего достаточно добавить полученное дерево в контекст страницы

/// например как child элемента

document.getElementById('svg_root').appendChild(svg);

Также важно помнить что документ должен быть XHTML, для статической страницы достаточно чтобы у файла было расширение ".xhtml".

Библиотека работы с SVG на js

SVG = {

 _NS : 'http://www.w3.org/2000/svg',

 _regexp : {

 istext : /text|tspan|tref/i,

 translate : /translate\(([-\d\.]+),?\s*([-\d\.]*?)\)/i,

 rotate : /rotate\(([\d\.]+),?.*?\)/i,

 scale : /scale\(([\d\.]+),?.*?\)/i

 },



/// create svg element by name with agruments

 /// element's method:

 /// create - create any svg element

 /// append - append child

 /// attr - set, get any attributes

 /// text - set a text

 create : function(name, attributes) {

 var element = document.createElementNS(SVG._NS, name);

 element.create = SVG.create;

 element.append = SVG._append;

 element.attr = SVG._attr;

 element.translate = SVG._translate;

 element.scale = SVG._scale;

 /// text elements have attribute rotate

 if (SVG._regexp.istext.test(name) == false) {

 element.rotate = SVG._rotate;

 }

 element.setTransform = function(value) {

 this.attr('transform', value);

 };

 element.text = SVG._text;

 if (typeof(attributes) == 'object') {

 element.attr(attributes);

 }

 return element;

 },

 _append : function(child, attributes) {

 if (typeof child == 'string') {

 var new_child = this.create(child, attributes);

 this.append(new_child);

 return new_child;

 } else {

 this.appendChild(child);

 }

 },

 _text : function(text) {

 text = '' + text + '';

 text = new DOMParser().parseFromString(text, 'application/xhtml+xml').childNodes[0].childNodes[0];

 this.append(text);

 },

 _attr : function(attribute, value) {

 if (typeof attribute == 'object') {

 for (key in attribute) {

 this.setAttribute(key, attribute[key]);

 }

 } else if (typeof(attribute) == 'string') {

 if (typeof value != 'undefined') {

 this.setAttribute(attribute, value);

 } else {

 return this.getAttribute(attribute);

 }

 };

 },



_translate : function(x, y) {

 var operation = SVG._regexp.translate;

 var transform = null;

 var cx = 0;

 var cy = 0;

 var current_transform = this.attr('transform');

 if (current_transform != null) {

 var values = operation.exec(current_transform);

 if (values != null) {

 cx = (values[1] != '') ? parseFloat(values[1]) : 0;

 cy = (values[2] != '') ? parseFloat(values[2]) : 0;

 }

 }

 if (typeof(x) == 'number') {

 if (typeof(y) != 'number') { y = 0;}

 transform = 'translate('+x+','+y+')';

 if (current_transform != null) {

 if (operation.test(current_transform)) {

 transform = current_transform.replace(operation, transform);

 } else {

 transform = current_transform + ' ' + transform;

 }

 }

 this.attr('transform', transform);

 }

 return { 'x': cx, 'y': cy }

 },



_scale : function(scale) {

 var operation = SVG._regexp.scale;

 var transform = null;

 var cscale = 1;

 var current_transform = this.attr('transform');

 if (current_transform != null) {

 var values = operation.exec(current_transform);

 if (values != null) {

 cscale = (values[1] != '') ? parseFloat(values[1]) : 1;

 }

 }

 if (typeof(scale) == 'number') {

 transform = 'scale('+scale+')';

 if (current_transform != null) {

 if (operation.test(current_transform)) {

 transform = current_transform.replace(operation, transform);

 } else {

 transform = current_transform + ' ' + transform;

 }

 }

 this.attr('transform', transform);

 }

 return { 'scale': cscale }

 },



_rotate : function(angle) {

 var operation = SVG._regexp.rotate;

 var transform = null;

 var cangle = 0;

 var current_transform = this.attr('transform');

 if (current_transform != null) {

 var values = operation.exec(current_transform);

 if (values != null) {

 cangle = (values[1] != '') ? parseFloat(values[1]) : 0;

 }

 }

 if (typeof(angle) == 'number') {

 transform = 'rotate('+angle+')';

 if (current_transform != null) {

 if (operation.test(current_transform)) {

 transform = current_transform.replace(operation, transform);

 } else {

 transform = current_transform + ' ' + transform;

 }

 }

 this.attr('transform', transform);

 }

 return { 'angle': cangle }

 }



}

Динамическое создание SVG элементов на javascript