<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="svg_style.css" ?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">



<g id="border">
<rect class="outline" x="10" y="10" height="500" width="590"
        fill="none" stroke="black" stroke-width="1"/>
<line class="outline" x1="10" y1="40" x2="599" y2="40"></line>
<line class="outline" x1="10" y1="90" x2="599" y2="90"></line>
<line class="outline" x1="10" y1="125" x2="599" y2="125"></line>
<line class="outline" x1="10" y1="160" x2="599" y2="160"></line>
</g>

<g id="kemble_data">
<text class="head1" x="280" y="30">EGDK</text>
<text class="nml" x="50" y="60">N51 40.8 W002 03.37</text>
<text class="nml" x="530" y="60">435ft AMSL</text>
<text class="head1" x="280" y="60">Kemble</text>
<text class="nml" x="50" y="80">4.5 nm SW of Cirencester</text>
<text class="nml" x="50" y="110">c/s Kemble Radio 118.90&#160;&#160;&#160;&#160;&#160;&#160;A/G Lyneham Zone 123.40&#160;&#160;&#160;&#160;&#160;&#160;Brize Radar 134.40</text>
<text class="nml" x="50" y="140">Rwy 09 (087M)  Rwy 27 (273M)</text>
<text class="nml" x="50" y="155">Rwy 13 (133M)  Rwy 31 (307M)</text>
</g>


<g id="rwy_01_orient" transform="rotate(-3,300,300)">
	<g id="id01"  transform="rotate(+90,100,300)">
		<text class="nml" x="105" y="295">09</text>
	</g>
	
	<g id="id02" transform="rotate(-90,535,315)">
		<text class="nml" x="532" y="315">27</text>
	</g>
	
<rect class="rwy" x="120" y="300" width="400" height= "20"></rect>
<text class="white" x="200" y="315">1833m</text>
</g>

<g id="rwy_02_orient" transform="rotate(+47,300,300)">
	<g id="id03" transform="rotate(90,130,315)">
		<text class="nml" x="120" y="307">13</text>
	</g>
	
	<g id="id04" transform="rotate(-90,367,312)">
		<text class="nml" x="362" y="315">31</text>
	</g>
	
<rect class="rwy" x="150" y="300" width="205" height= "20"></rect>
<text class="white" x="180" y="315">941m</text>
</g>

<text class="head1" x="20" y="430">Koala Publishing Ltd - Example - Runway</text>
<text class="head1" x="20" y="450">Graphics Generated from a Database</text>
<text class="nml" x="20" y="470">This is a simplified airfield approach chart, one of many generated in bulk from co-ordinate data held in a relational database.</text>
<text class="nml" x="20" y="490">Thousands of these charts can be generated in minutes, rather than several minutes <cite>per chart</cite> if drawn by hand using a graphics editor.</text>
<text class="nml" x="20" y="510">This also demonstrates the separation of content and formatting by means of an external CSS stylesheet;</text>
<text class="nml" x="20" y="530">secondly the use of nested SVG transforms to align the text to the runways correctly and align the runways geographically.</text>


</svg>
