by ...

# Lesson n:

The following is a list of the shapes you can create with SVG:

1. circles
2. rectangles
3. polygons
4. ellipses
5. lines
6. polylines

Here is a graphic combining each of these shapes:

Here is the markup for the above graphic:

```<svg xmlns="http://www.w3.org/2000/svg" version="2.0"
viewBox="0 0 600 500" width="12cm" height="10cm" id="SVG_Shapes_Example">

<circle cx="150" cy="360" r="120" fill="yellow" stroke="black"
stroke-width="3" />

<rect x="100" y="50" width="400" height="200" fill="blue" />

<line x1="500" y1="0" x2="0" y2="500" stroke="black" stroke-width="5" />

<ellipse cx="280" cy="360" rx="200" ry="80" fill="green" />

<polygon points="220,120 450,220 370,370" fill="orange" />

<polyline points="570,30 470,90 570,130, 470,190 570,230 470,290 570,330
470,390 570,430 470,490" fill="none" stroke="red" stroke-width="8" />
</svg>```

Look carefully at each shape and see if you can make sense of its attributes. We will be modifying it in the following exercises.

## Exercises:

1. Create a new SVG page by copying `starter.svg` to `shapes1.svg`. Copy the example graphic from this lesson into your new document.
2. Copy `shapes1.svg` to `shapes2.svg` and do the following with `shapes2.svg` taking notes as you make the changes:
• Rearrange the order of the shapes within the graphic. What happens if you move the `line` from the first to the last shape defined? Write a general rule relating the order of the shapes and their appearance within the resulting graphic.
• Change the line so that it begins at the coordinate `(0, 0)`, and ends at `(500, 500)`. Next, make the polygon triangle into a quadrilateral by adding a coordinate at `(280, 400)`. Are you comfortable with all the attributes in each of the shape elements?
• Remove the ellipse. Reload the document and watch it disappear. Now remove the polygon and reload the document to watch it disappear.
3. Make another copy of `shapes1.svg` named `shapes3.svg` Add the following Text element to this new image:
`  <text x="110" y="110" fill="yellow" font-size="60">SVG Rocks!</text>`
When you finish your image should look like this.
4. Use what you've learned to create an image of your own design. You can look at this building with a pool by Luis Fuentes or this bus by Jerry Silva for inspiration.