Lab 3: SVG Basics

• Date assigned: Monday, 2012 Oct 29
• Date due: Monday, 2012 Nov 12, 11:59 p.m. Eastern time
• 49 points

Overview

Create an SVG drawing.

Requirements

Create an HTML page with an SVG element in the body.

1. Your SVG element should represent a scene, the nature of which is largely up to your imagination, but subject to the following requirements:

   1. There must be a background rectangle filled with some solid color. By “solid color” I mean not a gradient or pattern.
   2. Use at least four different colors (for stroke and/or fill) including the background color.
   3. There must be a text element.
   4. There must be an image element.
   5. There must be a complex object defined as a group (g element in defs section), consisting of several parts or sub-elements. These sub-elements must have at least one representative from three of the following types:
      • Lines
      • Paths
      • Circles
      • Ellipses

      For example, a group containing two lines, one path, and a ten circles has representatives from the three types line, path and circle.

   6. At least two instances of this complex object must be appear with different transformations including translation and rotation.

   The scene can be a reworking of your Lab 1 canvas drawing, but of course it doesn’t have to be. It can be abstract art or a representation of natural or man-made objects.

2. As in Lab 1, put a short “title” above your drawing and a caption below to explain what the picture is about (in case it is not obvious). These should be HTML elements, such as h1 and p, before and after the SVG element, not within it.

Hints

• Define your complex object (g element) with a “position” of (0, 0); this will make transformations easier to figure out. Whether the “position” represents the center of the object, its top left corner, or some other point, is up to you—do whatever makes sense. If you want to rotate the object about its center, then the position should be the center.
• Make instances of the complex object with the use element.

Submission

Turn in the web page (HTML file) and image file as attachments in Oncourse Assignments. If you have more than three (3) files, bundle them in a zip, tar, tar.gz, tar.bz2, or tar.xz file and just attach the bundle.

Scoring

• (3 points) Filled background rectangle
• (4 points) Four different colors used
• (5 points) Text element present
• (10 points) Image element present
• (15 points) Complex object defined with three sub-element types
• (4 points) Two instances of complex object
• (4 points) Two transforms including translation and rotation
• (4 points) Drawing is titled and captioned in HTML

TOTAL: 49 points