Для отрисовки svg не обязательно использовать xml.
Вот примерчик (не смотри на некоторые функции: выдирал из большого проекта, не стал убирать кое-что ненужное).
Главное - понять принцип
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
var SVG = function(o){
this.AS = 'auto';
var t = this;
function A(e,a,v){e.setAttribute(a,v)}
function C(i){var e = document.createElementNS('http://www.w3.org/2000/svg',i); A(e, 'shape-rendering', t.AS); return e}
if (document.createElementNS&&C('svg').x!=null){
this.Holder = o.appendChild(C('svg'));
this.createPolyline = function(w, p, f, c){
var o = C('polyline');
o.addPoint = function(x,y){
var z = C('polyline');
A(z, 'points', x+','+y);
this.points.appendItem(z.points.getItem(0));
z = null
}
o.setColor = function(C){A(this, 'stroke', C)};
o.setFill = function(C){A(this, 'fill', C)};
o.setPoints = function(C){A(this, 'points', C)};
o.setWidth = function(C){A(this, 'stroke-width', C+'px')};
o.setWidth(w);
o.setPoints(p);
if (f) o.setFill(f);
if (c) o.setColor(c);
t.Holder.appendChild(o);
return o
}
}
else if (document.createStyleSheet) {
this.Holder = o;
document.namespaces.add('v', 'urn:schemas-microsoft-com:vml');
var style = document.createStyleSheet();
style.addRule('v\\:*', 'behavior: url(#default#VML);');
style.addRule('v\\:*', 'antialias: '+t.AS+';');
function C(i){return document.createElement(i)}
this.createPolyline = function(w, p, f, c){
var o = C('v:polyline');
o.addPoint = function(x,y){
t.Holder.removeChild(this);
if (this.left>x) {
this.left = x;
this.style.left = this.left+'px';
}
if (this.top>y) {
this.top = y;
this.style.top = this.top+'px';
}
this.P = this.P+' '+x+','+y;
this.points = this.P;
t.Holder.appendChild(this);
}
o.setColor = function(C){this.strokecolor = C};
o.setFill = function(C){
if (C&&C!='none') {
o.filled = true;
o.fillcolor = C
}
else o.filled = false;
};
o.setPoints = function(C){this.points = C; this.P = C};
o.setWidth = function(C){this.strokeweight = C+'px'};
o.setWidth(w);
o.setFill(f);
o.setPoints(p);
/(\d*),(\d*)/.test(p);
o.style.position = 'absolute';
o.left = RegExp.$1;
o.style.left = o.left+'px';
o.top = RegExp.$2;
o.style.top = o.top+'px';
if (c) o.setColor(c);
t.Holder.appendChild(o);
return o
}
}
}
function getElementPosition(elem) {
if (null==elem) return {"left":0, "top":0, "width": 0, "height":0,"x":0, "y":0, "xSize": 0, "ySize":0};
var w = elem.offsetWidth;
var h = elem.offsetHeight;
var l = 0;
var t = 0;
while (elem) {
l += elem.offsetLeft-elem.scrollLeft;
t += elem.offsetTop-elem.scrollTop;
elem = elem.offsetParent;
}
var xCentr = l + Math.round(w/2);
var yCentr = t + Math.round(h/2);
return {"left":l, "top":t, "width": w, "height":h,"x":l, "y":t, "xSize": w, "ySize":h,"xCentr":xCentr,"yCentr":yCentr};
}
function PreventDefault(e) {
if(e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
var div = document.createElement('div');
div.style.background = '#675';
div.style.height = '100%';
var svg = new SVG(div);
if (svg.Holder) {
svg.Holder.style.height = '100%';
div.onmousemove = function(e){
if (typeof window.Line == 'undefined'||!Line) return;
var pos = getElementPosition(this);
Line.addPoint(e.clientX-pos.x,e.clientY-pos.y);
}
div.onmousedown = function(e){
e=e||event;
PreventDefault(e);
var pos = getElementPosition(this);
pos.x = e.clientX - pos.x;
pos.y = e.clientY - pos.y;
Line = svg.createPolyline( 3, pos.x+','+pos.y+' '+pos.x+','+pos.y, 'none', '#eee');
}
div.onmouseup = function(){Line=null}
}
document.body.appendChild(div);
