SVG Applications |
TABLE OF CONTENTS
<!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)"/>
<?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>
<?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>
Developed in April 2002 by Mark Austin
Copyright © 2002, Mark Austin, University of Maryland