Home Assignment 1 Assignment 2 Assignment 3 Assignment 4
Assignment 5 Assignment 6 Assignment 7 Assignment 8 Assignment 9
Assignment 10 Assignment 11 Assignment 12 Assignment 13 Final


Assignment 5

Author : K M Asif

Week 5 ~ Lecture 10 and Lecture 11

PART 1 :: SVG

SVG stands for Scalable Vector Graphics. SVG is just another XML grammer that is used to describe two dimensional vector graphics. The interesting fact is though XML is for representing  content in a readable manner for human being, the SVG is certainly not readable text! The latest firefox browser should render an SVG file correctly. But sometime it may not happen if some tags used by the developer has not been supported by developer. To render an SVG file in IE7 one need to have the active-x for SVG viewer. Adobe SVG viewer is such one. I downloaded and installed it and now I can render SVG file in my IE7. For some reason it is not working in Firefox2. I will look into that some time later on.

PART 2 :: An Example 

Here is one of the example shown in the class. Click here. The source code is given below.
<?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>
<g transform="translate(300,100)">
<defs>
 <style type="text/css"><![CDATA[
 circle{
 stroke:blue;stroke-width:20;fill:yellow
 }
 text{
 font-size:28pt;stroke:black;text-anchor:middle;
 }
 ]]>
 </style>
</defs>
<g transform="translate(-180,0)">
 <circle cx="0" cy="0" r="60"/>
 <text x="0" y="8">S</text>
</g>
<g transform="translate(-60,0)">
 <circle cx="0" cy="0" r="60"/>
 <text x="0" y="8">e</text>
</g>
<g transform="translate(60,0)">
 <circle cx="0" cy="0" r="60"/>
 <text x="0" y="8">r</text>
</g>
<g transform="translate(180,0)">
 <circle cx="0" cy="0" r="60"/>
 <text x="0" y="8">f</text>
</g>
<g transform="translate(-120,104)">
 <circle cx="0" cy="0" r="60"/>
 <text x="0" y="8">l</text>
</g>
<g transform="translate(0,104)">
 <circle cx="0" cy="0" r="60"/>
 <text x="0" y="8">e</text>
</g>
<g transform="translate(120,104)">
 <circle cx="0" cy="0" r="60"/>
 <text x="0" y="8">r</text>
</g>
</g>
</svg>

PART 3 :: My Tweaked version

Yes, I have tried to write my first SVG file. I thought I'd tweak the class example to change the colors, text and position. Click here to see my first SVG file :). Below is the source code.
<?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>
<g transform="translate(300,100)">
<defs>
 <style type="text/css"><![CDATA[
 circle{
 stroke:red;stroke-width:10;fill:olive
 }
 text{
 font-size:28pt;stroke:indigo;text-anchor:middle;
 }
 ]]>
 </style>
</defs>
<g transform="translate(-180,0)">
 <circle cx="0" cy="0" r="60"/>
 <text x="0" y="8">A</text>
</g>
<g transform="translate(-60,0)">
 <circle cx="0" cy="0" r="60"/>
 <text x="0" y="8">S</text>
</g>
<g transform="translate(60,0)">
 <circle cx="0" cy="0" r="60"/>
 <text x="0" y="8">I</text>
</g>
<g transform="translate(180,0)">
 <circle cx="0" cy="0" r="60"/>
 <text x="0" y="8">F</text>
</g>
<g transform="translate(-120,154)">
 <circle cx="0" cy="0" r="60"/>
 <text x="0" y="8">K</text>
</g>
<g transform="translate(0,254)">
 <circle cx="0" cy="0" r="60"/>
 <text x="0" y="8">M</text>
</g>
<g transform="translate(120,3544)">
 <circle cx="0" cy="0" r="60"/>
 <text x="0" y="8">I</text>
</g>
</g>
</svg>
PS : I could not run SVG in firefox. If you find the same problem install the Adobe SVG viewer and try to open SVG link in IE7.

References :