

<!DOCTYPE HTML>
<html>
<head>

<meta http-equiv="Content-Type"
	content="text/html; charset=UTF-8">
<title>SVG&lt;Labs&gt;</title>

<style type="text/css">
textarea,iframe,#imgFrame {
	position: absolute;
	width: 92%;
	height: 46%;
	border: 2px solid black;
	left: 4%;
	right: 4%;
	font-family: Monospace;
	font-size: 14px;
	resize: none;
}

textarea {
	top: 2%;
	font-family: Monospace;
	font-size: 14px;
}

iframe {
	bottom: 2%;
}

#imgFrame {
	bottom: 2%;
	overflow: hidden;
	background-color: #bbbbbb;
}

body,html {
	height: 100%;
	margin: 0px;
	background-color: #bbbbbb;
}

.nok {
	background-color: #ffdddd;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>


</head>

<body>

	<form name="fo1" accept-charset="UTF-8">
		<textarea id="src" name="ta1"><rect x="0" y="0" width="100" height="100" fill="#f8f" stroke="black"/>
<circle cx="110" cy="100" r="50" fill="blue" stroke="black"/>
<ellipse cx="250" cy="100" rx="900" ry="30" style="fill:#ee6; stroke:#006;stroke-width:2" />
<line x1="0" y1="0" x2="300" y2="100" style="stroke:#666;stroke-width:2" />
<text x="150" y="140" style="stroke:black;fill:#d88;font-size:150px;">S</text>
<path d="M250 100 L280 200 L300 200 L330 100 L310 100 L290 180 L270 100 Z"/>
<text x="330" y="170" style="stroke:black;fill:blue;font-size:150px;">G</text>
<text x="370" y="220" style="stroke:blue;fill:blue;font-size:50px;">&amp;lt;Labs&amp;gt;</text>
<text x="190" y="20" style="fill:blue;font-size:18px;">Hall&amp;#229;, v&amp;#228;rld</text>
<text x="320" y="20" style="font-size:18px;">&amp;#24744;&amp;#22909;&amp;#19990;&amp;#30028;</text>
<text x="430" y="20" style="font-size:18px;">&amp;#1055;&amp;#1088;&amp;#1080;&amp;#1074;&amp;#1077;&amp;#1090; &amp;#1084;&amp;#1080;&amp;#1088;</text>
</textarea>
	</form>

	<iframe id="fr1"></iframe>
	<div id="imgFrame">
		<img id="i1" src="2p?we" alt="s">
	</div>

	Render:
	<form name="f2">
		<input type="radio" name="renderer" value="c" onclick="f()">
		Client<br /> <input type="radio" name="renderer" value="s" CHECKED
			onclick="f()"> Server
	</form>

	<script type="text/javascript">
		var old = document.fo1.ta1.value;		
        var svgH2 = '<svg width="1500px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">'; 
        var svgF = '</svg>';

		function u() {
			var svg = document.fo1.ta1.value
			if (svg != old) {
				old = svg;
				try {
					$.parseXML(svgH2 + svg + svgF);
				} catch (e) {
					$('#src').addClass('nok');
					return;
				}
				$('#src').removeClass('nok');
				var isClient = document.f2.elements[0].checked;
				svgNoBr = svg.replace(/(\r\n|\n|\r)/gm, "")
				if (isClient) {
					$('#fr1').attr('src', "e?1=" + toHex(svgNoBr));
					$('#imgFrame').hide();
					$('#fr1').show();
					$('#i1').hide();
				} else {
					$('#i1').attr('src', "2p?1=" + toHex(svgNoBr));
					$('#i1').show();
					$('#fr1').hide();
					$('#imgFrame').show();
				}
			}
		}

		function toHex(str) {
			var hex = '';
			for ( var i = 0; i < str.length; i++) {
				hex += '' + str.charCodeAt(i).toString(16);
			}
			return hex;
		}

		function f() {
			old = "";
			u();
		}

		setInterval("u()", 500);
	</script>

</body>
</html>

�