svgfiddle.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="utf-8">
    <title>SVG Fiddle</title>
    <script type="text/javascript" src="js/libs/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/libs/raphael-min.js"></script>
    <script type="text/javascript" src="js/libs/PaperBag.js"></script>
    <script type="text/javascript" src="js/libs/hammer.min.js"></script>
    <script type="text/javascript" src="js/libs/hammer.showtouches.js"></script>
    <script type="text/javascript" src="js/libs/hammer.fakemultitouch.js"></script>
	<style type="text/css">
		body { font-size: 10px; }
	</style>
</head>

<body>
<b>SVG Fiddle</b>
Path: <input type="text" id="svgpath" size="100" value="M30,30C10,20,300,308,250,38"/>

<div id="papercontainer" style="width: 210px; height: 210px; float: left; overflow: hidden; border: 1px solid blue">
	<div id="paper" style="background-color: #333; width: 410px; height: 410px;"><br /><br />In Browser hold shift to pinch</div>
</div>
<div id="debug" style="width: 200px; float: left">Debug</div>
<div id="gesturelist" style="width: 100px; float: left">Gestures</div>
<script type="text/javascript">

    Hammer.plugins.fakeMultitouch();
    Hammer.plugins.showTouches();

    var width = 400;
    var height = 400;

    // Creates canvas
    var paper = Raphael(document.getElementById("paper"), width, height);
    $("svg").css("border", "1px solid yellow");

    var i = document.getElementById('svgpath');
    var e;
    $("#svgpath").keyup(render);
    function render() {
        var path = i.value;
        if (path != "") {
            if (typeof e != "undefined") {
                e.remove();
            }
            e = paper.path(path).attr({fill: "red", stroke: "white"});
        }
    }
    ;
    render();

    var paperBag = new PaperBag(document.getElementById("paper"), paper);
</script>
</body>
</html>