[SOLVED] Raphael.js path to SVG

Raphael.js path to SVG

I have seen SVG images on wikipedia which you can open in notepad and find the code written inside it. My question is if I make a circle in raphael, can I display it as an svg image in the browser?

var p = paper.circle(10,10,10).attr({fill:'blue'});

then display it as a svg image in my browser. How can I achieve it?

Solution

This would only work on browsers that support SVG. I think it fails on IE9 too because it doesn't provide support for .serializeToString() (though there are shims for this).

window.onload = function () {
  var paper = Raphael("container", 100, 100);
  var p = paper.circle(10,10,10).attr({fill:'blue'});
  var textarea = document.getElementById("code")
  var serializer = new XMLSerializer();
  textarea.value = serializer.serializeToString(paper.canvas);
};

See demo here: http://jsfiddle.net/BvWkU/