svg.tt

=title Scalable Vector Graphics (SVG)
=timestamp 2013-02-17T22:45:56
=indexes SVG
=status show
=author szabgab
=index 0
=archive 0
=feed 0
=comments 1
=social 1

=abstract start

=abstract end

<form id="image">Width: <input name="width" value="400" /> Height: <input name="height" value="400" /></form>

<form id="form">
<div id="rectangular">
x: <input name="x" value="100" /> y: <input name="y" value="100" /><br>
Width: <input name="width" value="200" /> Height:<input name="height" value="200" /><br>
</div>

<div id="style">
<b>Style:</b>
Fill: <input type="color" name="fill" value="#00FF00" />
Stroke:<input type="color" name="stroke" value="#FF0000" />
Stroke-width: <input name="stroke-width" value="3" />
</div>

<div id="circle">
<b>Circle:</b>
cx: <input name="cx" value="100" /> cy: <input name="cy" value="100" />
r: <input name="r" value="50" />
</div>

<input id="draw" type="button" value="Draw" />
</form>


The black border is in CSS. It was added to make it clear where the image is.

<div style="border: 2px solid black; display: inline-block; margin-bottom: 20px;" id="svg-xml">
</div>

The SVG source code:

<div id="svg-code">
<textarea style="resize:both; padding: 3px; border:2px solid black; height:400px; width:600px;" id="source-code"></textarea>
</div>