<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events"	xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:svg="http://www.w3.org/2000/svg">
	<head>
		<title>XFORMS + SVG Browser</title>
		<style type="text/css">
                        #svgimg .xforms-value {width: 600px; min-width: 100px; height: 600px; min-height: 100px;}    
		</style>
		<xf:model>
			<xf:instance id="inlinesvg" src="svg/simple.svg" /> 
 
		</xf:model>
	</head>
	<body>
		<h1>XSLTFORMS (XFORMS in javascript) + SVG Browser  </h1>
 
		<p>Example of svg from xf:instance with xforms input and output bound to an svg property (fill=). As you input a new colour for fill of the circle the circle will change and the name of the colour will be reflected in the output field as well
		</p>
		<br/>
	 	<xf:output id="svgimg" value="xf:serialize(instance('inlinesvg'))" mediatype="image/svg+xml" />
		<br/>
		<xf:output id="myOutput" value="//svg:circle@fill"/>
				<br/>
		<xf:input id="myInput" ref="//svg:circle@fill"/>
	</body>
</html>
