SVG Exercise

Objective: to practice a practical application of xy coordinates by manipulating an SVG web page.

In this exercise we will use a web page language called Scalable Vector Graphics (SVG) to explore a practical use of an xy coordinate grid. Using SVG, shapes can be drawn at a location specified by x and y coordinates. We will learn to position circles in this exercise. We will use the gEdit text editor and the FireFox browser to work with SVG.

Note: On the computer screen the x coordinates increase from left to right just as they do in mathematics. The y coordinate, however, increases from top to bottom on the computer screen, the opposite direction from mathematics.

You will start with five circles in a row in the upper left corner of a box. The box is 400 wide by 400 high. You will be changing the x and y coordinates to move the circles into new formations.

SVG scratch pad Border Circles

SVG web page code is slightly more complicated than HTML web page code. You will copy code from an SVG page to start.

  1. Open the FireFox browser.
  2. Go to the Upward Bound home page http://www.comfsm.fm/~dleeling/ub/ub.html.
  3. Click on the link to this page of SVG directions. The page includes images to help you.
  4. Click on the link to the SVG code http://www.comfsm.fm/~dleeling/ub/u82/circles.html .
  5. Select the code with the mouse and choose Copy from the Edit menu.
  6. Open the Text Editor.
    Fedora screen shot of Applications:Accessories menu
  7. Use the Edit menu to paste the code into the Text Editor.
  8. Use the File: Save to save the file as circles.svg to your flash drive or the hard drive. Note the new "extension": .svg.
  9. To make your work easier, arrange your desktop with both the SVG and the Text Editor both open, next to each other.
    [Note: the SVG file in the image below is not the same as the file you are working on.]

Your first task will be to arrange the circles in a straight line across the middle of the square. The arrangement is seen below in illustration one.

SVG scratch pad Border Circles Illustration 1.

To move the circles you will have to change the locations of the centers of the circles. In SVG the circle command is
<circle cx="20" cy="15" r="10" />
cx is the x coordinate of the center of the circle.
cy is the y coordinate of the center of the circle.
r is the radius of the circle.

Which coordinate controls the horizontal position of the circles? Which coordinate controls the vertical position of the circles?

Then create each of the following diagrams.

SVG scratch pad Border Circles Illustration 2. Border Circles Illustration 3. Border Circles Illustration 4. Border Circles Illustration 5.

To make more circles, copy and paste additional circle command lines.

Changing the colors of the circles. You can use the hexadecimal color commands to change the circle colors. Add the fill attribute to the circle element with the hexadecimal color values you learned earlier in the week as seen below.

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px">
 <title>SVG scratch pad</title>
  <g stroke="black" stroke-width="3px" fill="none">
   <desc>Border</desc>
   <rect x="0" y="0" width="400" height="400" />
  </g>
  <g stroke="black" stroke-width="2px" fill="deepskyblue" >
   <desc>Circles</desc>
   <circle cx="20" cy="15" r="10" fill="#F00" />
   <circle cx="40" cy="15" r="10" fill="#F80" />
   <circle cx="60" cy="15" r="10" fill="#FF0" />
   <circle cx="80" cy="15" r="10" fill="#8F0" />
   <circle cx="100" cy="15" r="10" fill="#0F0" />
  </g>
</svg>

UB • Courses • COMFSM