<?xml version="1.0" encoding="iso-8859-1"?>
   
   <!-- Following is the DTD emitted by various Adobe products. -->
   
   <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
   "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/
   svg-20000303-stylable.dtd">
   <svg width="500" height="400"> 
   <desc> Account linker illustrating SVG line drawing </desc>
   <style type="text/css"><![CDATA[
   /* In XML you must use a CDATA tag to delimit style content. */
   
   .box {
     fill : yellow;
     stroke : black;
     stroke-width : 2;
     }
   
   .border {
     fill : lightgreen;
     visibility : hidden;
     }
   
   .data {
     visibility : hidden; }
   
   text, tspan {
     pointer-events : none;
     font-size : 20;
     }
   
   line {
     stroke : black;
     stroke-width : 2;
     visibility : hidden;
     }
   
   ]]></style>
   
   <!-- containing group for whole diagram -->
   <g onmousemove="extendDraw(evt);"
   onmouseup="cancelDraw(evt);"
   >
   
   <!-- backdrop so events are picked up at every pixel -->
   <rect fill="linen" width="500" height="400"/>
   
   <g id="savings"
     onmouseover="putBorder(evt);"
     onmouseout="takeBorder(evt);"
     onmousedown="cancelDraw(evt);"
     onmouseup="endDraw(evt);"
   >
   <rect class="border" x="35" y="32" width="110" 
   height="85" rx="10"/>
   <rect class="box" x="40" y="37" width="100" 
   height="75" rx="10"/>
   <text x="50" y="67">
   Savings
   <tspan x="50" dy="20">Account</tspan>
   </text>
   </g>
   
   <g id="credit"
     onmouseover="putBorder(evt);"
     onmouseout="takeBorder(evt);"
     onmousedown="cancelDraw(evt);"
     onmouseup="endDraw(evt);"
   >
   <rect class="border" x="35" y="145" width="110" 
   height="85" rx="10"/>
   <rect class="box" x="40" y="150" width="100" 
   height="75" rx="10"/>
   <text x="50" y="180">
   Credit
   <tspan x="50" dy="20">Account</tspan>
   </text>
   </g>
   
   <g id="term"
     onmouseover="putBorder(evt);"
     onmouseout="takeBorder(evt);"
     onmousedown="cancelDraw(evt);"
     onmouseup="endDraw(evt);"
   >
   <rect class="border" x="35" y="257" width="110" 
   height="85" rx="10"/>
   <rect class="box" x="40" y="262" width="100" 
   height="75" rx="10"/>
   <text x="50" y="292">
   Term
   <tspan x="50" dy="20">Deposit</tspan>
   </text>
   </g>
   
   <g id="cheque"
     onmouseover="putBorder(evt);"
     onmouseout="takeBorder(evt);"
     onmousedown="startDraw(evt);"
     onmouseup="cancelDraw(evt);"
   >
   <rect class="border" x="355" y="15" width="110" 
   height="85" rx="10"/>
   <rect class="box" x="360" y="20" width="100" 
   height="75" rx="10"/>
   <text x="370" y="50">
   Cheque
   <tspan x="370" dy="20">Book</tspan>
   </text>
   </g>
   
   <g id="pass"
     onmouseover="putBorder(evt);"
     onmouseout="takeBorder(evt);"
     onmousedown="startDraw(evt);"
     onmouseup="cancelDraw(evt);"
   >
   <rect class="border" x="355" y="110" width="110" 
   height="85" rx="10"/>
   <rect class="box" x="360" y="115" width="100" 
   height="75" rx="10"/>
   <text x="370" y="145">
   Pass
   <tspan x="370" dy="20">Book</tspan>
   </text>
   </g>
   
   <g id="ccard"
     onmouseover="putBorder(evt);"
     onmouseout="takeBorder(evt);"
     onmousedown="startDraw(evt);"
     onmouseup="cancelDraw(evt);"
   >
   <rect class="border" x="355" y="205" width="110" 
   height="85" rx="10"/>
   <rect class="box" x="360" y="210" width="100" 
   height="75" rx="10"/>
   <text x="370" y="240">
   Credit
   <tspan x="370" dy="20">Card</tspan>
   </text>
   </g>
   
   <g id="ecard"
     onmouseover="putBorder(evt);"
     onmouseout="takeBorder(evt);"
     onmousedown="startDraw(evt);"
     onmouseup="cancelDraw(evt);"
   >
   <rect class="border" x="355" y="300" width="110" 
     height="85" rx="10"/>
   <rect class="box" x="360" y="305" width="100" 
   height="75" rx="10"/>
   <text x="370" y="335">
   EFT
   <tspan x="370" dy="20">Card</tspan>
   </text>
   </g>
   
   <line id="chequeline" x1="1" y1="1" x2="90" y2="90"/>
   <line id="passline" x1="1" y1="1" x2="80" y2="90"/>
   <line id="ccardline" x1="1" y1="1" x2="70" y2="90"/>
   <line id="ecardline" x1="1" y1="1" x2="60" y2="90"/>
   
   <text class="data" id="chequedata" x="200" 
   y="100">data1</text>
   <text class="data" id="passdata" x="200" 
   y="130">data2</text>
   <text class="data" id="ccarddata" x="200" 
   y="160">data3</text>
   <text class="data" id="ecarddata" x="200" 
   y="190">data4</text>
   
   </g>
   </svg>