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.
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 These files are:
report- A short (max one page) report.
drawing.html- An HTML file containing the SVG representation of your drawing. This file should not contain any
styleattributes. - svg.css
- 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="http://www.w3.org/1999/xhtml"
xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<link rel="stylesheet" type="text/css" href="svg.css" />
<title>SVG and CSS sandpit</title>
</head>
<body>
<svg viewBox="0 0 1000 1000">
</svg>
</body>
</html>
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="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000">
</svg>
You can open this file as usual in Safari. You may find it helpful to examine this example.Submit your assignment by email To annette.leonhard@ed.ac.uk Subject: Assignment-IL-3
No comments:
Post a Comment