Copy the starter.svg image you created in lesson 1 to circles.svg. Change the id attribute to SVG_Circles. Make the following changes to your basic SVG image:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    viewBox="0 0 200 200" width="200" height="200" id="green_circle">

    <circle cx="100" cy="100" r="70" fill="green" />
</svg>

Make sure to add the <circle> element inside of the <svg> element. When rendered , it looks like this:

We can also add a border line to the circle by adding stroke="black" and stroke-width="5" inside of the <circle> element.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    viewBox="0 0 200 200" width="200" height="200"
    id="green_circle_with_black_border">

    <circle cx="100" cy="100" r="70" fill="green" stroke="black"
        stroke-width="5" />
</svg>

Which renders as:

Let's look at all the attributes that make up a circle element. The cx and cy attributes set the x and y coordinates of the circle's center, and r the radius of the circle. Next are the style attributes of the circle: fill sets the fill color of the circle, stroke and stroke-width control the appearence of the contour line around it. Note that the fill and stroke colors can use the English names for web colors to control color, or you can use the hexidecimal values for red, green, and blue, which allows for much more variety.

Here we have three circles side by side. View the markup for this page (right click the mouse inside the page and select View Page Source in Firefox) and notice that each circle is inside its own SVG element. Putting the three <svg> elements one after the other in the web page results in the three images being rendered side by side:

In this next example, six circles are put inside a single image. See if you can tell which attributes have been changed in each circle (again, view the page source):

What is the pattern in the value of the cx (center x) attribute? Why?

Exercises:

1. Make several copies of the circle code inside the body of circles.svg. Use these copies to experiment with the different parts of the SVG markup used to draw a circle.
2. Describe what changes to the values of the cx, cy, and r attributes do to the appearance of your circle.
3. Describe what changes to the values of the style attribute do to your circle. How can you make your circle red? What is the stroke of the image? How does changing the stroke-width effect the appearance of the circle?