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.

Assignment:

You will use SVG to recreate the following graphic:

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