Getting Down with ...

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.