The 18th Green in SVG

For the first time, I drew an image by typing. How did I do that? I created the impressive image below using SVG (Scalable Vector Graphics) from the World Wide Web Consortium (W3C). You can view the picture using Microsoft IE with the Adobe SVG Viewer plug-in. I created the image using ellipses, paths, a line, text, and a rectangle. It was a fun and exciting experience.

SVG Source Code

<svg xmlns="http://www.w3.org/2000/svg">

<!-- Author: Julie Nabong-->
<!-- Date:   4 July 2003-->
<!-- Title:  The 18th Green-->

<!--THE BACKGROUND-->
<g>
  <defs>
    <linearGradient id="BackGradient">
      <stop offset="30%" stop-color="skyblue"/>
      <stop offset="70%" stop-color="lightblue"/>
    </linearGradient>
  </defs>

  <rect style="fill:url(#BackGradient);" width="600" height="500"/>
</g>

<!--THE FRINGE-->
<g>
  <defs>
    <linearGradient id="MyGradient">
      <stop offset="10%" stop-color="#0F3"/>
      <stop offset="90%" stop-color="#CE1"/>
    </linearGradient>
  </defs>

  <path d="M 0 500 0 200 C 200 50 600 100 600 500" fill="url(#MyGradient)"/>
</g>

<!--THE GREEN-->
<g>
  <defs>
    <linearGradient id="GreenGradient">
      <stop offset="10%" stop-color="green"/>
      <stop offset="90%" stop-color="lightgreen"/>
     </linearGradient>
  </defs>

  <ellipse style="fill:url(#GreenGradient);" cx="300" cy="330" rx="200" ry="120"/>
</g>

<!--THE HOLE-->
  <ellipse style="fill:silver;" cx="300" cy="330" rx="10" ry="5"/>

<!--THE FLAG-->
<g>
  <defs>
   <linearGradient id="FlagGradient">
    <stop offset="20%" stop-color="darkred"/>
    <stop offset="80%" stop-color="red"/>
   </linearGradient>
  </defs>

  <polygon fill="url(#FlagGradient)" points="300,60 330,60 330,80 300,80"/>
</g>

<!--THE FLAGSTICK-->
<g stroke="yellow">
  <line x1="300" y1="333" x2="300" y2="60" stroke-width="3"/>
</g>

<!--THE TITLE-->
<text x="30" y="50" font-family="Verdana" font-size="26" fill="darkblue">
  The 18th Green
</text>

</svg>

My VML Version of The 18th Green

The image below is supported by Microsoft IE version 5 or greater.

VML Source Code

<!-- Author: Julie Nabong-->
<!-- Date:   10 July 2003-->
<!-- Title:  The 18th Green-->

<v:group id="18thGreen"
  style="position:relative; top:0px; left:0px; width:600px; height:500px"
  coordorigin="0,0" coordsize="600,500">

<!--THE BACKGROUND-->
<v:rect
  style="position:relative;
  top:0px; left:0px;
  width:600px;
  height:500px;"
  fillcolor="#ADD8E6"
  border="0"
  strokecolor="white">
</v:rect>

<!--THE TITLE-->
<v:rect
 strokecolor="#ADD8E6"
 fillcolor="#ADD8E6"
 style="position:relative;
 top:50;left:30;width:220;height:40">
  <v:textbox id="mytitle">
   <font size="+3" face="Verdana" color="darkblue">
   The 18th Green
   </font>
  </v:textbox>
</v:rect>

<!--THE FRINGE-->
<v:shape
  style="position:relative;
  top:0px; left:0px;
  width:600px;
  height:500px"
  fillcolor="#CE1"
  strokecolor="#ADD8E6">
  <v:path id="myPath"
    v="m 0 200 c 200 50 600 100 600 500 l 0 500 0 200 x e"/>
  <v:fill type="gradient" color2="#0F3" method="linear sigma" angle="400" focus="100%"/>
 </v:shape>

<!--THE GREEN-->
<v:oval
  strokecolor="#90EE90"
  fillcolor="#006400"
  style="position:relative;
  top:210px; left:100px;
  width:400;
  height:240">
  <v:fill type="gradient" color2="#90EE90" method="linear sima" angle="30" focus="100%"/>
</v:oval>

<!--THE HOLE-->
<v:oval
  strokecolor="silver"
  fillcolor="silver"
  style="position:relative;
  top:330px; left:290px;
  width:20;
  height:10">
</v:oval>

<!--THE FLAG-->
<v:rect
  style="position:relative;
  top:80px; left:300px;
  width:30;
  height:20"
  fillcolor="red"
  border="0"
  strokecolor="red">
  <v:fill type="gradient" color2="#8B0000" method="linear sigma" angle="330" focus="100%"/>
</v:rect>

<!--THE FLAGSTICK-->
<v:line
  from="300,338"
  to="300,80"
  strokecolor="yellow"
  strokeweight="2pt">
</v:line>

</v:group>