COAP:COAP-2100/week4

COAP 2100

COAP 2100 Archive

COAP:COAP-2100

COAP:COAP-2100/exams

COAP:COAP-2100/term project

COAP:COAP-2100/week1

COAP:COAP-2100/week2

COAP:COAP-2100/week3

COAP:COAP-2100/week4

COAP:COAP-2100/week5

COAP:COAP-2100/week6

COAP:COAP-2100/week7

COAP:COAP-2100/week8

Week 4

Topics covered

• Creating simple static SVG (continued)
• Dynamic SVG (part I, continued on week 5)

Teaching materials, software and reference manuals

(1) SVG Tutorials

• See SVG for finding online tutorials
• Using SVG with HTML5 tutorial for using SVG (Monday class and homework)
• Static SVG tutorial (grouping constructs)
• SVG/SMIL animation tutorial or SVG Essentials/Animating and Scripting SVG
• SVG Essentials On-line SVG textbook. Wiki version of J. David Eisenberg (2002), SVG Essentials, O'Reilly
• You can find a PDF of an SVG book in the worldclassroom / Documents folder

(3) SVG-Edit online software

• svg-edit (Online SVG editor)
• SVG-edit 2.5.1 (stable version, in case the above won't work).
• If you are curious about the "about", follow the links on the svg-edit home page

(4) Free SVG drawing tools you can install on your computer

• Inkscape Powerful, but more difficult drawing tool (export as "pure" SVG before pasting into HTML5)
• DIA, a popular open source diagramming tool can import/export SVG (Win/Mac/Linux). There are also portable app (Windows) and zip versions

(5) Free SVG clipart

• Open Clip Art Library (openclipart.org)

Classroom activities

• No Monday class

Wednesday

• Discussion about the mid-term exam (Wed week 5)
• Demo of the Inkscape SVG editor (editing the XML)
• The Eisenberg SVG essentials book (SVG Essentials, wiki version)
• Static SVG continued (parts of the Static SVG tutorial)
• SVG/SMIL animation tutorial
• https://developer.mozilla.org/en/SVG (reference)

Example code that you can copy / paste into an editor

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <title>Simple animate example</title>
  <desc>Rectangle shape will change</desc>
  <rect x="50" y="50" width="10" height="100" style="fill:#CCCCFF;stroke:#000099">
    <animate attributeName="width"  from="10px"  to="100px" 
	     begin="0s" dur="10s" />
    <animate attributeName="height" from="100px" to="10px"
	     begin="0s" dur="10s" />
  </rect>
  <text x="50" y="170" style="stroke:#000099;fill:#000099;font-size:14;">
  Hello. Admire the dynamic rectangle</text>
</svg>

Homework 4

• Create an HTML5+SVG page with some interesting contents
  • You may copy/paste from the text from some other source under the condition that do not violate any copyright and that you cite the source.
  • You may keep the HTML very simple (ie. only use h1 and p tags)
• Add illustrations made with SVG. You must at least create two simple animations. You are allowed to copy/paste free SVG code, e.g. from openclipart.org or you can draw them yourself.
• Submit the file to the worldclass room.

Main resources:

• Using SVG with HTML5 tutorial
• Static SVG tutorial
• SVG/SMIL animation tutorial or SVG Essentials/Animating and Scripting SVG

Due: Wednesday week 5 (before start of class)