Back to index

Scalable Vector Graphics

There are several scripting languages available which can be used to embed images and programs into a web page. One of the simplest is SVG. Here is a very simple SVG demo:

Once you have inspected the code you should be able to surmise the following:
  • cx and cy are used to designate the center of the circle
  • r defines the radius of the circle
  • stroke and stroke-width are used to create the shell of the circle
  • fill assigns a color to the inside of the circle
  • height and width claim territory for the svg graphics item
Here's an example which creates a rectangle:
In this example the x and y indentify the upper-left corner of the rectangle.
Finally, let's take a look at how to draw lines:
Notice that the background was filled in as blue using a rectangle. Also notice that one of the colors was designated using RGB values.


You will use SVG to recreate the following graphic:

Get the colors as close as possible using RGB values, if necessary.