XML and Java Tutorial: Day Planner Application

SVG Applications

TABLE OF CONTENTS

simplegrid.svg .
Generate a simple grid with block of black and blue fill-in.
ence489c-logo.svg .
ENCE 489C logo .....
instruments.svg .
Create and array of instrument graphics (adapted from Chapter 12, Essenberg, O'Reilly, 2002).

simplegrid.svg

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg id="body" width="200" height="200">
<title> Demonstrate Pixel Graphics </title>

<defs>
	<rect id="c" x="1" y="1" width="18" height="18"
		style="fill: blue; stroke: none;"/>
	<rect id="bl" x="1" y="1" width="18" height="18"
		style="fill: black; stroke: none;"/>
</defs>

<image xlink:href="graph_paper.svg" x="0" y="0"
       width="200" height="200" />

   <use xlink:href="#bl" transform="translate(20, 20)"/>
   <use xlink:href="#bl" transform="translate(40, 20)"/>
   <use xlink:href="#bl" transform="translate(60, 20)"/>
   <use xlink:href="#bl" transform="translate(80, 20)"/>
   <use xlink:href="#bl" transform="translate(100, 20)"/>
   <use xlink:href="#bl" transform="translate(120, 20)"/>

   <use xlink:href="#bl" transform="translate(20, 100)"/>
   <use xlink:href="#bl" transform="translate(40, 100)"/>
   <use xlink:href="#bl" transform="translate(60, 100)"/>
   <use xlink:href="#bl" transform="translate(80, 100)"/>
   <use xlink:href="#bl" transform="translate(100, 100)"/>
   <use xlink:href="#bl" transform="translate(120, 100)"/>

   <use xlink:href="#bl" transform="translate(20, 40)"/>
   <use xlink:href="#bl" transform="translate(20, 60)"/>
   <use xlink:href="#bl" transform="translate(20, 80)"/>

   <use xlink:href="#bl" transform="translate(120, 40)"/>
   <use xlink:href="#bl" transform="translate(120, 60)"/>
   <use xlink:href="#bl" transform="translate(120, 80)"/>

   <use xlink:href="#c" transform="translate(40,40)"/>
   <use xlink:href="#c" transform="translate(60,40)"/>
   <use xlink:href="#c" transform="translate(80,40)"/>
   <use xlink:href="#c" transform="translate(100,40)"/>

   <use xlink:href="#c" transform="translate(40,60)"/>
   <use xlink:href="#c" transform="translate(60,60)"/>
   <use xlink:href="#c" transform="translate(80,60)"/>
   <use xlink:href="#c" transform="translate(100,60)"/>

   <use xlink:href="#c" transform="translate(40,80)"/>
   <use xlink:href="#c" transform="translate(60,80)"/>
   <use xlink:href="#c" transform="translate(80,80)"/>
   <use xlink:href="#c" transform="translate(100,80)"/>

ENCE 489C Logo

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
	"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="350" height="130">

<defs>
<linearGradient id="MyBlueGradient" gradientUnits="userSpaceOnUse"
                x1= "90" y1= "0"
                x2="150" y2="50" >
<stop offset="10%" style="stop-color:#FF0066; stop-opacity:0.6"/>
<stop offset="75%" style="stop-color:#EEEEFF; stop-opacity:0.8;"/>
</linearGradient>
<linearGradient id="MyOtherGradient" gradientUnits="userSpaceOnUse"
                x1="120" y1="40" x2="350" y2="120" >
<stop offset="10%" style="stop-color:#EEEEFF; stop-opacity:0.2;"/>
<stop offset="55%" style="stop-color:#FF0066; stop-opacity:0.7;"/>
<stop offset="80%" style="stop-color:#EEEEFF; stop-opacity:0.2;"/>
</linearGradient>
</defs>
<rect width="100%" height="100%"/>
<ellipse cx="100" cy="50" rx="30" ry="30" style="fill:url(#MyBlueGradient)">
</ellipse>
<rect x="120" y="70" width="220" height="20" style="fill:url(#MyOtherGradient)"/>
<text x="110" y="65" style="font-family:Arial, sans-serif;
      font-size: 24; fill:#FF0066; stroke:#FF0066">
      ENCE 489C
</text>
</svg>

Array of Instrument Graphics

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >
<svg viewBox="0 0 350 200" height="200" width="350">
<defs>
<path style="stroke: black; fill: none;"
         d="M 40 40 h 25" id="wind-line"/>
</defs>
<text y="20" x="10" font-size="10pt">
         RKSL, SEOUL    </text>
<text text-anchor="end" y="20" x="345" font-size="10pt">
         April 15, 2002 </text>
<text style="font-size: 10pt; text-anchor: end;" y="40" x="345">
         16:46          </text>
<text text-anchor="end" y="60" x="345" font-size="10pt">
         GMT            </text>

<g transform="translate(255, 30)" id="clock">
<circle style="fill: #ffffcc; stroke: black;" r="20" cy="20" cx="20"/>
<line style="stroke: black;"
         y2="20" x2="38" y1="20" x1="20"
         transform="rotate(186, 20, 20)"/>
<line style="stroke: black;"
         y2="20" x2="33" y1="20" x1="20"
         transform="rotate(53, 20, 20)"/>
</g>

<g transform="translate(10, 40)" id="thermometer">
<path style="stroke:  none; fill:  red;"
         d="M 25 27.5 25 90 A 10 10 0 1 0 35 90 L 35 27.5 Z"/>
<path style="stroke: black; fill: none;"
         d="M 25 0 25 90 A 10 10 0 1 0 35 90 L 35 0 Z"/>
<g style="font-size: 8pt; font-family: sans-serif;" id="thermometer-text">
<text style="text-anchor: end;" y= "95" x= "20"> -40 </text>
<text style="text-anchor: end;" y= "55" x= "20">   0 </text>
<text style="text-anchor: end;" y=  "5" x= "20">  50 </text>
<text style="text-anchor: end;" y="110" x= "10">   C </text>
<text y= "95" x= "40"> -40 </text>
<text y= "55" x= "40">  32 </text>
<text y=  "5" x= "40"> 120 </text>
<text y="110" x= "50">   F </text>
<text tstyle="ext-anchor: middle;" y="130" x="30">    Temp. </text>
<text style="text-anchor: middle;" y="145" x="30">  22.5/73 </text>
</g>
</g>

<g transform="translate(110, 70)"
      font-family="sans-serif" font-size="8pt" id="compass">
<circle style="stroke: black; fill: none;" r="30" cy="40" cx="40"/>
<path style="stroke: black; fill: none;"
         d="M 40 10 L 40 14 M 70 40 L 66 40 M 40 70 L 40 66 M 10 40 L 14 40"/>
<use xlink:href="#wind-line"
        transform="rotate(-60,40,40)" stroke-dasharray="3 3"/>
<use xlink:href="#wind-line"
        transform="rotate(-20,40,40)" stroke-dasharray="3 3"/>
<text text-anchor="middle" y=  "9" x="40">            N </text>
<text                      y= "44" x="73">            E </text>
<text text-anchor="middle" y= "80" x="40">            S </text>
<text text-anchor=   "end" y= "44" x= "8">            W </text>
<text text-anchor="middle" y="100" x="40"> Wind (m/sec) </text>
<text text-anchor="middle" y="115" x="40">          1.5 </text>
</g>

<g text-anchor="middle" font-size="8pt" transform="translate(220,110)" id="visbar">
<rect height="20" width="55" y="0" x="0" stroke="none" fill="green"/>
<rect fill="none" stroke="black" height="20" width="100" y="0" x="0"/>
<path d="M 25 20 L 25 25 M 50 20 L 50 25 M 75 20 L 75 25" stroke="black" fill="none"/>
<text y="35" x=  "0">              0  </text>
<text y="35" x= "25">             10  </text>
<text y="35" x= "50">             20  </text>
<text y="35" x= "75">             30  </text>
<text y="35" x="100">             40+ </text>
<text y="60" x= "50"> Visibility (km) </text>
<text y="75" x= "50">              22 </text>
</g>

</svg>