Sunday, 30 October 2011

Assignment 3 – a drawing in SVG

For your third assignment, you should create a drawing in SVG. Your drawing should create as much variety and interest as you can using as little code as you can.

In particular, you should define and re-use symbols and use css to create variety.
  • If you are an informatics student, your code should also include examples of svg animation.
  • If you are a mathematics student, your code should include uses of svg transformations.
Others are also welcome to use these features of SVG.

For this assignment you have to produce three files (which you can store in a Folder on your Desktop on the Macs in the 3.01 lab mdash; use -assignment3 as the name of this folder).

These files are:
A short (max one page) report.
An HTML file containing the SVG representation of your drawing. This file should not contain any style attributes.
This file should use CSS properties to style your svg.

Each file should contain your student ID in a comment near the beginning of the file.

drawing.html should use one of the following templates (your code should go inside the sag tags):
<!DOCTYPE html>
<html xmlns=""
    <link rel="stylesheet" type="text/css" href="svg.css" />
    <title>SVG and CSS sandpit</title>

    <svg viewBox="0 0 1000 1000">


This creates a canvas with both x and y coordinates ranging from 0 to 1000. Your css should make the width and height of this element equal to ensure a 1:1 aspect ratio.

Unfortunately our browsers do not render animation when svg is rendered within html. If you use animation, use the following template to demonstrate your drawing, in a file named svg.svg
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="svg.css" type="text/css"?>
<svg  xmlns=""
      xmlns:xlink="" viewBox="0 0 1000 1000">

You can open this file as usual in Safari. You may find it helpful to examine this example.

Submit your assignment by email To Subject: Assignment-IL-3

No comments:

Post a Comment