<svg 
 xmlns="http://www.w3.org/2000/svg" 
 version="1.1" 
 width="640px" 
 height="480"
 >
<title>Runshine</title>
<g style="font-family:candara,'trebuchet ms',helvetica,geneva,sans-serif">
  <desc>sunset</desc>

  <defs>
   <linearGradient id="sunshine" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="black" />
    <stop offset="7%" stop-color="firebrick" />
    <stop offset="14%" stop-color="red" />
    <stop offset="21%" stop-color="darkorange" />
    <stop offset="42%" stop-color="orange" />
	<stop offset="95%" stop-color="yellow" />
   </linearGradient>

   <linearGradient id="river" x1="0%" y1="100%" x2="100%" y2="0%">
    <stop offset="5%" stop-color="mediumblue" />
    <stop offset="50%" stop-color="dodgerblue" />
    <stop offset="190%" stop-color="turquoise" />
   </linearGradient>
   <linearGradient id="bridge" x1="0%" y1="100%" x2="100%" y2="100%">
    <stop offset="5%" stop-color="peru" />
    <stop offset="50%" stop-color="burlywood" />
    <stop offset="95%" stop-color="wheat" />

   </linearGradient>
  </defs>
  <desc>background sunshine rectangle</desc>
  <rect x="0" y="0" width="640" height="400" rx="10" stroke="black" stroke-width="1" fill="url(#sunshine)" />
  <desc>Nett river</desc>
  <path fill="url(#river)" stroke="blue" stroke-width="2" d="M 640,300 L 210,400 310,400 640,330 z" />
  <desc>Nett river bridge</desc>

  <path fill="url(#bridge)" stroke="saddlebrown" stroke-width="2"
   d="M 340,350 L 240,380 C 
   260,365 540,365 550,380 
   L 600,360 
   C 580,340 360,340 340,350 
   z" />
  <g transform="translate(230,0)">
   <switch>
    <foreignObject width="460" height="400">
     <html xmlns="http://www.w3.org/1999/xhtml">
      <head><title>Runshine</title></head>
      <body>
       <!-- This was a real learning curve: the XHTML frag must have a head element -->

       <!-- I made the decision then to add a title element to the XHTML frag       -->
       <!-- body cannot follow html directly                                        -->
       <h1>Runshine</h1>
       <p>
        Long evening run eastbound<br />
        Long evening run into Nett<br />
        Running from the sunset<br />

        Running from the edge of darkness<br />
        I reach the bridge to the other side<br />
        As the long shadows lick at my feet<br />
        My head still in sunshine<br />
        I burn in sunshine<br />
        To ashes in shadows<br />

        To run no more.
       </p>
      </body>
     </html>
    </foreignObject>
  </switch>
 </g>
</g>
</svg>
